CSS预处理器

CSS预处理器是什么？
CSS预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。
使用CSS预处理器的好处
可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
Sass是什么？
Sass是采用 Ruby 语言编写的一款 CSS 预处理语言，它能用来清晰地、结构化地描述文件样式，有着比普通CSS更加强大的功能。Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。
Sass安装
安装ruby，安装sass，gem install sass。
[Sass]命令编译
单文件编译：
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
多文件编译：
sass sass/:css/
上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。
开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css。

声明变量

普通变量

$fontSize: 12px;
body{
    font-size:$fontSize;
}

编译后的css代码：

body{
    font-size:12px;
}

默认变量
可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

Sass嵌套
选择器嵌套
假设我们有一段这样的结构：

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想选中 header 中的 a 标签，在写 CSS 会这样写：

nav a {
  color:red;
}

header nav a {
  color:green;
}

在 Sass 中，就可以使用选择器的嵌套来实现：

nav {
  a {
    color: red;
    header & {
      color:green;
    }
  }  
}

属性嵌套
css中：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}
Sass中：
.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

伪类嵌套

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

编译出来的css如下：

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

混合宏
声明混合宏
不带参数混合宏：

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

带参数混合宏：

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

复杂的混合宏：

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

调用混合宏

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

button {
    @include border-radius;
}

编译出来的css

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}