标签：覆盖 tom red 下划线 footer col 完全 asi ott
一、使用变量
$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后缀可以省略)
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;
}
}
标签：覆盖 tom red 下划线 footer col 完全 asi ott
原文地址：https://www.cnblogs.com/caoxueying2018/p/10472305.html
