SCSS是一款强化CSS的辅助工具，它在语法的基础上增加了变量，嵌套，混合，导入等高级功能
SCSS嵌套功能
SCSS允许将一套CSS样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。父选择器中用&表示当前父选择器。同时支持属性嵌套，例如字体嵌套
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
SCSS变量
SCSS定义变量的格式是$变量名:变量内容
$width:12px;
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用。可以将局部变量转换成全局变量可以添加!global声明
#main {
$width: 5em !global;
width: $width;
}
SCSS的包括6中数据类型
- 数字 1，2，3 10px
- 字符串 有引号字符串和无引号字符串
- 颜色 blue
- 布尔值 true false
- 空值 null
- 数组 用空格或者逗号分隔符号
- map
注意
字符串可以使用插值(${})
运算
SCSS支持数字的加减乘除，取整等运算。关系运算也可以用于数字运算
引入
SCSS扩展了@important的功能.@important寻找SCSS文件并将其导入，但是以下情况@import仅仅作为普通的scss文件，不会导入Scss文件
- 文件扩展名.css
- 文件名以HTTP：//开头
- 文件名是url（）
- @import 包括media queries
如果@important在嵌套内导入，那么就是把导入的内容添加到父嵌套中
@extend
div class="error seriousError">
Oh no! You've been hacked!
</div>
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
//实际是
.error，.seriousError {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
