一、使用变量
- 变量声明、变量引用
$highlight-color: #f90
.selected{ ???border: 1px solid $highlight-color;}// 编译后/* .selected{ ???border: 1px solid #f90;} */- 变量名用中划线或下划线分隔皆可。
即$highlight-color和$highlight_color皆可。变量声明中用中划线，变量引用中用下划线也可以如常引用。
二、嵌套CSS规则
SCSS写法：（像俄罗斯套娃一样，层层嵌套）
#content { ?article { ???h1 { color: #333 } ???p { margin-bottom: 1.4em } ?} ?aside { background-color: #EEE }}编译后：
#content article h1 { color: #333 }#content article p { margin-bottom: 1.4em }#content aside { background-color: #EEE }- 父选择器的标识符&
article a { ?color: blue; ?&:hover { color: red }
}编译后
article a { color: blue }article a:hover { color: red }- 群组选择器的嵌套
.container { ?h1, h2, h3 {margin-bottom: .8em}}编译后：
.container h1, .container h2, .container h3 { margin-bottom: .8em }- 子选择器和同层组合选择器：>、+和~
article { ?~ article { border-top: 1px dashed #ccc } ?> section { background: #eee } ?dl > { ???dt { color: #333 } ???dd { color: #555 } ?} ?nav + & { margin-top: 0 }}编译后：
article ~ article { border-top: 1px dashed #ccc }article > footer { background: #eee }article dl > dt { color: #333 }article dl > dd { color: #555 }nav + article { margin-top: 0 }- 属性嵌套
nav { ?border: 1px solid #ccc { ?left: 0px; ?right: 0px; ?}}这比下边这种同等样式的写法要好：
nav { ?border: 1px solid #ccc; ?border-left: 0px; ?border-right: 0px;}三、导入SASS文件
使用@import规则导入，如：@import "colors" (colors.scss的.scss后缀可以省略)
- 使用SASS部分文件：你想导入
themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import"themes/night-sky"; - 默认变量值：一般情况下，反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值。
- 嵌套导入：
.blue-theme {@import "blue-theme"}//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。.blue-theme { ?aside { ???background: blue; ???color: #fff; ?}}SCSS
原文地址：https://www.cnblogs.com/caoxueying2018/p/10472305.html