DIV CSS 佈局教程網

一. 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; /* 紅色邊框 */
}

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 參數就可以了.
還有些編譯工具上面也有講過，那些更加的方便。