SCSS理解

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;
}

···