说来惭愧，从业多年，从来没有用过 scss，一直使用less。记得当年安装 scss还得安装ruby可把我吓坏了，后来就一直绕着走。

粗浅来看没人搞 sass ，因为这玩意没有括号，只关注 scss 就可以。

今天开搞组件库，还是得学学 scss，就简单看看，如果我是架构师，我还是选less，至少安装简单。

常规用法

• 声明变量 $my-width :10px 说是$没有侵入性，比less的 @ 好
• 嵌套、 & 标识符、变量作用域和 less一样
• 通过 @import 来加载文件，可以省略后缀
• 局部文件可以 下划线开头，局部文件不会单独编译成文件，导入的时候还可以省略下划线

同样小心如果 @import 导入的文件：

• 拥有 .css 后缀

• 导入 url() 值

• 注释和less一样 , // 编译会丢失， /**/ 会进行保留

大段的代码如何复用，要考虑混合器，我们对一段样式前面添加 @mixin 标识符。后续使用 @include 进行导入。同时还可以传参

@mixin aa(color){
  color: $color;
  width:10px;
  height:10px;
}
.b{
  @include aa(blue)
}

@extend .className 可以通过 extend 来继承css

这些就足够用了。

高阶用法

at rules

值、规则。

设定：

$radius: 3px; // 普通值变量
$-radius: 3px; // 私有成员，不能导出使用
$black: #000 !default; // 追加 !default 默认值，说明可以被修改
// 普通规则变量
@mixin rounded {
  border-radius: $radius;
}

导入：

@use 'xxx' as c ; // 导入文件
.button {
  @include c.rounded; // 导入规则
  border-radius: c.$radius; // 导入值
}