从Less切换到SCSS后如何将完整CSS规则作为变量复用？

你在Less中使用的类引入式复用，在SCSS中对应3种常用实现方式，按需选择即可：

1. 混入（@mixin + @include） #

适合需要传参数动态调整规则的场景，无参数的固定规则也可使用：

// 定义无参数mixin
@mixin cFF {
  color: #fff;
}
@mixin c00 {
  color: #000;
}

// 调用
.example a {
  @include cFF;
}

支持传参的灵活用法：

// 定义带参数mixin，支持设置默认值
@mixin text-style($color, $fontSize: 14px) {
  color: $color;
  font-size: $fontSize;
}

// 调用时传参
.example a {
  @include text-style(#fff, 16px);
}

2. 占位符选择器（% + @extend） #

适合不需要传参的固定规则复用，不会生成冗余的全局类代码，编译后会自动合并相同规则的选择器，压缩代码体积：

// 定义占位符，不会单独编译到最终CSS中
%cFF {
  color: #fff;
}
%c00 {
  color: #000;
}

// 调用
.example a {
  @extend %cFF;
}
.other-box {
  @extend %cFF;
}

上面的代码编译后会自动合并为：

.example a, .other-box {
  color: #fff;
}

3. 扩展普通类（@extend 普通选择器） #

如果你本身需要保留全局通用类，也可以直接扩展已有的普通类，效果和Less的类引入一致：

// 全局类会保留在编译后的CSS中
.cFF {
  color: #fff;
}

// 调用
.example a {
  @extend .cFF;
}

内容的提问来源于stack exchange，提问作者Sagive