【Sass】Sass预处理器的介绍和使用方法

Sass 是项目中常用的一种 CSS预处理器。虽然一直在项目中应用，但是真正高阶、重要的特性，却一直没有用过。所以，让我们一起重新学习，在项目里用起来。

一、变量

Sass让人们受益的一个重要特性就是它为CSS引入了变量。Sass使用 $ 符号来标识变量。

1、变量声明 $

Sass变量的声明和CSS属性的声明很像。CSS属性的值都可以作为变量值。

$hightlight-color: yellow; //变量声明
color: red; //属性声明

2、变量作用域

变量既可以在CSS规则块内（相当于局部变量）又能在CSS规则块外（相当于全局变量）

$highlight-color: red; //定义在CSS规则块外，整个样式表内都能用
.box{
    $width: 100px; //定义在CSS规则块内，只能在该规则块内用
    width: $width;
    height: 200px;
}
.active{
    color: $highlight-color;
    font-weight: bolder;
}

二、嵌套规则

1、后代选择器（缩进表示层级）

.content{
    font-size: 12px;
    color: black;
    .aside{
        background-color: #ccc;
        font-size: 14px;
        p{
          text-indent: 2em 
        }
    }
}

编译结果：

.content {
  font-size: 12px;
  color: black;
}
.content .aside {
  background-color: #ccc;
  font-size: 14px;
}
.content .aside p {
  text-indent: 2em;
}

2、父选择器的标识符 & （伪类）

article a{
    color: black;
    &:hover{
        color: red;
    }
}

编译结果：

article a {
  color: black;
}
article a:hover {
  color: red;
}

2.1 在父选择器前添加选择器

#content aside {
  color: red;
  body.ie & { color: green }
}

编译结果：

#content aside {
  color: red;
}
body.ie #content aside {
  color: green;
}

这种情况我在项目中遇到的不多，主要用来样式的特殊处理。& 可以指代当前选择器。

 3、群组选择器（用逗号隔开）

#header, #content{
    h1, h2, h3{
        color: black;
    }
}

 编译结果：

#header h1, #header h2, #header h3, #content h1, #content h2, #content h3 {
  color: black;
}

 群组选择器，我觉得用法和css规则基本上一样，但是我们少写很多重复性代码。值得注意的就是群组选择器嵌套生成的css可能会非常大，影响网站速度。

4、子组合选择器和同层选择器（+,>, ~）

.box > div：box类下第一层级div标签

.box + p：box类后紧挨着的p标签

.box ~ .article：box类后同层级所有的article类

article{
    ~ article {font-size: 16px};
    > div {border:1px solid #ccc};
    nav + & {font-size: 14px}  //这种方式确实用的比较少，学起来
}

 编译结果：

article ~ article {
  font-size: 16px;
}
article > div {
  border: 1px solid #ccc;
}
nav + article {
  font-size: 14px;
}

5、属性嵌套

.article{
    color: blue;
    font: {
      size: 20px;
      weight: bold;
    }
 }

编译结果：

.article {
  color: blue;
  font-size: 20px;
  font-weight: bold;
}

还可以如下实现

.article{
    border: 1px solid red {
      left: 0;
      right: 0;
    }
 }

 编译结果：

.article {
  border: 1px solid red;
  border-left: 0;
  border-right: 0;
}

 三、注释

body{
    font-weight: 600; //这句注释不会编译到css文件里
    font-size: 12px; /* 我会被编译到生成的css文件里 */
}

四、导入sass文件

@import "colors.sass" //文件后缀可以省略
@import "colors"

1、局部文件

那些专门为了@import而编写的sass文件（@mixin或者$var）编译时，并不希望生成对应独立的文件。可以用 _mixin.sass 方式来命名。以下划线开头来命名的文件。

@import "_mixin.sass";
@import "mixin" //可以省略下划线和文件后缀名

 2、默认变量值

$mid-width: 200px !default; //默认值是 200px

如果在@import 后重新声明了 $mid-width 变量的值，结果便是新声明的值，否则就是默认值 200px 。

 3、嵌套导入局部文件

_blue-theme.scss
.aside{
    background: blue;
}
//嵌套导入
.content{
    @import 'blue-theme' //局部文件内的变量等只在content内有效
}

4、原生css文件导入的几种方式

原生css@import的弊端是，只有当代码执行到@import才会去下载对应css文件，加载会比较慢。sass@import 在生成css文件时就会把相应文件导入进来，形成一个css文件，无需额外的下载请求，加载效率自然会高一些。

第一种：因为sass完全兼容css语法，可以直接将css文件的后缀，改成.scss，然后导入。

第二种：直接导入 @import 'reset.css' css文件

第三种：@import url(链接/css文件)

第二、第三种方式都会增加额外的资源下载请求。

五、混合器

混合器和css类作用相似。类是在html文件中应用更具有语义化含义例如.content、.notice。选择器是用在样式表中，是展示型的描述，用来描述展示效果的。

@mixin link-colors{ //定义选择器
    color: balck;
    &:hover{color: yellow;}
}
.nav a{
    @include link-colors //引用选择器
}

 1、给混合器传参数

@mixin link-colors($normal, $hover){ //带有参数的选择器
    color: $normal;
    &:hover{color: $hover;} 
}
//引用选择器的两种方式
//第一种
.nav a{
    @include link-colors(black, yellow)
}
//第二种
.nav a{
    @include link-colors($normal: black, $hover: yellow)
}

2、默认参数值

@mixin link-colors($normal, $hover: $normal){ //带有参数的选择器
    color: $normal;
    &:hover{
        color: $hover;
    }
}
//传一个参数展示和hover都是红色
.nav a{
    @include link-colors(red)
}
//传两个参数展示红色，hover蓝色
.nav a{
    @include link-colors(red, blue)
}

六、继承

选择器继承是说一个选择器可以继承另一个选择的所有样式，通过 @extend 实现

.box {
  border: 1px solid black;
  padding: 20px;
  font-size: 16px;
  line-height: 1.5;
}
.box-header {
  @extend .box; //继承样式
  background-color: #333;
  color: #fff;
}

 box-header 将会继承样式表中，任何位置处 box 定义的所有样式。继承比@mixin性能更高。需要注意的一点是，继承不单单是用css样式替换@extend处的代码，继承会存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器的权重不变。