介绍
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";
}
