less sass与css区别.

sass/less

比css多出的功能{

1.变量，


Less-作用域
如
@color：#00c;
#header{
@color:#c00;/*red*/
border:1px solid @color;/*红色边框*/
}


#footer{
border:1px solid @color;/*蓝色边框*/
}
就相当于js里面设置全局变量和局部变量的作用域


2.嵌套，




3.运算符，
可以直接在css预处理中进行样式计算
body{
margin:(14px/2);
top:50px+100px;
right:100px-50px;
left:10*10;
}










4.混入（Minxin），
创建一个minxin来处理不同浏览器的css写法是很简单的，节省了大量的重复工作和痛苦的代码编辑。
Sass

@mixin border-radius($values){
-webkit-border-radius:$values;
-moz-border-radius:$values;
border-radius:$values;
}










5.继承，
如：sass写法
.block{
margin:10px 5px;
padding:2px;
}
p{
@extend .block;/*继承上面声明的.block*/
border:1px solid #fee;
}




6.颜色处理，
css预处理一般都会内置一些颜色处理函数用来对颜色值进行处理，如：加亮，变暗，颜色梯度等。
如sass的部分颜色处理函数:
lighten($color,10%);
darken($color,10%);
实例：
$color:#89234c
h1{
background:$color;
border:3px solid darken($color,50%)
}






7.函数等
}