Sass教程
1.变量
$bg:pink;
.header{background:$bg};
$place:top;
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
.header{
margin-#{$place}:20px;
}
2.计算功能
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3.嵌套
div h{
color:red;
}
可以写成
div {
h{
color:red;
}
}
4.代码重用
4.1 继承
SASS允许一个选择器，继承另一个选择器。比如，现有class1：
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
4.2 Mixin
是可以重用的代码块
@mixin left {
float: left;
margin-left: 10px;
}
div {
@include left;
}
mixin的强大之处，在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
div {
@include left(20px);
}
//可以传递多个参数哦
@mixin wh($w:100px,$h:100px){
width:$w;
height:$h;
}
.header{
@include wh;
background:pink;
}
.footer{
@include wh(200px,200px);
background: blue;
}
下面是一个mixin的实例，用来生成浏览器前缀。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
4.4 插入文件
@import命令，用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
@import "foo.css";
