LESS與Sass的差異及詳解

使用變量來沿着一個調色盤爲網站或模板創建一些東西的想法。擁有一個提供固定數量選項可選的色盤可以避免顏色太跳躍以至於從一個已定的風格中脫離。

事實證明，LESS——以及Sass——功能比這個要多太多。LESS和Sass在語法上有些共性，比如下面這些：

● 混入(Mixins)——class中的class；

● 參數混入——可以傳遞參數的class，就像函數一樣；

● 嵌套規則——Class中嵌套class，從而減少重複的代碼；

● 運算——CSS中用上數學；

● 顏色功能——可以編輯顏色；

● 名字空間(namespace)——分組樣式，從而可以被調用；

● 作用域——局部修改樣式；

● JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

LESS和Sass的主要不同就是他們的實現方式，LESSS是基於JavaScript，所以，是在客戶端處理的。

另一方面，Sass是基於Ruby的，然後是在服務器端處理的。很多開發者不會選擇LESS因爲JavaScript引擎需要額外的時間來處理代碼然後輸出修改過的CSS到瀏覽器。關於這個有很多種方式，我選擇的是隻在開發環節使用LESS。一旦我完成了開發，我就複製然後粘貼LESS輸出的到一個壓縮器，然後到一個單獨的CSS文件來替代LESS文件。另一個選擇是使用LESS.app來編譯和壓縮你的LESS文件。兩個選擇都將最小化你的樣式輸出，從而避免由於用戶的瀏覽器不支持JavaScript而可能引起的任何問題。儘管這不大可能，但終歸是有可能的。

LESS介紹及其與Sass的差異

LESS Is More

介紹

在你的項目中引入LESS很簡單：

1.下載less.js;

2.創建一個文件來放你的樣式，比如style.less;

3.添加以下代碼到你的HTML的中:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

請注意link的rel屬性。你需要在屬性值的最後面使用/less以使LESS起作用。然後在link後面引入scirpt也是必須的。如果你在用HTML5語法——爲什麼不用呢？——你可以省去type=”text/css”和type=”text/javascript”。

其實也有一個服務器端的LESS版本。在服務器上安裝LESS的最簡單的辦法就是使用Node Package Manager (NPM，一看就知道是基於Node.js的)。

變量

如果你是個開發者，變量應該是你最好的朋友。如果你要重複的使用一個信息(本例中就是color)，將它設置爲一個變量就可以。這樣，你就可以保證自己的一致性並可能減少滾動代碼來查找顏色值、複製、粘貼等繁瑣的工作了。你甚至可以加或者減一些你需要渲染的HEX值到這些顏色上面。看下例子：

@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;

如果我們將這些樣式應用到3個div上面，我們就可以看到由加上和減掉的HEX值形成的漸變的效果：

從@light_blue到@blue到@dark_blue的漸變效果

關於變量在LESS和Sass中的唯一區別就是，LESS用@，Sass用$。同時還有一些作用域上的差別，我後面會提到。

混入(mixin)

偶爾，我們會創建一些會在樣式表中重複使用的樣式規則。沒有人會阻止你在一個HTML的元素中使用多個class，但是你可以用LESS，在樣式表中完成。爲了描述這一點，我寫了一點兒例子：

.border {
    border-top: 1px dotted #333;
}
article.post {
    background: #eee;
    .border;
}
ul.menu {
    background: #ccc;
    .border;
}

這可以給到你與你在兩個元素中分別添加.bordered class同樣的效果——而且僅僅在樣式表中就完成了。而且它工作的很好：

文字和無序列表都被用上了邊框樣式

在Sass中，你要在樣式規則前面添加@mixin聲明，規定它是個嵌套。然後，通過@include來調用它：

@mixin border {
    border-top: 1px dotted #333;
}
article.post {
    background: #eee;
    @include border;
}
ul.menu {
    background: #ccc;
    @include border;
}

參數混入

就像在CSS中有函數功能一樣，這些對於那些在現在的CSS工作中多餘的工作非常有用。最好和最有用的例子就是我們正在經歷的從CSS2到CSS3過渡過程中的很多瀏覽器私有前綴。Nettuts+有一篇Jeffrey Way寫的很讚的視頻和文章，內容是包含着由有用的參數組成的文件，他們涵蓋了大部分使用各個瀏覽器私有前綴的CSS3屬性。例如，在他們的格式中，一個簡單的處理圓角的mixin是這樣的：

.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

在這個例子中，.border-radius有個默認的3px的圓角，但是你可以使用你需要的任何值。.border-radius(10px)將會生成半徑爲10px的圓角。

Sass中的語法很像LESS，只是使用$聲明變量，然後使用前面提到的@mixin和@include來調用。

選擇器繼承

這個東西LESS並沒有提供。通過這個功能，你可以將一個選擇器附加到已經預先定義的選擇器上，而無需再使用逗號將兩者分開的寫法了：

.menu {
    border: 1px solid #ddd;
}
.footer {
    @extend .menu;
}

/* 上面的寫法規則和下面的效果是一樣的： */
.menu, .footer {
    border: 1px solid #ddd;
}

嵌套規則

在css中嵌套class和ID是避免你的樣式干擾或者被別的樣式干擾的唯一方法了。但是這可能會很凌亂。使用一個類似於#site-body .post .post-header h2 的選擇器毫無吸引力而且會佔用大量不必要的空格。使用LESS，你可以嵌套id、class以及標籤。對於前面提到的例子，你可以這樣寫：

#site-body { …
    .post { …
        .post-header { …
            h2 { … }
            a { …
                &:visited { … }
                &:hover { … }
            }
        }
    }
}

上面的代碼最終和上面的例子（那一長串的選擇器）的效果一樣，但是要更容易閱讀和理解的多，而且它佔用很少的空間。你也可以通過&來引用元素樣式到他們的僞元素上，該功能類似於JavaScript中的this。

運算

這可能是你所期望的：使用數字或者變量在你的樣式表中實現數學運算！

@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;

聲明下，我也意識到我可以除以4來獲得@quarter_page變量，但是這裏我只是想要演示下圓括號組成“運算順序”在這裏也是可以用的。在使用簡寫的規則中，小括號也是必須的，比如 border: (@width / 2) solid #000。

Sass在數字上比LESS更專業。它已經可以換算單位了。Sass可以處理無法識別的度量單位並將其輸出。這個特性很明顯是一個對未來的嘗試——證明W3C作出的一些改變。

/* Sass */
2in + 3cm + 2pc = 3.514in

/* LESS */
2in + 3cm + 2pc = Error

Color函數

在文章開頭，我提到了LESS如何幫我在編碼過程中處理圍繞着一個調色板。對此貢獻最大的一部分就是顏色函數。加入你用一個標準的藍色貫穿到你的樣式中，然後你想要在表單中用這個藍色來做一個漸變的按鈕。你可以打開Photoshop或者其它的編輯器來獲取一個比藍色較淺的或者較暗的HEX色值來作爲漸變色。或者，你可以只是使用LESS中的顏色函數。

@blue: #369;
.submit {
    padding: 5px 10px;
    border: 1px solid @blue;
    background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); 
/*Moz*/
    background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); 
/*Webkit*/
    background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); 
/*Opera*/
    background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); 
/*IE 10+*/
    background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); 
/*W3C*/
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}

lighten函數很明顯就是用百分比值來減輕顏色，在這個例子中，它將減輕這個基礎的藍色的10%。這種方法可以讓我們變化的元素或者其它任何元素的顏色值——只是簡單的改變基礎顏色而已。這對於主題(模板)來說非常有用。而且，如果你使用參數功能，像上面提到的，你還可以更簡單的應用到一些瀏覽器私有前綴的聲明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。

嗯，最終的效果的確很贊：

很讚的漸變的、基於變量的”Submit”按鈕

還有很多其它的色彩函數，比如變暗或者調整顏色的飽和度，甚至你可以旋轉色盤來使用其它顏色。我建議親自嘗試下你能想出的（用法）。

Sass貌似有更多的選項——但我並不需要這麼多。我個人最常用的還是lighten和darken。如果你想了解更多，可以看一下這篇很詳細的介紹。

條件語句與控制

這是一個的確很讚的東東，也是另一個LESS不支持的功能。使用 Sass，你可以使用if { } else { } 條件語句，以及for { }循環。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。

/* Sample Sass "if" statement */
@if lightness($color) > 30% {
    background-color: #000;
} @else {
    background-color: #fff;
}

/* Sample Sass "for" loop */
@for $i from 1px to 10px {
    .border-#{i} {
    border: $i solid blue;
    }
}

名字空間(Namespaces)

名字空間可以用於組織我們的CSS到另一個檔次，我們可以將一些公用的樣式分組，然後在用的時候直接使用。例如，如果我們創建了一個名爲default的樣式分組，我們就可以在用到的時候直接從該組中調用。

#defaults {
    .nav_list () {
        list-style: none;
        margin: 0; padding: 0;
    }
    .button () { … }
    .quote () { … }
}

然後，在我們的代碼中，如果我們正好在一個nav元素中使用了ul元素，我們就會想到我們需要default樣式。那麼我們就可以簡單的調用它，它也會被直接應用。

nav ul {
    #defaults > .nav_list;
}

作用域

作用域是編程中的標配，LESS中也是。如果你在你樣式表的root級聲明一個變量，它在整個文檔中都是可以用的。然而，如果你在一個選擇器，比如id或者class中，重新定義了這個變量，那麼，它就只能在這個選擇器中可用了——當然是重新定義後的新值。

@color: #00c; 
/* 藍色 */
#header {
    @color: #c00; 
/* red */
    border: 1px solid @color; 
/* 紅色邊框 */
}
#footer {
    border: 1px solid @color; 
/* 藍色邊框 */
}

因爲我們在#header中重新定義了color變量，變量的值將會是不同的而且只會在該選擇器中有效。它之前或者之後的所有地方，如果沒有被重新定義，都會保持那個原始的值。

作用域在Sass中稍有不同。在上面的代碼中，當@color變量變爲紅色後，代碼中，此處之後的該變量的值，將會被重寫（成爲紅色）。

註釋

這一部分比較基礎。LESS中允許兩種註釋寫法。標準的CSS註釋，/* comment */，是有效的，而且能夠通過處理並正確輸出。當行註釋，// comment，同樣可以用但是不能夠通過處理也不能被輸出，然後，結果是，“無聲的”。

導入

導入也相當符合標準。標準的 @import: ‘classes.less’; 處理的很好。然而，如果你想要導入其它的LESS文件，那麼文件的擴展名是可選的，所以 @import ‘classes’; 也是可行的。如果你想要導入一些無需LESS處理的內容，你可以使用 .css 擴展 (比如， @import: ‘reset.css’;)。

字符串插入

字符串也是可以用於變量中的，然後通過@{name}來調用。

@base_url : 'http://www.qianduan.net';
background-image: url("@{base_url}/images/background.png");

轉義(Escaping)

可能偶爾會需要引入一個CSS中非法或者LESS無法識別的值。通常是一些IE的hack。要避免拋出異常並破壞LESS，你將需要避開它們。

.class {
    filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}

/*實際上將會輸出下面的代碼: */
.class {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}

JavaScript 賦值

這是LESS中我最中意的部分：在樣式表中使用Javascript——相當精彩。你可以使用表達式，也可以參考環境方向來使用反單引號。

@string: `'howdy'.toUpperCase()`; 
/* @string 變成 'HOWDY' */

/* 你也可以使用前面提到的插值： */
@string: 'howdy';
@var: ~`'@{string}'.topUpperCase()`; 
/* 變爲 'HOWDY' */

/* 獲取文檔的信息 */
@height = `document.body.clientHeight`;

輸出格式

然而LESS並沒有輸出設置，而Sass提供4中輸出選項：nested, compact, compressed 和 expanded。

SASS用法指南

學過CSS的人都知道，它不是一種編程語言。

你可以用它開發網頁樣式，但是沒法用它編程。也就是說，CSS基本上是設計師的工具，不是程序員的工具。在程序員眼裏，CSS是一件很麻煩的東西。它沒有變量，也沒有條件語句，只是一行行單純的描述，寫起來相當費事。

很自然地，有人就開始爲CSS加入編程元素，這被叫做”CSS預處理器”（css preprocessor）。它的基本思想是，用一種專門的編程語言，進行網頁樣式設計，然後再編譯成正常的CSS文件。

各種”CSS預處理器”之中，我自己最喜歡SASS，覺得它有很多優點，打算以後都用它來寫CSS。下面是我整理的用法總結，供自己開發時參考，相信對其他人也有用。

============================================

SASS用法指南

一、什麼是SASS

SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。

本文總結了SASS的主要用法。我的目標是，有了這篇文章，日常的一般使用就不需要去看官方文檔了。

二、安裝和使用

2.1 安裝

SASS是Ruby語言寫的，但是兩者的語法沒有關係。不懂Ruby，照樣使用。只是必須先安裝Ruby，然後再安裝SASS。

假定你已經安裝好了Ruby，接着在命令行輸入下面的命令：

    　　gem install sass

然後，就可以使用了。

2.2 使用

SASS文件就是普通的文本文件，裏面可以直接使用CSS語法。文件後綴名是.scss，意思爲Sassy CSS。

下面的命令，可以在屏幕上顯示.scss文件轉化的css代碼。（假設文件名爲test。）

    　　sass test.scss

如果要將顯示結果保存成文件，後面再跟一個.css文件名。

  　　sass test.scss test.css

SASS提供四個編譯風格的選項：

    　　* nested：嵌套縮進的css代碼，它是默認值。

    　　* expanded：沒有縮進的、擴展的css代碼。

    　　* compact：簡潔格式的css代碼。

    　　* compressed：壓縮後的css代碼。

生產環境當中，一般使用最後一個選項。

　sass --style compressed test.sass test.css

你也可以讓SASS監聽某個文件或目錄，一旦源文件有變動，就自動生成編譯後的版本。

    　　// watch a file

    　　sass --watch input.scss:output.css

    　　// watch a directory

    　　sass --watch app/sass:public/stylesheets

SASS的官方網站，提供了一個在線轉換器。你可以在那裏，試運行下面的各種例子。

三、基本用法

3.1 變量

SASS允許使用變量，所有變量以$開頭。

    　　$blue : #1875e7;　

    　　div {
    　　　color : $blue;
    　　}

如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。

    　　$side : left;

    　　.rounded {
    　　　　border-#{$side}-radius: 5px;
    　　}

3.2 計算功能

SASS允許在代碼中使用算式：

    　　body {
    　　　　margin: (14px/2);
    　　　　top: 50px + 100px;
    　　　　right: $var * 10%;
    　　}

3.3 嵌套

SASS允許選擇器嵌套。比如，下面的CSS代碼：

    　　div h1 {
    　　　　color : red;
    　　}

可以寫成：

    　　div {
    　　　　hi {
    　　　　　　color:red;
    　　　　}
    　　}

屬性也可以嵌套，比如border-color屬性，可以寫成：

    　　p {
    　　　　border: {
    　　　　　　color: red;
    　　　　}
    　　}

注意，border後面必須加上冒號。

在嵌套的代碼塊內，可以使用&引用父元素。比如a:hover僞類，可以寫成：

    　　a {
    　　　　&:hover { color: #ffb3ff; }
    　　}

3.4 註釋

SASS共有兩種註釋風格。

標準的CSS註釋 /* comment */ ，會保留到編譯後的文件。

單行註釋 // comment，只保留在SASS源文件中，編譯後被省略。

在/*後面加一個感嘆號，表示這是”重要註釋”。即使是壓縮模式編譯，也會保留這行註釋，通常可以用於聲明版權信息。

    　　/*!
    　　　　重要註釋！
    　　*/

四、代碼的重用

4.1 繼承

SASS允許一個選擇器，繼承另一個選擇器。比如，現有class1：

    　　.class1 {
    　　　　border: 1px solid #ddd;
    　　}

class2要繼承class1，就要使用@extend命令：

    　　.class2 {
    　　　　@extend .class1;
    　　　　font-size:120%;
    　　}

4.2 Mixin

Mixin有點像C語言的宏（macro），是可以重用的代碼塊。

使用@mixin命令，定義一個代碼塊。

    　　@mixin left {
    　　　　float: left;
    　　　　margin-left: 10px;
    　　}

使用@include命令，調用這個mixin。

    　　div {
    　　　　@include left;
    　　}

mixin的強大之處，在於可以指定參數和缺省值。

    　　@mixin left($value: 10px) {
    　　　　float: left;
    　　　　margin-right: $value;
    　　}

使用的時候，根據需要加入參數：

    　　div {
    　　　　@include left(20px);
    　　}

下面是一個mixin的實例，用來生成瀏覽器前綴。

    　　@mixin rounded($vert, $horz, $radius: 10px) {
    　　　　border-#{$vert}-#{$horz}-radius: $radius;
    　　　　-moz-border-radius-#{$vert}#{$horz}: $radius;
    　　　　-webkit-border-#{$vert}-#{$horz}-radius: $radius;
    　　}

使用的時候，可以像下面這樣調用：

    　　#navbar li { @include rounded(top, left); }

    　　#footer { @include rounded(top, left, 5px); }

4.3 顏色函數

SASS提供了一些內置的顏色函數，以便生成系列顏色。

    　　lighten(#cc3, 10%) // #d6d65c
    　　darken(#cc3, 10%) // #a3a329
    　　grayscale(#cc3) // #808080
    　　complement(#cc3) // #33c

4.4 插入文件

@import命令，用來插入外部文件。

　@import "path/filename.scss";

如果插入的是.css文件，則等同於css的import命令。

  　　@import "foo.css";

五、高級用法

5.1 條件語句

@if可以用來判斷：

    　　p {
    　　　　@if 1 + 1 == 2 { border: 1px solid; }
    　　　　@if 5 < 3 { border: 2px dotted; }
    　　}

配套的還有@else命令：

    　　@if lightness($color) > 30% {
    　　　　background-color: #000;
    　　} @else {
    　　　　background-color: #fff;
    　　}

5.2 循環語句

SASS支持for循環：

    　　@for $i from 1 to 10 {
    　　　　.border-#{$i} {
    　　　　　　border: #{$i}px solid blue;
    　　　　}
    　　}

也支持while循環：

　$i: 6;

    　　@while $i > 0 {
    　　　　.item-#{$i} { width: 2em * $i; }
    　　　　$i: $i - 2;
    　　}

each命令，作用與for類似：

  　　@each $member in a, b, c, d {
    　　　　.#{$member} {
    　　　　　　background-image: url("/image/#{$member}.jpg");
    　　　　}
    　　}

5.3 自定義函數

SASS允許用戶編寫自己的函數。

　　@function double($n) {
    　　　　@return $n * 2;
    　　}

    　　#sidebar {
    　　　　width: double(5px);
    　　}