CSS的扩展less和sass
less和sass的目的是为了更加简化css，但是还是需要css来为网页添加样式！
less
变量
@color1: #5B83AD;
@color2: @color1-#333;
div{
color: @color2;
}
带参数混合
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
div{
.border-radius(4px);
}
这样的好处在于，之前要重复写很多代码的元素，现在只要进行调用
.border-radius (@radius) 就可以了，避免了重复写兼容性的问题。
多参数混合
多个参数可以使用分号或者逗号分隔，推荐使用分号分隔，因为逗号有两重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。
.wrap (@w;@h) {
white:@w;
hight:@h;
}
div{
.wrap(100px;100px);
}
sass有两种后缀名文件：
一种后缀名为sass，不使用大括号和分号；
另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。
建议使用：scss.
$fontSize: 12px;
body{
font-size:$fontSize;
}
混合（mixin）
@mixin ($w,$h) {
width:$w;
height:$h;
}
@include opacity(80px,60px);
在sass里面，需要注意的是：
less里面:
.fontSize: 12px;
body{
fontSize: 14px;
font-size:.fontSize; }
p{
font-size:.fontSize; }
会显示：
body{
fontSize: 14px;
}
p{
fontSize: 12px;
}
sass里面：
$fontSize: 12px;
body{
$fontSize: 14px;
font-size:$fontSize; }
p{
font-size:$fontSize; }
会显示：
body{
fontSize: 14px;
}
p{
fontSize: 14px;
}
多参数：
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px)
{
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding; }
.imgtext-h li{
@include horizontal-line(1px solid #ccc);
}
只传一个值，那么调用@include horizontal-line时，会设置 padding-top和 padding-bottom的默认值，
如果@include horizontal-line没有写默认值，那么sass会报错，需要修改@include horizontal-line需要传递的值，或者在.imgtext-h li里面，添加一个值。
所以说，在sass局部定义是变量会影响全局的变量，p元素会根据div内部的定义字体大小的，来设置p元素的字体大小。
在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)
不仅这样，还能做if判断、for循环和三目运算。
@for $i from 1 through 3
{
.item-#{$i}{ width: 2em * $i; }
}
会显示：
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }
from 1 through 3是表示从1开始到3结束，只需要修改值，就能实现你需要的几个.item-x,和它的宽度。
