选择器扩展
- BEM 命名法
- 嵌套选择器
-
&符号 - 嵌套属性
例如：
.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;
}
注释
- 支持 // 单行注释。
- 如果多行注释
/*!多行注释*/的第一个字母是!，那么注释总是会被保留到输出的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 访问它。
运算
- 数字的加
+、减-、乘*、除/、模%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;
}
- 颜色相关运算
p {
color: #010203 + #040506;
}
可以使用 color functions(颜色函数) 。
- 字符串插值
.userCard {
width: 100px;
&-name {
$red: #f60;
color:$red;
&::before{
content: '「#{$red}'
}
&::after{
content: '」'
}
}
}
