你不知道的Sass

关注↑↑↑我们获得更多精彩内容！

周颖，2017年加入去哪儿网技术团队。目前在大住宿事业部/大前端/RN。参与callcenter呼叫中心，酒店客户端迁移RN等项目的开发。个人对用户交互与前端性能优化有浓厚兴趣。

话说工欲善其事，必先利其器。工匠想要工作顺利继续，一定要先让工具锋利起来，写码亦是如此。Sass 作为前端开发的利器，也许已经在你的工程项目中应用起来。但是如果你只会简单的变量声明、&连接或者只是 include 一个 mixin。那么这把利器可能没有发挥出它最大的作用，相反会在你的代码发挥副作用。本文略过了 Sass 的安装，以及基本的语法，针对有经验的 Sass 开发者。相对枯燥，但是深入之后也许你会大呼过瘾，对 Sass 有一个新的看法。

一 关于@mixin

1、Good：@mixin 可传递参数的优点众所周知，下面的代码定义了一个生成圆点的 mixin。在需要的时候 @include dot() 调用即可。

2、Bad：同样 @mixin 也有缺点，先讲结论：不能将相同的样式代码块合并在一起。比如：定义一个 3px 圆角的 mixin。

在 .box 和 .btn 一起调用这个 mixin。

查看编译的结果：

在最简单的 CSS 开发中，将相同的代码块合并类似下面更好 ，不要急，Sass 也为提供了合并代码块的语法 %placeholder，我们后续会讲解到。

3、如果你熟悉 ES6，那么对剩余参数一定不陌生；既然 mixin 对外暴露了传参的功能，使用剩余参数可是为开发节省了大量时间。当然，这里的 mixin 还可以加上浏览器前缀的处理。

二 %placeholder

1、Good：前文我们已经提到 @mixin 不可合并样式， 而 %placeholder 可以合并；%placeholder 通过 @extend 调用，编译出来的代码会将相同的代码合并在一起。看到这里你是不是又很熟悉 @extend 某一个类，比如 @extend .btn 所以继承一个占位和继承一个 CSS 的类，又有什么区别呢？我们先来看他和 mixin 相比的优点，然后再分析继承下的区别：定义一个 %placeholder：

使用 @extend 调用：

编译之后相同的代码都合并了在一起：

2、Bad：%placeHolder 同样也有不好的地方：不支持传参。读者若有兴趣可以定义一个 mixin 出来，看看编译的结果。接下来则要为你讲解上一节留下的问题，什么时候 @extend 一个类，什么时候 @extend 一个占位，敲黑板划重点，考试要考的。

三 .className VS %placeHolder

之前我们讲过，通过 @extend 一个样式或者占位符，都可以编译出一段 CSS 的代码片段。那么继承一个样式类，和继承一个占位符的区别是什么呢?我们可以看一下以下讲解：1、Bad： @extend .className 的不足。样式类button在三个地方出现了：

Sass 支持继承一个样式类：

但是查看编译的结果：

你可能只希望编译出这样的结果：

为什么会出现这样的情况?.button 类名可能用在不同之处，有不同的容器包裹着，然而 Sass 中的 @extend 无法判断引用哪个地方的 .button。所以他自己做主，将不同地方出现的 .button 类名都引入了进来。2、使用 %placeholder 来解决这个问题

查看编译的结果：

小结

四 ES6特性

我们之前讲了 Sass 类似于 ES6 的剩余参数，其实它还有一些特性是类似于 ES6 的语法的。

1、{}插值

插值类似于 ES6 的模版字符串，在一般的情况下，变量只作用于算数运算或者逻辑运算。那么变量是否可以作为选择器或者属性上？这样是不被允许的。

插值可以简单的理解为字符串的拼接。

下面代码的本来意思是想设置字体大小为12px，行高为30px。

编译后：

使用插值就可以方便的解决。

2、属性遍历@each in

ES6 中提供了 for props of obj 循环遍历语法。在 Sass 中，同样也提供了类似的语法。这样只维护一个特殊的 iconMap 即可生成一系列的 icon 类出来，是不是代码清爽了许多～

Sass 的语法还有许多好玩的地方，类似省略后缀的查找规则，冒泡等，这都和 JS 有着类似的机制。看了这篇文章，不知道对你现在 Sass 是否有了一个新的思考。