sassy

动态样式语⾔SassScssLess

⼀.Sass/Scss&Less是什么？

(SyntacticallyAwesomeStylesheets)是⼀种动态样式语⾔，语法跟css⼀样(但多了些功能)，⽐css好写，⽽且更容易阅读。Sass语法类似与

Haml，属于缩排语法（makeup），⽤意就是为了快速写Html和Css。

⼀种动态样式语⾔.将CSS赋予了动态语⾔的特性，如变量，继承，运算，函数.LESS既可以在客户端上运⾏(⽀持IE6+,Webkit,

Firefox)，也可⼀在服务端运⾏(借助)。less英⽂站需要FQ，也可以访问

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区别？

是基于Ruby的，是在服务端处理的，⽽Less是需要引⼊来处理Less代码输出Css到浏览器，也可以在开发环节使⽤Less，然

后编译成Css⽂件，直接放到项⽬中，也有、、这样的⼯具，也有地址。

2.变量符不⼀样，less是@，⽽Scss是$，⽽且变量的作⽤域也不⼀样，后⾯会讲到。

3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested,compact,compresd和expanded。

⽀持条件语句，可以使⽤if{}el{},for{}循环等等。⽽Less不⽀持。

/*SampleSass"if"statement*/

@iflightness($color)>30%{

background-color:#000;

}@el{

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;

@ba-color:#111;

@red:#842210;

#header{

color:@ba-color*3;

border-left:@the-border;

border-right:@the-border*2;

}

#footer{

color:@ba-color+#003300;

border-color:desaturate(@red,10%);

}

Scss-函数运算

$the-border:1px;

$ba-color:#111;

$red:#842210;

#header{

color:$ba-color*3;

border-left:$the-border;

border-right:$the-border*2;

}

#footer{

color:$ba-color+#003300;

border-color:desaturate($red,10%);

}

编译后的css

#header{

color:#333;

border-left:1px;

border-right:2px;

}

#footer{

color:#114411;

border-color:#7d2717;

}

函数

提供了⼀系列的颜⾊运算函数.颜⾊会先被转化成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中的变量会随着作⽤域的变化⽽不⼀样，上⾯的例⼦能很好的解释这点。

ing

⽂件引⼊

Less-import

@import"";

@import"lib";

在Scss中，也是可以import。

scss-import

//需要被import的⽂件必须以_开头命名，如_

@import"rounded";

四.Sass/Scss安装

Scss的安装需要Ruby环境

$geminstallsass

安装后就可以直接编译Sass了

$:

还有⼀个利器就是⼤名顶顶的Compass，后⾯我会⽤⼀篇博⽂来介绍下。

五.Less安装使⽤

1.在客户端使⽤

引⼊你的.less样式⽂件的时候要设置rel属性值为“stylesheet/less”:

然后在Less官⽹下载,在中引⼊:

注意你的less样式⽂件⼀定要在引⼊前先引⼊。

2.在服务端安装使⽤

*安装

在服务器端安装LESS的最简单⽅式就是通过npm(node的包管理器),像这样:

$npminstallless

如果你想下载最新稳定版本的LESS，可以尝试像下⾯这样操作:

$npminstallless@latest

*使⽤

在命令⾏下使⽤

你可以在终端调⽤LESS解析器:

$

上⾯的命令会将编译后的CSS传递给stdout,你可以将它保存到⼀个⽂件中:

$>

如何你想将编译后的CSS压缩掉，那么加⼀个-x参数就可以了.

还有些编译⼯具上⾯也有讲过，那些更加的⽅便。