标签：
一、less
定义： @color:red; //定义颜色 @body-color:blue; @div-color:yellow;
引用：
body{ height:500px; border:1px solid @body-color; //调用了上面的颜色 }
嵌套：
div{ height:500px; border:1px solid @div-color;//这里就直接调用了上面的颜色 p{ color:@p-color; //div里面的p元素的样式 } }
传参：
border(@c){ 1px solid @c }
对border的调用：.border(red);
二、sass
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,和它的宽度。
三、less和sass的区别
1.实现方式：Less是基于JavaScript，是在客户端进行处理的；Sass是基于Ruby，是在服务器端进行处理的。
2.定义变量：Less定义变量时使用前缀：@；Sass定义变量时使用前缀：$。
3.混合（Mixins）：Less中使用混合时，只需在classB中根据classA的命名来使用；Sass中首先在定义混合时需要使用@mixin命令，其次在调用时需要使用@include命令来引入之前定义的混合。
4.解析方式：Less可以向上/向下解析；Sass只能向上解析。
5.变量的作用域：Less中的变量有全局和局部之分；Sass可以变量可以理解为都是全局的，但可以通过在变量后面跟！default，在引入Sass文件之前改变变量的属性值来解决这一问题。
6.比起Less，Sass中增加了条件语句（if、if...else）和循环语句（for循环、while循环和each循环）还有自定义函数：
标签：
原文地址：http://www.cnblogs.com/zjy0616/p/4824879.html
