CSS预处理器

  CSS预处理器是用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。
  SCSS其语法完全兼容CSS3，并且继承了SCSS的强大功能。由于SCSS是CSS的扩展，因此所有在CSS中正常工作的代码也能在SCSS中正常工作。比CSS多出好多功能如变量、嵌套、混合(Mixin)、继承等。

SCSS使用

使用变量

变量声明

$nav-color: #F90
nav {
   $width: 100px;
   width: $width;
   color: $nav-color
}

变量声明是用$符号。

变量引用

$highLight-color: #F90;
$highLight-border: 1px solid $highLight-color;
.selected {
    border: $highLight-border
}
// 编译后
.selected {
    border: 1px solid  #F90;
}

嵌套CSS规则

#content {
   article {
     h1 { color: #333 }
     p { margin-bottom: 1.4em }
   }
   aside { background-color: #EEE }
}
// 编译后
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

大多数情况下这种简单的嵌套都没问题，但是有些场景下不行，比如你想要在嵌套的选择器里边立刻应用一个类似于:hover的伪类。为了解决这种以及其他情况，scss提供了一个特殊结构&。

父选择器的标识符&

article a {
   color: blue;
   &:hover { color: red }
}
// 编译后
article a { color: blue }
article a:hover { color: red }

当使用&时表示这时候不用后代选择器拼接。

群组选择器的嵌套

.container h1, .container h2, .container h3 { margin-bottom: .8em }

上述css样式.container h1, .container h2, .container h3为群组选择器。可以写成

.container {
    h1, h2, h3 { margin-bottom: .8em }
}

nav, aside {
   a { color: blue }
}
// 编译后
nav a, aside a { color: blue }

子组合选择器和同层组合选择器：>、+和~

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
// 编译后
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

嵌套属性

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
// 编译后
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

导入SCSS文件

  css有一个特别不常用的特性，即@import规则，它允许在一个css文件中导入其他css文件。在引入css文件时，用@import url()，在引入scss文件时，用@import。

嵌套导入

  跟原生的css不同，scss允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。例如，有一个_blue-theme.scss的局部文件，内容如下

aside {
   background: blue;
   color: #fff;;
}

然后把它导入到一个css规则内，如下

.blue-part { @import 'blue-theme' }
// 生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-part {
  aside {
    background: blue;
    color: #fff;
  }
}

原生的css导入

  不能用scss的@import直接导入一个原始的css文件，需要将原始的css文件改名为.scss后缀，即可直接导入了，因为scss的语法完全兼容css。

混合器

  为了解决大段的重用样式的代码，可以通过混合器来实现，混合器使用@mixin标识符定义，这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。例如：

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

然后就可以在你的样式表中通过@include来使用这个混合器，例

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
//scss最终生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

给混合器传参

  可以通过在引入混合器时给混合器传参，来定制混合器生成的精确样式。这样方式跟JavaScript的Function很像：

@mixin link-colors ($normal, $hover, $visited) {
    color: $normal;
    &:hover { color: $hover ;}
    &:visited { color: $visited; }
}

当混合器被@include时，你可以把它当作一个css函数来传参。

a {
    @include link-colors(blue, red, green)
}
// scss最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

当你@include混合器时，有时候可能很难区分每个参数的意思，参数之间是一个什么样的顺序。为了解决这个问题，scss允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：

a {
    @include link-colors ($normal: blue, $visited: green, $hover: red)
}

  尽管给混合器加参数来实现定制很好，但是有时有些参数我们没有定制的需要，这时候也需要赋值一个变量就变成很痛苦的事情了。所以scss允许混合器声明时给参数赋默认值。

默认参数值

  为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。

@mixin link-colors( $normal, $hover: $normal, $visited: $normal )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
    @include link-colors(red);
}
// 编译后
a { color: red; }
a:hover { color: red; }
a:visited { color: red; }

使用选择器继承来精简css

  使用scss的时候，最后一个减少重复的主要特征就是选择器继承。选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，如下：

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
// 编译后
.seriousError {
   border: 1px solid red;
  background-color: #fdd;
  border-width: 3px;
}

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

何时使用混合器、继承

混合器：当你的工程中需要重复使用大量相同的样式时，单单使用变量是无法解决的，这时可以使用混合器（标示符为@mixin）来使用重复的样式。
继承：一般继承建立在语义化的基础上，当一个类明显属于另一个类时，使用继承再合适不过了。