介绍

SASS是最早的css预处理语言之一。
为了适应编程风格的需求，sass在编程风格上做了一些修改，现在称之为SCSS。
SCSS增加了一些新的功能，增强了对css3的支持，其语法完全兼容CSS3，并且继承了sass的强大功能。
任何标准的css3样式表都是具有相同语义的有效的scss文件。另外，SCSS还能识别大部分css hacks和特定于浏览器的语法，例如:古老的IE filter。由于SCSS是CSS的扩展，因此，所有在css中工作的代码也能在scss中正常工作。
现在学习scss完全没有必要关注以前sass的规则。

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
// 编译过后
nav {
  width: 100px;
  color: #F90;
}

变量

变量的声明

使用$符号可以标识一个变量，代码如下:

$width

$width: 100px;

$basic-border: 1px solid black;

以前都是用！来标识一个变量，之所以改成$符号，是因为比较美观- -！

变量的引用

$highlight-color: red;
.selected {
  border: 1px solid $highlight-color;
}

/* 编译过后 */
.selected {
  border: 1px solid red;
}

• 当然在声明变量的时候，也可以引用其他的变量

$highlight-color: red;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

/* 编译过后 */
.selected {
  border: 1px solid red;
}

• 在SCSS中，变量分隔符-跟_其实是等同的，如：

$ground-color: red;
.selected{
  border: $ground_color;
}

/* 编译过后 */
.selected{
  border: red;
}

作用域

SCSS中，变量具有两种作用域类型：
（1）.全局作用域。
（2）.局部作用域。
默认情况下，定义在选择器之内的变量为局部变量，定义在选择器之外的为全局变量。

$bg-color: green;
## 正常 $bg-color 是一个全局变量，所以在下面可以应用到
div{
  $border-width:5px;
  color:$bg-color;
  border:$border-width solid red;
}
## 会报错，$border-width属于局部变量，而p中是引用不到的
p{
  border:$border-width solid red;
}

• 全局变量和局部变量也可以是同名的，不过局部变量会覆盖全局变量,如下：

$text-color:red;
@mixin button-style {
  $text-color: lime;
  color: $text-color;
}
@mixin link-style {
  $text-color: black;
  color: $text-color;
}
button {
  @include button-style;
}
a {
  @include link-style;
}
.wrap {
  background: $text-color;
}

/* 编译过后 */
button {
  color: lime; 
}
a {
  color: black; 
}
.wrap {
  background: red; 
}

• 当然你也可以用!global关键字来改变变量的作用域

@mixin button-style {
  $btn-bg-color: lightblue !global;
  color: $btn-bg-color;
}
button {
  @include button-style;
}
.wrap {
  background: $btn-bg-color;
}

/* 编译过后 */
button {
  color: lightblue; 
}
.wrap {
  background: lightblue; 
}

默认值

在变量赋值之前， 利用!default为变量指定默认值。
也就是说，如果在此之前变量已经赋值，那就不使用默认值，如果没有赋值，则使用默认值。

$content: "hi" !default;
.main {
  content: $content;
}

## 编译之后
.main {
  content: "hi"; 
}

$content:"hello";
$content: "hi" !default;
.main {
  content: $content;
}

## 编译之后
.main {
  content: "hello"; 
}