SCSS

选择器扩展

1. BEM 命名法
2. 嵌套选择器
3. & 符号
4. 嵌套属性

例如：

.userCard {
  width: 100px;
  &.active {
    background: yellow;
  }
  &-name {
    color: gray;
    font: {
      size: 18px;
      weight: bold;
      family: Courier;
    }
  }
}

输出的 CSS 代码为：

.userCard {
  width: 100px;
}
.userCard.active {
  background: yellow;
}
.userCard-name {
  color: gray;
  font-size: 18px;
  font-weight: bold;
  font-family: Courier;
}

注释

1. 支持 // 单行注释。
2. 如果多行注释/*!多行注释*/的第一个字母是 !，那么注释总是会被保留到输出的CSS中。

变量

变量是有作用域的。

.userCard {
  width: 100px;
  &-name {
    $red: #f60;
    color: gray;
    &:hover {
      color: $red;
    }
  }
  &-description {
    $red: red;
    color: $red;
  }
}

可以使用 !global 强行变为全局变量。

.userCard {
  width: 100px;
  &-name {
    $red: #f60 !global;
    color: gray;
    &:hover {
      color: $red;
    }
  }
  &-description {
    color: $red;
  }
}

变量名不区分下划线和中划线。
如果你定义了一个名为 $main-width 的变量，你也可以使用 $main_width 访问它。

运算

1. 数字的加+、减-、乘*、除/、模% 5种运算。

但是，这里有将/解析为除法三种情况。这些涵盖了绝大多数当做除法的案例。 他们是：
i. 如果该值，或值的任何部分，存储在一个变量中或通过函数返回。
ii. 如果该值是由括号括起来的，除非这些括号是在一个列表（list）外部，并且值是括号内部。
iii. 如果该值被用作另一个算术表达式的一部分。
例如:

p {
  font: 10px/8px;             // 原生的CSS，不作为除法
  $width: 1000px;
  width: $width/2;            // 使用了变量, 作为除法
  width: round(1.5)/2;        // 使用了函数, 作为除法
  height: (500px/2);          // 使用了括号, 作为除法
  margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
  font: (italic bold 10px/8px); // 在一个列表（list）中，括号可以被忽略。
}

编译为：

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}

2. 颜色相关运算

p {
  color: #010203 + #040506;
}

可以使用 color functions(颜色函数) 。

3. 字符串插值

.userCard {
  width: 100px;
  &-name {
    $red: #f60;
    color:$red;
    &::before{
      content: '「#{$red}'
    }
    &::after{
      content: '」'
    }
  }
}