### Sass 1. 提升CSS识别度，减少CSS代码编写量，提高CSS开发效率 ### 变量声明 1. $语法开头：$custom-red:red $custom-yellow:yellow 2. 变量全局声明、变量局部声明 3. 变量声明时也可以引用其它变量：$custom-color:$custom-red ### 变量引用 1. css属性值直接使用变量名 ### & 符号 1. &符号是引用的父级选择器，&符号前后都可以使用选择器 ### 导入SCSS样式文件 1. @import 'custom.scss' || @import 'custom'，后缀可以省略 2. @import '_custom.scss' 当文件名以下划线开头时，不会生成同名CSS文件 3. @import 'origin.css' 导入原生CSS时，可以将文件名改为.scss结尾的文件 4. @import 'http://geoglo.css' 导入链接地址 ### 静默注释 1. //这是注释，这类注释SCSS在生成CSS的时候不会被包进入文件 2. /*这是注释*/，这类注释SCSS在生成CSS的时候会被包进入文件 ### 混合/插入 1. @mixin custom { color: red; border: 1px solid skyblue } 2. @include .class { @include custom } 3. 混合中也可以使用& 标签形式的语法 @mixin custom { &:hover { color: gray } color: red; border: 1px solid skyblue } 4. 混合器传参并给定默认值 @mixin link-colors($normal, $hover, $visited: orange) { color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } } ### 继承 1. @extend 可类继承、可标签继承 .custom { @extend .class; } ### 函数 1. @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } ### 运算符 1. 加减乘除