BEM 命名法：

BEM 是块（block）、元素（element）、修饰符（modifier）的缩写，是由 yandex 团队提出的一种 CSS Class 命名方法。

但是由于繁琐，基本不用，但是它的思想可以借鉴。

& 符号:

& 符号用来引用父选择器。

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }

嵌套属性:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

注释

终于支持 // 单行注释了。

如果多行注释的第一个字母是 !，那么注释总是会被保留到输出的 CSS 中。

变量

变量是有作用域的。

可以使用 !global 强行变为全局变量（不推荐使用）。

运算

可以进行数字的加减乘除模5种运算。

对于除法要注意：

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 {
    color: #010203 + #040506;
}

插值语句

$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

一个例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SCSS 2</title>
  <link rel="stylesheet" href="./2.scss">
</head>
<body>
<div class="userCard">
  <div>
    <div class="userCard-name">饥人谷</div>
    <div class="userCard-oneSentence">前端社区</div>
  </div>
  <div class="userCard-description">前端社区</div>
</div>
</body>
</html>

/*单行注释*/
$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;
        }
    }
    &-oneSentence {
        $red: #f60;
        &::before {
            content: '「 #{$red}';
        }
        &::after {
            content: '」';
        }
    }
    &-description {
    }
}