16.sass占位符%

用占位符声明的代码，如果不被@extend调用就不会被编译。

%mt5 {

  margin-top: 5px;

}

%pt5{

  padding-top: 5px;

}

.btn {

  color:red;

}

编译后：

.btn {

    color:red;

}//%占位符声明的代码没有被编译产生css代码

使用@extend调用：

%mt5 {

  margin-top: 5px;

}

%pt5{

  padding-top: 5px;

}

.btn {

  @extend %mt5;//使用@extend调用占位符代码

  @extend %pt5;

}

.block {

  @extend %mt5;

  span {

    @extend %pt5;

  }

}

编译后的css代码：

.btn, .block {

  margin-top: 5px;

}

.btn, .block span {

  padding-top: 5px;

}

通过@extend调用的占位符，编译出来的代码会将相同的代码合并在一起，代码变得十分简洁。

17.sass插值

$properties: (margin, padding);

@mixin set-value($side, $value) {

    @each $prop in $properties {//对每个在$properties中的$prop,即$properties中的margin、padding

        #{$prop}-#{$side}: $value;//$prop连接参数$side，值为参数$value

    }

}

.login-box {

    @include set-value(top, 14px);//调用混合宏

}

编译出来的css：

.login-box {

  margin-top: 14px;

  padding-top: 14px;

}

不可以：

$margin-big: 40px;

$margin-medium: 20px;

$margin-small: 12px;

@mixin set-value($size) {

    margin-top: $margin-#{$size};

}

.login-box {

    @include set-value(big);

}

也不可以：

@mixin updated-status {

    margin-top: 20px;

    background: #F00;

}

$flag: "status";

.navigation {

    @include updated-#{$flag};

}

可以在使用@extend时使用插值：

%updated-status {

    margin-top: 20px;

    background: #F00;

}

.selected-status {

    font-weight: bold;

}

$flag: "status";

.navigation {

    @extend %updated-#{$flag};

    @extend .selected-#{$flag};

}

18. sass 注释

• /*注释内容*/ :会在编译出来的css文件中显示
• //注释内容 ：不会在编译出来的css文件中显示

//定义一个占位符

%mt5 {

  margin-top: 5px;

}

/*调用一个占位符*/

.box {

  @extend %mt5;

}

编译出来的css：

.box {

  margin-top: 5px;

}

/*调用一个占位符*/

19. sass运算

19.1 sass 加法/减法

变量或属性中都可以做加法/减法运算

.box {

  width: 20px + 8in;

  height:20px - 5px;

}

编译出来的css：

.box {

  width: 788px;

  height:25px;

}

不用类型的单位做加法/减法会报错：

.box {

  width: 20px + 1em;//不同类型单位不能做加法

}

19.2 sass 乘法

这样子会有问题：

.box {

  width:10px * 2px;

}

应该这样子：

.box {

  width: 10px * 2;

}

编译出来的css：

.box {

  width: 20px;

}

• 同加法减法一样，不同类型单位做乘法也会报错。

19.3 sass除法

• 如果除式中没有变量或者不是在一个数学表达式中（有加法减法等），就要将除式运算用小括号括起来，否则“/”不会被当做除号运算。

p {

  font: 10px/8px;             // 纯 CSS，不是除法运算

  $width: 1000px;

  width: $width/2;            // 使用了变量，是除法运算

  width: round(1.5)/2;        // 使用了函数，是除法运算

  height: (500px/2);          // 使用了圆括号，是除法运算

  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算

}

编译出来的css：

p {

  font: 10px/8px;//这种是无意义的css

  width: 500px;

  height: 250px;

  margin-left: 9px;

 }

• 除法中相同单位相除不会报错，会产生一个无单位的值：

.box {

  width: (1000px / 100px);

}

编译出来的css：

.box {

  width: 10;

}

19.4 sass 变量计算

$content-width: 720px;

$sidebar-width: 220px;

$gutter: 20px;

.container {

  width: $content-width + $sidebar-width + $gutter;

}

编译出来的css：

.container {

  width: 960px;

}

19.5 sass数字运算

.box {

  width: ((220px + 720px) - 11 * 20 ) / 12 ;

}

编译出来的css：

.box {

  width: 60px;

}

19.6 sass颜色运算

所有算术运算都支持颜色值，并且是分段计算的。

p {

  color: #010203 + #040506;

}

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：

p {

  color: #050709;

}

• 数字和颜色一起运算：

p {

  color: #010203 * 2;

}

计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成为：

p {

  color: #020406;

}

19.7 sass 字符运算

• 用“+”对字符串进行连接：

$content: "Hello" + "" + "Sass!";

.box:before {

  content: " #{$content} ";

}

编译出来的css：

.box:before {

  content: " Hello Sass! ";

}

• 可以使用“+”直接连接字符：

div {

  cursor: e + -resize;

}

编译出来的css：

div {

  cursor: e-resize;

}

• 有引号的字符串和没有引号的字符串相加，看哪个在“+”号的左边，如果有引号的在左边，结果为有引号的；如果没有引号的在左边，结果为没有引号的：

p:before {

  content: "Foo " + Bar;

  font-family: sans- + "serif";

}

编译出来的css：

p:before {

  content: "Foo Bar";

  font-family: sans-serif; }