核心原则

以简为美,简约至上。

可以当成一门新语言来学

String

  • SCSS 的属性应该使用单引号;
  • 但有一些特殊的属性 (比如 sans-serif/initial) 无须使用引号, 例子如下:
$font-type: sans-serif

Number

  • 0 作为长度时后面不应该带有单位;
  • 给数字添加单位应该使用乘法, 例子如下:
$value: 42
// yep
$length: $value * 1px
// nope
$length: $value + 1px
  • 数字间计算需要带上括号, 例子如下:
// yep
.foo {
width: (100% / 3);
}

嵌套选择器

.foo {
.bar {
&:hover {
color: red
}
}
}

生成 css 为:

.foo .bar:hover {
color: red;
}
.foo {
&-bar {
color: red;
}
}

生成 css 为:

.foo-bar {
color: red;
}

混合宏

SCSS 中提供函数的支持

@mixin dummy($a, $b, $c) {
// ...
}
@include dummy(true, 1, 'pdd')

条件语句

@if ($support-legacy) {
// ..
} @else {
// ..
}

循环

一般使用 each

@each $key, $value in $map {
// ...
}

结合伪类可以使用 for

@for $i from 0 through 10 {
.foo:nth-of-type(#{$i}) {
// ...
}
}

继承

.demo1 {}
.demo {
@extend .demo1
}

逻辑表达式(Operator)

operators

参考文献