安卓button圆角设置不显示_你不知道的Sass

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

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

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

一 关于@mixin

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

@mixin dot($color, $diameter) {

 display: inline-block;

 width: $diameter;

 height: $diameter;

 border-radius: 50%;

 background: $color;

}

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

@mixin border-radius{

 border-radius: 3px;

}

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

.box {

 @include border-radius;

 margin-bottom: 5px;

}

.btn {

 @include border-radius;

}

查看编译的结果：

.box {

 border-radius: 3px;

 margin-bottom: 5px;

}

.btn {

 border-radius: 3px;

}

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

.btn,box{

 border-radius: 3px;

}

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

@mixin box-shadow($shadow...) {

 box-shadow: $shadow;

}

.shadow1{

@include box-shadow(0 0 5px rgba(0,0,0,.3));

}    

.shadow2 {

 @include box-shadow(0 0 5px rgba(0,0,0,.3), inset 0 0 3px rgba(255,255,255,.5));

}

二 %placeholder

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

%mt5 {

 margin-top: 5px;

}

%pt5{

 padding-top: 5px;

}

使用 @extend 调用：

.btn {

 @extend %mt5;

 @extend %pt5;

}

.block {

 @extend %mt5;

 span {

   @extend %pt5;

 }

}

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

.btn, .block {

 margin-top: 5px;

}

.btn, .block span {

 padding-top: 5px;

}

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

三 .className VS %placeHolder

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

.button {

 display: block;

 padding: 10px;

 background: green;    

}

.sidebar .signup .button {

 margin-top: 20px;

}

.registrantion, .remember-password {

 .button {

     margin-bottom: 33px;

 }

}

.edit-account .delete-area .button {

 background-color: red;

 color: white;

}

Sass 支持继承一个样式类：

.article a {

 @extend .button;

}

但是查看编译的结果：

.button, .article a {

 display: block;

 padding: 10px;

 background: green;

}

.sidebar .signup .button, .sidebar .signup .article a, .article .sidebar .signup a {

 margin-top: 20px;

}

.registrantion .button, .registrantion .article a, .article .registrantion a, .remember-password .button, .remember-password .article a, .article .remember-password a {

 margin-bottom: 33px;

}

.edit-account .delete-area .button, .edit-account .delete-area .article a, .article .edit-account .delete-area a {

 background-color: red;

 color: white;

}

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

.button, .article a {

 display: block;

 padding: 10px;

 background: green;

}

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

.button, %button {

 display: block;

 padding: 10px;

 background: green;

}

.sidebar .signup .button {

 margin-top: 20px;

}

.registrantion, .remember-password {

 .button {

   margin-bottom: 33px;

 }

}

.edit-account .delete-area .button {

 background-color: red;

 color: white;

}

.article a {

 @extend %button;

}

查看编译的结果：

.button, .article a {

 display: block;

 padding: 10px;

 background: green;

}

.sidebar .signup .button {

 margin-top: 20px;

}

.registrantion .button, .remember-password .button {

 margin-bottom: 33px;

}

.edit-account .delete-area .button {

 background-color: red;

 color: white;

}

小结

四 ES6特性

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

1、{}插值

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

$attr: background; p {

 $attr-color: blue;

}

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

p {

 #{$attr}-color: blue;

}

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

p {

 $font-size: 12px;

 $line-height: 30px;

 font: $font-size/$line-height sans-serif;

}

编译后：

p {

   font: 0.4;

}

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

p {

 $font-size: 12px;

 $line-height: 30px;

 font: #{$font-size}/#{$line-height} sans-serif;

}

2、属性遍历@each in

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

$iconMap: (

 unfinish: 'e0c2',

 consult: 'f162',

 filter: 'f45a'

);

@each $iconName, $content in $iconMap {

 .i-ico-#{$iconName}::before{

   content: $content;

 }

}

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