Sass

CSS不是一种编程语言，它没有变量，也没有条件语句，只是一行行单纯的描述。

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

插入文件：

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

@import "path/filename.scss";

注释：

Sass有两种注释风格：

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

   /*! 
   　重要注释！
   */
   

2. 单行注释//comment，只保留在Sass源文件中，编译后被省略。

变量：

Sass变量使用$符号开头，用于存储一些信息，可以重复使用。Sass变量可以存储：字符串、数字、颜色值、布尔值、列表、null值。$variablename: value;

$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是可以重用的代码块。

使用@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);
}