查看sass版本: sass -v / sass --version
文件后缀:
scss: √, 编写方式更类似于css;
sass: 不需要花括号,也不需要标点
引用变量: div { color: $color }
嵌套规则:
content {
$width;
h3 {
color: $color;
}
p {
text-indent: 2em;
}
a {
color: #000;
&:hover {
color: #c00;
}
}
}
&代表父选择器标识
定义混合器:
@mixin 混合器名称{
//规则:
border: #000 1px solid;
margin-left: 100px;
100px;
height: 100px;
}
引入混合器:
div {
background: red;
@include 混合器名称;
}
编译sass:
sass --watch 要监听的文件夹&文件名称:输出的文件夹&文件名称
sass --watch index:style 监控index文件夹下所有的scss文件并且声称css文件到style文件夹中.
sass --watch scss/index.scc:style/abc.css 监听scss下面index.scss的变动到style文件夹中并且生成abc.css
sass --watch index:style --style expanded
--style expanded: 编译样式:
expanded / compact / nested / compressed