一. Sass/Scss&Less是什么?
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读。Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css。
Less一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)。less英文站需要翻墙,也可以访问中文站
Sass与Scss有什么差别
Sass原先跟Haml一样的缩排语法,对于写惯Css的前端来说是很不直观的,也不能将原来的Css加到Sass里面,因此Sass改良了语法,Sass 3就变成了Scss(Sassy CSS)。与原来的语法兼容,只是用{}取代了原来的缩进。
Sass
.content margin:10px auto h1 font-size:24px;
Scss
.content{ margin:10px auto 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不支持。
/* Sample Sass "if" statement */ @if lightness($color) > 30% { background-color: #000; } @else { background-color: #fff; } /* Sample Sass "for" loop */ @for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } }
三. 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.混合
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
Less 混合
.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(11px); }
Scss 混合
@mixin rounded-corners ($radius: 5px) { border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius; } #header { @include rounded-corners; } #footer { @include rounded-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
#header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a: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%); /* return a color which is 10% *lighter* than @color */ darken(@color, 10%); /* return a color which is 10% *darker* than @color */ saturate(@color, 10%); /* return a color 10% *more* saturated than @color */ desaturate(@color, 10%); /* return a color 10% *less* saturated than @color */ fadein(@color, 10%); /* return a color 10% *less* transparent than @color */ fadeout(@color, 10%); /* return a color 10% *more* transparent than @color */ spin(@color, 10); /* return a color with a 10 degree larger in hue than @color */ spin(@color, -10); /* return a color with a 10 degree smaller hue than @color */
Scss同样也支持color函数,只需要将@改为$即可。
5.作用域
Less-作用域
@color: #00c; /* 蓝色 */ #header { @color: #c00; /* red */ border: 1px solid @color; /* 红色边框 */ } #footer { border: 1px solid @color; /* 蓝色边框 */ }
Less-作用域编译后
#header{border:1px solid #cc0000;} #footer{border:1px solid #0000cc;}
scss-作用域
$color: #00c; /* 蓝色 */ #header { $color: #c00; /* red */ border: 1px solid $color; /* 红色边框 */ } #footer { border: 1px solid $color; /* 蓝色边框 */ }
Less-作用域编译后
#header{border:1px solid #c00} #footer{border:1px solid #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环境
$ gem install sass
安装后就可以直接编译Sass了
$ sass --watch style.scss:style.css
还有一个利器就是大名顶顶的Compass,后面我会用一篇博文来介绍下。
五. Less安装使用
1.在客户端使用
引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
然后在Less官网下载 less.js, 在 中引入:
<script src="less.js" type="text/javascript"></script">
注意你的less样式文件一定要在引入less.js前先引入。
2.在服务端安装使用
* 安装
在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样:
$ npm install less
如果你想下载最新稳定版本的 LESS,可以尝试像下面这样操作:
$ npm install [email protected]
* 使用
在命令行下使用
你可以在终端调用 LESS 解析器:
$ lessc styles.less
上面的命令会将编译后的 CSS 传递给 stdout, 你可以将它保存到一个文件中:
$ lessc styles.less > styles.css
如何你想将编译后的 CSS 压缩掉,那么加一个 -x 参数就可以了.
还有些编译工具上面也有讲过,那些更加的方便。
参考资料
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
VIA:iUX Blog,转载时请注明出处
动态样式语言Sass&Less介绍与区别