Sass/Scss和Less区别
作者：zccst
一.Sass/Scss&Less是什么？
Sass(SyntacticallyAwesomeStylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。
Less一种动态样式语言.将CSS赋予了动态语言的特性，如变量，继承，运算，函数.LESS既可以在客户端上运行(支持IE6+,Webkit,Firefox)，也可一在服务端运行(借助Node.js)。less英文站需要外网，也可以访问中文站
Sass与Scss有什么差别
Sass原先跟Haml一样的缩排语法，对于写惯Css的前端来说是很不直观的，也不能将原来的Css加到Sass里面，因此Sass改良了语法，Sass3就变成了Scss(SassyCSS)。与原来的语法兼容，只是用{}取代了原来的缩进。
Sass
.content
margin:10pxauto
h1
font-size:24px;
Scss
.content{
margin:10pxauto
h1{
font-size:24px;
}
}
二.Sass/Scss&Less区别？
1.Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。
2.变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。
3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested,compact,compressed和expanded。
4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
/*SampleSass"if"statement*/
@iflightness($color)>30%{
background-color:#000;
}@else{
background-color:#fff;
}
/*SampleSass"for"loop*/
@for$ifrom1to10{
.border-#{$i}{
border:#{$i}pxsolidblue;
}
}
三.Sass/Scss&Less的共同特征
1.变量
允许我们单独定义通用的样式，这样可以在css中调用。
Less变量
@color:#4d926f;
#header{
color:@color;
}
h2{
color:@color;
}
Scss变量
$color:#4d926f;
#header{
color:$color;
}
h2{
color:$color;
}
编译后的css
#header{color:#4d926f;}
h2{color:#4d926f;}
2.混合
混合可以将一个定义好的classA轻松的引入到另一个classB中，从而简单实现classB继承classA中的所有属性。我们还可以带参数地调用，就像使用函数一样。
Less混合
.rounded-corners(@radius:5px){
border-radius:@radius;
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
}
#header{
.rounded-corners;
}
#footer{
.rounded-corners(11px);
}
Scss混合
@mixinrounded-corners($radius:5px){
border-radius:$radius;
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
}
#header{
@includerounded-corners;
}
#footer{
@includerounded-corners(11px);
}
编译后的css
#header{
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#footer{
border-radius:11px;
-webkit-border-radius:11px;
-moz-border-radius:11px;
}
3.嵌套
我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
Less嵌套
#header{
h1{
font-size:26px;
font-weight:bold;
}
p{font-size:12px;
a{text-decoration:none;
&:hover{border-width:1px}
}
}
}
Scss嵌套
#header{
h1{
font-size:26px;
font-weight:bold;
}
p{font-size:12px;
a{text-decoration:none;
&:hover{border-width:1px}
}
}
}
编译后的css
#headerh1{
font-size:26px;
font-weight:bold;
}
#headerp{
font-size:12px;
}
#headerpa{
text-decoration:none;
}
#headerpa:hover{
border-width:1px;
}
3.函数&运算
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。
Less函数运算
@the-border:1px;
@base-color:#111;
@red:#842210;
#header{
color:@base-color*3;
border-left:@the-border;
border-right:@the-border*2;
}
#footer{
color:@base-color+#003300;
border-color:desaturate(@red,10%);
}
Scss-函数运算
$the-border:1px;
$base-color:#111;
$red:#842210;
#header{
color:$base-color*3;
border-left:$the-border;
border-right:$the-border*2;
}
#footer{
color:$base-color+#003300;
border-color:desaturate($red,10%);
}
编译后的css
#header{
color:#333;
border-left:1px;
border-right:2px;
}
#footer{
color:#114411;
border-color:#7d2717;
}
4.color函数
提供了一系列的颜色运算函数.颜色会先被转化成HSL色彩空间,然后在通道级别操作:
lighten(@color,10%);
/*returnacolorwhichis10%*lighter*than@color*/
darken(@color,10%);
/*returnacolorwhichis10%*darker*than@color*/
saturate(@color,10%);
/*returnacolor10%*more*saturatedthan@color*/
desaturate(@color,10%);
/*returnacolor10%*less*saturatedthan@color*/
fadein(@color,10%);
/*returnacolor10%*less*transparentthan@color*/
fadeout(@color,10%);
/*returnacolor10%*more*transparentthan@color*/
spin(@color,10);
/*returnacolorwitha10degreelargerinhuethan@color*/
spin(@color,-10);
/*returnacolorwitha10degreesmallerhuethan@color*/
Scss同样也支持color函数，只需要将@改为$即可。
5.作用域
Less-作用域
@color:#00c;/*蓝色*/
#header{
@color:#c00;/*red*/
border:1pxsolid@color;/*红色边框*/
}
#footer{
border:1pxsolid@color;/*蓝色边框*/
}
Less-作用域编译后
#header{border:1pxsolid#cc0000;}
#footer{border:1pxsolid#0000cc;}
scss-作用域
$color:#00c;/*蓝色*/
#header{
$color:#c00;/*red*/
border:1pxsolid$color;/*红色边框*/
}
#footer{
border:1pxsolid$color;/*蓝色边框*/
}
Less-作用域编译后
#header{border:1pxsolid#c00}
#footer{border:1pxsolid#c00}
我们可以看出来，less和scss中的变量会随着作用域的变化而不一样，上面的例子能很好的解释这点。
6.Importing
文件引入
Less-import
@import"lib.less";
@import"lib";
在Scss中，也是可以import。
scss-import
//需要被import的文件必须以_开头命名，如_rounded.scss
@import"rounded";
四.Sass/Scss安装
Scss的安装需要Ruby环境
$geminstallsass
安装后就可以直接编译Sass了
$sass--watchstyle.scss:style.css
还有一个利器就是大名顶顶的Compass，后面我会用一篇博文来介绍下。
五.Less安装使用
1.在客户端使用
引入你的.less样式文件的时候要设置rel属性值为“stylesheet/less”:
<linkrel="stylesheet/less"type="text/css"href="styles.less">
然后在Less官网下载less.js,在中引入:
<scriptsrc="less.js"type="text/javascript"></script>
注意你的less样式文件一定要在引入less.js前先引入。
2.在服务端安装使用
*安装
在服务器端安装LESS的最简单方式就是通过npm(node的包管理器),像这样:
$npminstallless
如果你想下载最新稳定版本的LESS，可以尝试像下面这样操作:
$npminstallless@latest
*使用
在命令行下使用
你可以在终端调用LESS解析器:
$lesscstyles.less
上面的命令会将编译后的CSS传递给stdout,你可以将它保存到一个文件中:
$lesscstyles.less>styles.css
如何你想将编译后的CSS压缩掉，那么加一个-x参数就可以了.
还有些编译工具上面也有讲过，那些更加的方便。
参考资料
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
http://www.lesscss.org
http://www.lesscss.net
http://sass-lang.com
如果您觉得本文的内容对您的学习有所帮助，您可以微信：