核心原则

以简为美,简约至上。

可以当成一门新语言来学

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
}

参考文献