summaryrefslogtreecommitdiffhomepage
path: root/zh-cn/sass-cn.html.markdown
blob: 985c647019c8a8b9b9c97fde47ac2a9e32231b54 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
---
language: sass
filename: learnsass-cn.scss
contributors:
  - ["Laura Kyle", "https://github.com/LauraNK"]
  - ["Sean Corrales", "https://github.com/droidenator"]
  - ["Kyle Mendes", "https://github.com/pink401k"]
  - ["Keith Miyake", "https://github.com/kaymmm"]
translators:
   - ["Jiang Haiyun", "http://www.atjiang.com"]
lang: zh-cn
---

Sass是一种CSS扩展语言,它增加了诸如变量、嵌套、mixin等功能。
Sass(以及其它预处理器,如[Less](http://lesscss.org/)等) 能帮助开发人员编写易维护和 DRY (Don't Repeat Yourself)的代码。

Sass有两种不同的语法可选用。SCSS的语法和CSS的相同,但增加了Sass的额外功能。或者Sass(原来的语法),它使用缩进而非大括号和分号。

本教程使用SCSS编写。

如果你已熟悉CSS3,你可能相对能较快地掌握Sass。它并没有提供任何新的类型属性,而只是提供了一些工具使你能更高效的编写CSS,并且使维护更加容易。

```scss


// 单行注释当Sass被编译成CSS后会被删除。

/* 多行注释将保留. */

/* 变量
============================== */



/* 你可以将一个CSS值(如一个颜色值)保存到变量中。
使用'$'符号来创建一个变量。*/

$primary-color: #A3A4FF;
$secondary-color: #51527F;
$body-font: 'Roboto', sans-serif;

/* 你可以在你的样式文件中使用变量。
   现在假如你想修改颜色,你只需修改一次即可。*/

body {
	background-color: $primary-color;
	color: $secondary-color;
	font-family: $body-font;
}

/* 以上将编译成: */
body {
	background-color: #A3A4FF;
	color: #51527F;
	font-family: 'Roboto', sans-serif;
}

/* 相比于在你的样式文件中逐个进行修改,这种方式维护性更好。 */



/* 控制指令
============================== */

/* Sass允许你使用@if, @else, @for, @while, 和 @each 来控制
   你的代码如何编译成CSS */

/* @if/@else块的行为和你可能预想的会完全相同 */

$debug: true !default;

@mixin debugmode {
	@if $debug {
		@debug "Debug mode enabled";

		display: inline-block;
	}
	@else {
		display: none;
	}
}

.info {
	@include debugmode;
}

/* 如果$debug设置为了true, .info 将会显示; 如果设置为false那么
   .info 将不显示。

注意: @debug将在命令行中输出调试信息。
在调试你的SCSS时它对于检查变量很有用。*/

.info {
	display: inline-block;
}

/* @for是控制循环,它能遍历区间值。
它对于设置一组元素的类型特别有用。
有两种形式,"through"和"to"。前者包括最末那个值,
而后者止于最末那个值。 
*/

@for $c from 1 to 4 {
	div:nth-of-type(#{$c}) {
		left: ($c - 1) * 900 / 3;
	}
}

@for $c from 1 through 3 {
	.myclass-#{$c} {
		color: rgb($c * 255 / 3, $c * 255 / 3, $c * 255 / 3);
	}
}

/* 将编译成: */

div:nth-of-type(1) {
	left: 0;
}

div:nth-of-type(2) {
	left: 300;
}

div:nth-of-type(3) {
	left: 600;
}

.myclass-1 {
	color: #555555;
}

.myclass-2 {
	color: #aaaaaa;
}

.myclass-3 {
	color: white;
// SASS automatically converts #FFFFFF to white
}

/* @while也非常直白: */

$columns: 4;
$column-width: 80px;

@while $columns > 0 {
	.col-#{$columns} {
		width: $column-width;
		left: $column-width * ($columns - 1);
	}

	$columns: $columns - 1;
}

/* 将输出以下CSS: */

.col-4 {
	width: 80px;
	left: 240px;
}

.col-3 {
	width: 80px;
	left: 160px;
}

.col-2 {
	width: 80px;
	left: 80px;
}

.col-1 {
	width: 80px;
	left: 0px;
}

/* @each函数类似@for, 除了它使用一个列表而不是序列值
注意: 你指定列表的方式和指定其它变量一样,
用空格作为分隔符。 */

$social-links: facebook twitter linkedin reddit;

.social-links {
	@each $sm in $social-links {
		.icon-#{$sm} {
			background-image: url("images/#{$sm}.png");
		}
	}
}

/* 将输出: */

.social-links .icon-facebook {
	background-image: url("images/facebook.png");
}

.social-links .icon-twitter {
	background-image: url("images/twitter.png");
}

.social-links .icon-linkedin {
	background-image: url("images/linkedin.png");
}

.social-links .icon-reddit {
	background-image: url("images/reddit.png");
}


/* Mixins
==============================*/

/* 如果你发现你要为多个元素编写相同的代码,
你可能想将那些代码保存到一个mixin中。

使用'@mixin'指令,再为你的mixin加上一个名称。*/

@mixin center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

/* 你可以通过'@include'及mixin名来调用mixin。 */

div {
	@include center;
	background-color: $primary-color;
}

/* 将编译成: */
div {
	display: block;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	background-color: #A3A4FF;
}

/* 你可以使用mixin来创建一个快捷属性。*/

@mixin size($width, $height) {
	width: $width;
	height: $height;
}

/* 你可以通过传入width和height参数来调用它。*/

.rectangle {
	@include size(100px, 60px);
}

.square {
	@include size(40px, 40px);
}

/* 编译成: */
.rectangle {
  width: 100px;
  height: 60px;
}

.square {
  width: 40px;
  height: 40px;
}



/* 函数
============================== */



/* Sass提供的函数可以用来完成各种各样的任务。
   考虑以下情况 */

/* 函数可以通过其名称及传入其所需的参数来调用 */
body {
  width: round(10.25px);
}

.footer {
  background-color: fade_out(#000000, 0.25);
}

/* 编译成: */

body {
  width: 10px;
}

.footer {
  background-color: rgba(0, 0, 0, 0.75);
}

/* 你也可以定义你自己的函数。函数非常类似于mixin。
   当你在函数和mixin之间抉择时,记住mixin最适合于创建CSS而函数更适合于
   处理那些可能在你的Sass代码中使用的逻辑。'数学运算符'部分的例子
   是转成可重用函数的最理想选择。 */

/* 该函数将接收一个目标尺寸大小和父结点尺寸大小,然后计算并
    返回百分数 */

@function calculate-percentage($target-size, $parent-size) {
  @return $target-size / $parent-size * 100%;
}

$main-content: calculate-percentage(600px, 960px);

.main-content {
  width: $main-content;
}

.sidebar {
  width: calculate-percentage(300px, 960px);
}

/* 编译成: */

.main-content {
  width: 62.5%;
}

.sidebar {
  width: 31.25%;
}



/* 扩展 (继承)
============================== */



/* 扩展是在选择子间共享属性的一种方法。 */

.display {
	@include size(5em, 5em);
	border: 5px solid $secondary-color;
}

.display-success {
	@extend .display;
	border-color: #22df56;
}

/* 编译成: */
.display, .display-success {
  width: 5em;
  height: 5em;
  border: 5px solid #51527F;
}

.display-success {
  border-color: #22df56;
}

/* 扩展一条CSS语句优于创建一个mixin,
   这是由Sass组合所有共享相同基样式的类的方式决定的。
   如果使用mixin完成,width, height, 和border将会在
   调用了该mixin的每条语句中重复。虽然它不至于会影响你的工作流,
   但它会在由Sass编译器生成的的文件中添加不必要的代码。*/


/* 嵌套
============================== */



/* Sass允许在选择子中嵌套选择子 */

ul {
	list-style-type: none;
	margin-top: 2em;

	li {
		background-color: #FF0000;
	}
}

/* '&'将被父选择子替换。*/
/* 你也可以嵌套伪类。 */
/* 注意过度嵌套将导致你的代码难以维护。
最佳实践推荐在嵌套时不超过3层。
例如: */

ul {
	list-style-type: none;
	margin-top: 2em;

	li {
		background-color: red;

		&:hover {
		  background-color: blue;
		}

		a {
		  color: white;
		}
	}
}

/* 编译成: */

ul {
  list-style-type: none;
  margin-top: 2em;
}

ul li {
  background-color: red;
}

ul li:hover {
  background-color: blue;
}

ul li a {
  color: white;
}



/* 片段与导入
============================== */



/* Sass允许你创建片段文件。它有助于你的Sass代码保持模块化。
   片段文件应该以 '_' 开头,例如 _reset.css。
   片段不会输出到CSS中。*/

/* 考虑以下的CSS,我们会将它们放入一个叫作_reset.css的文件中 */

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* Sass提供的@import能用来将片段导入到文件中。
   它与传统的CSS @import语句不同,不需要通过
   另外的HTTP请求来获取导入的文件。
   Sass提取导入文件并将它与编译后的代码结合起来。 */

@import 'reset';

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}

/* 编译成: */

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}



/* 占位符选择子
============================== */



/* 占位符在创建用于扩展的CSS语句时非常有用。
   如果你想创建一条只通过@extend使用的CSS语句,你可以利用占位符来实现。
   占位符以'%'而非'.'或'#'开头。占位符不会出现在编译后的CSS中 */

%content-window {
  font-size: 14px;
  padding: 10px;
  color: #000;
  border-radius: 4px;
}

.message-window {
  @extend %content-window;
  background-color: #0000ff;
}

/* 编译成: */

.message-window {
  font-size: 14px;
  padding: 10px;
  color: #000;
  border-radius: 4px;
}

.message-window {
  background-color: #0000ff;
}



/* 数学运算
============================== */



/* Sass提供以下的运算符: +, -, *, /, 和 %。它们
   相比于使用你事先手工计算好了的数值,它们
   对于直接在你的Sass文件中计算数值很有用。
   以下是设置一个简单的两列设计的例子。*/

$content-area: 960px;
$main-content: 600px;
$sidebar-content: 300px;

$main-size: $main-content / $content-area * 100%;
$sidebar-size: $sidebar-content / $content-area * 100%;
$gutter: 100% - ($main-size + $sidebar-size);

body {
  width: 100%;
}

.main-content {
  width: $main-size;
}

.sidebar {
  width: $sidebar-size;
}

.gutter {
  width: $gutter;
}

/* 编译成: */

body {
  width: 100%;
}

.main-content {
  width: 62.5%;
}

.sidebar {
  width: 31.25%;
}

.gutter {
  width: 6.25%;
}

```

## SASS还是Sass?
该语言的名字,“Sass”,是一个词,不是一个缩写。
你有没想过Sass是否是一个缩写词?你可能没有,但我反正会告诉你。
该语言的名字是一个单词,不是一个缩写词。
由于人们老是将它写成"SASS",语言的作者开玩笑地称它为"Syntactically Awesome StyleSheets"。


## 实践Sass
如果你想在你的浏览器中尝试Sass,参阅[SassMeister](http://sassmeister.com/)。
你可以选用任一种语法,只需进到设置页然后选择Sass或SCSS。


## 兼容性
Sass可以用于任何项目中,只要你有程序能将它编译成CSS即可。你还需要验证你所使用的CSS是否与你的目标浏览器兼容。

[QuirksMode CSS](http://www.quirksmode.org/css/)和[CanIUse](http://caniuse.com)对于检查兼容性来说都是不错的资源。


## 延伸阅读资料
* [Official Documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html)
* [The Sass Way](http://thesassway.com/) 上提供了教程(初学者-高级)和文章。