sass编译成css
sass sass/style.scss:css/style.css
/* sass sass指令
sass/style.scss sass文件夹下的style.scss文件
css/style.css css文件夹下的style.css文件
*/
自动监控css文件
sass --watch sass:css
/* sass sass文件所在的目录
css css文件所在的目录
*/
sass输出格式
- nested 嵌套
- compact 紧凑
- expanded 扩展
- compressed 压缩
sass --style compact
声明变量
$primary-color: #1269b5;
div.box {
background-color: $primary-color;
}
// 变量可以是多个值 里面也可以包含变量
$primary-border: 1px solid $primary-color;
嵌套
ul {
font-size: 15px;
li {
list-style: none;
}
}
// 嵌套里引用父选择器 &
a {
color: #ff7675;
&:hover {
color: #0984e3;
}
}
嵌套属性
body {
font: {
family: Helvetica, Arial, sans-serif;
size: 15px;
weight: normal;
}
}
.nav {
border: 1px solid #000 {
left: 15px;
bottom: 10px;
};
}
混合
// 创建mixin
@mixin alert {
color: #74b9ff;
background-color: #ff7675;
a {
color: #b2bec3;
}
}
// 使用mixin
.alert-warning {
@include alert;
}
继承
/* 继承 @extend */
.alert {
padding: 15px;
}
.alert a {
color: #b2bec3;
}
.alert-info {
@extend .alert;
background-color: #ff7675;
}
