CSS 预处理器 Sass

CSS 不是一种编程语言，它没有变量，也没有条件语句，只是一行行单纯的描述。CSS 语法本身不够强大，导致重复编写一些代码，无法实现复用，而且代码也不方便维护。

CSS 预处理器是一种专门的编程语言，用来为 CSS 增加一些编程特性。它的基本思想是，用一种专门的编程语言进行网页样式设计，然后再编译成正常的 CSS 文件。

Sass 是一种 CSS 预处理器。文件后缀为 .scss。Sass 文件里面可以直接使用 CSS 语法。

Less 和 Sass 的主要区别就是它们的实现方式。Less 是基于JavaScript，是在客户端处理的；Sass 是基于 Ruby，是在服务端处理的。

安装 Sass：

浏览器并不支持 Sass 代码，因此必须先将 Sass 文件预先进行处理，转换为 CSS 代码。

1. 安装：npm install -g sass；
2. 创建 test.scss 文件，使用 sass test.scss test.css 命令即可将 test.scss 文件转换的 css 代码保存在 test.css 文件中。

可以让 Sass 监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

sass --watch test.scss:test.css`

Sass 提供四个编译风格的选项：nested（嵌套缩进的 CSS 代码，是默认值）、expanded（没有缩进、扩展的 CSS 代码）、compact（简洁格式的CSS代码）、compressed（压缩后的 CSS 代码）。

// 生产环境中，一般使用最后一个选项
sass --style compressed test.sass test.css

Sass 语法：

导入文件：

@import 命令，用来导入外部文件。

@import "path/filename.scss";

注释：

Sass 有两种注释风格：

1. 单行注释 //comment，只保留在 Sass 源文件中，编译后被省略。
2. 多行注释 /*comment*/，会保留到编译后的文件中。
   在 /* 后面加一个感叹号，表示这是重要注释。即使是压缩模式编译，也会保留这行注释，通常可用于声明版权信息。

   /*! 
   　重要注释！
   */
   

变量：

Sass 变量使用 $ 符号开头，用于存储一些信息，可以重复使用。

$blue: #1875e7;　
div {
　color : $blue;
}

Sass 变量的作用域只能在当前的层级上有效果。

$myColor: red;
h1 {
  $myColor: green;   // 局部作用域，只在 h1 里头有用
  color: $myColor;
}
p {
  color: $myColor;
}

//转为CSS代码
h1 {
  color: green;
}
p {
  color: red;
}

可以使用 !global 关键字来设置变量是全局的。

$myColor: red;
h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}
p {
  color: $myColor;
}

//转为CSS代码
h1 {
  color: green;
}
p {
  color: green;
}

如果变量需要镶嵌在字符串之中，必须写在 #{} 之中。

$side: left;
.rounded {
　　border-#{$side}-radius: 5px;
}

嵌套：

Sass 允许选择器嵌套。

div {
　　hi {
　　　　color:red;
　　}
}

// 转为 CSS 代码
div h1 {
　  color : red;
}

在嵌套的代码块内部，可以使用父选择器 &。& 必须出现在选择器的开头位置，也就是作为选择器的第一个字符，但可以跟随后缀，将被添加到父选择的后面。

a {
　　&:hover { color: #ffb3ff; }
}
// 转为 CSS 代码
a:hover{
	color: #ffb3ff; 
}

.main {
  &-sidebar { border: 1px solid; }
}
// 转为 CSS 代码
.main-sidebar{
	border: 1px solid; 
}

属性也可以嵌套。

// border 后面必须加上冒号
p {
　border: {
　	 style: solid;
 	  width: 1px;
　　  color: red;
　}
}

//转为 CSS 代码
p {
	border-style: solid;
	border-width: 1px;
　  border-color : red;
}

计算功能：

Sass 允许在代码中使用算式。

body {
　　margin: (14px/2);
　　top: 50px + 100px;
　　right: $var * 10%;
}

条件语句：

@if 可以用来判断，配套的还有 @else、@else if 命令。

@mixin blockOrHidden($boolean:true) {
    @if $boolean {
        display: block; 
    } @else { 
        display: none; 
    }
}
.block { 
    @include blockOrHidden;
}
.hidden{ 
    @include blockOrHidden(false);
}

循环语句：

Sass支持 @for 循环：

@for $i from 1 to 10 {
　　.border-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}

自定义函数：

Sass 允许用户使用 @function 自定义函数：

@function double($n) {
　　@return $n * 2;
}
#sidebar {
　　width: double(5px);
}

继承：

Sass 允许一个选择器，继承另一个选择器。如果一个样式与另外一个样式几乎相同，只有少量的区别，使用 @extend 就显得很有用。

.class1 {
　　border: 1px solid #ddd;
}

//class2 要继承 class1，就要使用 @extend 命令
.class2 {
　　@extend .class1;
　　font-size:120%;
}

混合：

混合是可以重用的代码块，允许定义一组样式属性，并在需要的地方重用它们。

使用 @mixin，定义一个代码块。

@mixin left {
　　float: left;
　　margin-left: 10px;　　
}

使用 @include 命令，调用这个 mixin。

div {
　@include left;
}

mixin 可以指定参数和缺省值。

@mixin left($value: 10px) {
　　float: left;
　  margin-right: $value;
}
div {
　　@include left(20px);
}