Sass基本特性

Sass扩展/继承@extend

代码的继承，声明方式：.class;调用方式：@extend 如：

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

编译出来的 CSS:：

.btn, .btn-primary {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

从示例代码可以看出，在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器：

[Sass]占位符 %placeholder

Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能。声明方式：%placeholder;调用方式：@extend;

可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。如：

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码。如：

//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

编译出来的CSS：

/*CSS*/
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

[Sass]混合宏 VS 继承 VS 占位符

a) 混合宏

缺点：编译出来的 CSS不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。

优点：可以传参数。如果代码块中涉及到变量，建议使用混合宏。

b) Sass继承

优点：编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现如：.mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。

缺点：不能传变量参数。

c) 占位符

编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。

占位符和继承的主要区别，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”

[Sass]插值 #{}

1：混合宏中使用插值，插值只能出现在混合宏下属性名内（也就是：的左边），不能出现在属性值内（也就是：右边）。存疑 4-17
2：继承中使用插值似乎可以很好的解决其不能传参的缺陷。那么是不是“继承+占位符+插值” 就是完美搭配组合了呢？

@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

编译出来的CSS：

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

[Sass运算]加法减法

对于携带不同类型的单位时，在 Sass 中计算会报错，单位必须相同。

[Sass运算]乘法

Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例：

.box {
  width:10px * 2px;  
}

编译的时候报“20px*px isn't a valid CSS value.”错误信息。

如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成：

.box {
  width: 10px * 2;
}

编译出来的 CSS:

.box {
  width: 20px;
}

[Sass运算]除法

”/ ”符号被当作除法运算符时有以下几种情况：

•   如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
•   如果数值被圆括号包围。
•   如果数值是另一个数学表达式的一部分。

//SCSS
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;
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }

Sass 的除法运算还有一个情况。在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。如下所示：

.box {
  width: (1000px / 100px);
}

编译出来的CSS如下：

.box {
  width: 10;
}

[Sass运算]字符运算

在 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; }