1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$red-color: #6f0; // 变量
.userCard {
  width: 100px;
  &.active { // &符号
    background: yellow;
  }
  &-name {
    color: black;
    &:hover {
      color: $red-color;
    }
    font: { // 属性连写时
      size: 28px;
      weight: bold;
      family: 'Courier New', Courier, monospace;
    }
  }

一、变量以 $ 开头

二、&、#{}(类似与js的模版字符串的变量写法#{$font-size})

以下写法会被翻译成

1
2
3
4
5
6
7
8
9
.userCard {
  width: 100px;
  &.active {
    background: yellow;
  }
  &-name {
    color: black;
  }
}

这样

1
2
3
4
5
6
7
8
9
.userCard {
  width: 100px;
}
.userCard.active {
  background: yellow;
}
.userCard-name {
  color: black;
}

三、属性连写

以下写法

1
2
3
4
5
6
7
8
.userCard-name {
    color: black;
    font: {
      size: 28px;
      weight: bold;
      family: 'Courier New', Courier, monospace;
    }
}

等同于

1
2
3
4
5
6
.userCard-name {
    color: black;
    font-size: 28px;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
}

四、加减乘除运算（特别注意/在某些情况下会被css当作简写属性的间隔符）

五、函数

一个响应式移动端的函数栗子：

1
2
3
@function px($npx) {
    @return $npx/375 * 100vw;
}

六、@content

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 定义
@mixin phone {
  @media (max-width: 500px) {
    @content;
  }
}
// 使用
@include phone {
  /* // 这一注释部分会被直接代替上面函数`@content`
  > ul {
    display: none;
  }
   */
}