动态款式言语Scss&Less介绍与差异

一. 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的BETWAY登录来说是很不直观的，也不能将本来的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; /* 赤色边框 */
}

Scss-作用域编译后

#header{border:1px solid #c00}
#footer{border:1px solid #c00}

咱们能够看出来，less和scss中的变量会跟着作用域的改变而不相同，由于咱们在#header中从头界说了color变量，变量的值将会是不同的并且只会在该选择器中有用。它之前或许之后的一切当地，假如没有被从头界说，都会坚持那个原始的值。

作用域在Sass中稍有不同。在上面的代码中，当@color变量变为赤色后，代码中，此处之后的该变量的值，将会被重写（成为赤色）。上面的比如能很好的解说这点。

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 less@latest

* 运用

在指令行下运用

你能够在终端调用 LESS 解析器:

$ lessc styles.less

上面的指令会将编译后的 CSS 传递给 stdout, 你能够将它保存到一个文件中:

$ lessc styles.less > styles.css

怎样你想将编译后的 CSS 紧缩掉，那么加一个 -x 参数就能够了.
还有些编译东西上面也有讲过，那些愈加的便利。