sass

SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

不管是 Sass 的语法格式还是 SCSS 的语法格式，他们的功能都是一样的，不同的是其书写格式和文件扩展名不同

“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）。

• Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) 

什么时候声明变量？

1. 该值至少重复出现了两次；
2. 该值至少可能会被更新一次；
3. 该值所有的表现都与变量有关（非巧合）。

混合宏-调用混合宏

//welcome to imooc learn Sass
@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}


button {
    @include border-radius;
}

混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时

.box {  -webkit-border-radius: 3px;  border-radius: 3px;  margin-bottom: 5px;}.btn {  -webkit-border-radius: 3px;  border-radius: 3px;}

并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。

在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：

//SCSS.btn {  border: 1px solid #ccc;  padding: 6px 10px;  font-size: 14px;}.btn-primary {  background-color: #f36;  color: #fff;  @extend .btn;}.btn-second {  background-color: orange;  color: #fff;  @extend .btn;}

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

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

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn, .btn-primary {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。

混合宏 VS 继承 VS 占位符

简单来说就是混合宏产生多行，但是可以传参。继承不会产生多行，但不能传参（有一个基类已在文件中存在，那么建议使用 Sass 的继承），经常与占位符一起用

[Sass]插值#{}

用于继承，不能在宏中用

%updated-status {    margin-top: 20px;    background: #F00;}.selected-status {    font-weight: bold;}$flag: "status";.navigation {    @extend %updated-#{$flag};    @extend .selected-#{$flag};}

数据类型

•  数字: 如，1、 2、 13、 10px；
•  字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
•  颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
•  布尔型：如，true、 false；
•  空值：如，null；
•  值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

在 Sass 中可以通过加法符号“+”来对字符串进行连接。