更强大的CSS——SCSS

SCSS就是一个CSS预处理器，它简化了许多原始CSS中的写法，同时已经封装好了许多强大的功能可以让开发者直接使用。

注：SCSS和Sass本质上是一样的，SCSS属于Sass的升级版，两种写法都可以接受。

变量

SCSS中的变量以$开头。

$border-color:#aaa; //声明变量 
.container 
{ 
    $border-width:1px; 
    border:$border-width solid $border-color; //使用变量 
}

上述例子中定义了两个变量，其中$border-color在大括号之外称为全局变量，顾名思义任何地方都可以使用，$border-width是在.container之内声明的，是一个局部变量，只有.container内部才能使用。

嵌套规则

SCSS中，你可以像俄罗斯套娃那样在规则块中嵌套规则块。SCSS在输出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 }

在嵌套中，使用&作为父元素的引用，在嵌套中直接使用伪类是无效的，需要在前面加上&作为前缀。

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

在嵌套中，你可以使用CSS中任何选择器，包括群组选择器，子代选择器等等，这些写法都是可以得到支持的。

导入SCSS文件

SCSS中的@import命令不同于CSS，SCSS针对导入进行了优化，可以放心使用该功能。

@import App2.scss; //引入另一个SCSS文件
@import 'App.css'; //在SCSS中使用原生的import

混合器（函数）

使用@mixin声明一个函数，当我们有重复的代码片段时，可以使用该指令将他们提取出来进行复用，使用@mixin声明的函数也可以进行传参，并设置默认值。

@mixin get-border-radius($border-radius:5px,$color:red){ 
    -moz-border-radius: $border-radius; 
    -webkit-border-radius: $border-radius; 
    border-radius: $border-radius; 
    color:$color; 
}

使用@include可以随时使用定义好的函数

.container {
    @include get-border-radius; //不传参则为默认值5px 
    @include get-border-radius(10px,blue); //传参
}

继承

使用%定义一个被继承的样式，类似静态语言中的抽象类，他本身不起作用，只用于被其他人继承。

%border-style { 
    border:1px solid #aaa; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

使用@extend即可完成继承

.container { 
    @extend %border-style; 
}