格式化风格
nested 缩进嵌套css (默认的)
expanded 没有缩进。扩展的css
compact 简洁格式的css
compressed 压缩之后的css
变量
$blue: #fff;
使用#{} 嵌套字符串
$side:left;
.test{
border-#{$side}-radius:5px
}
计算功能
使用 * / + -
进行计算
嵌套
原来代理
div h1{
color:red;
}
// scss 可以这样
div{
h1{
color:red;
}
}
在嵌套里面,可以使用&引用父元素,比如 a:hover的写法
a{
&:hover{
color: red;
}
}
继承
比如已经有了class1 了
.class1{
}
这边class2可以继承 class1的
.class2{
@extend .class1;
}
mixin
对于mixin有点像 c语言里面的宏,可以重用的代码块
使用@mixin指令,定义一个代码块
@mixin left{
float:left;
margin-left:10px
}
// 也可以指定参数和缺省值
@mixin left($value:10px){
float:left;
margin-left:$value;
}
颜色函数
sass 提供一些内置的颜色函数
插入文件
@import 方法
@if 条件判断
@else 命令
@if 1 + 1 == 2 { border: 1px solid; }
循环语句 for / while 语句 each 语句
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
自定义函数
@funcion double($n){
@return $n * 2;
}