- 声明变量($name:10px;)
- 计算功能(font-size:10px-2px;)
- 嵌套
#idName {
.className {
color: red;
}
}
- 注释(标准的CSS注释 /* comment */ ,会保留到编译后的文件。
- 单行注释 // comment,只保留在SASS源文件中,编译后被省略。
- 在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。)
- 继承(@extend)
.class1 {
border: 1px solid #ddd;
}
//@extend继承
.class2 {
@extend .class1;
}
- Mixin(@Mixin name{}定义重用样式,可设定参数,@include name;引用)
//@mixin定义CSS代码块
@mixin left {
float: left;
margin-left: 10px;
}
//@include引入代码
.class1 {
@include left;
}
//指定参数和缺省值。
@mixin left($pos ,$value: 10px) {
float: $pos;
margin-left: $value;
}
//include传参
.class1 {
@include left(left, 10px);
}
//复杂样例
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
.class1 {
@include rounded(top, left);
}
- 颜色函数 ( lighten(#cc3, 10%))
SASS提供了一些内置的颜色函数
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
- @import插入文件
@import "path/filename.scss";
- 条件语句、循环语句
//if语句
$value:true !default;
.class1 {
@if $value {
*display: inline;
*zoom:1;
}@else {
/**/
}
}
//循环语句
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
//while语句
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 2em * $i;
}
$i: $i - 2;
}
//each命令,作用与for类似:
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
- 自定义函数(@function name(){})
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
文中实例及参照大多来自SASS文章。