你不知道的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 是否有了一个新的思考。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20190104G08PS500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券