Sass 與 Compass 實戰經驗總結

自從走進前端圈，一直忙於學習和工做，雖有常常記下點滴收穫，卻沒有時間好好地寫出來。此刻，恰逢"五一"，正好擠時間寫寫博客，跟你們分享下近期結合使用Sass和Compass的一些經驗。文章主要面向對Sass和Compass還不熟悉的同窗，相信對你有必定的幫助。大牛請補充，歡迎留下建議或補充說明。

Sass 和 Compass 的安裝

Sass和Compass的安裝你們能夠參考它們各自的官網，裏面有詳細的install步驟。如下是它們的官網：

• Sass官網

• Compass官網

這裏須要提下，安裝Sass和Compass以前，請先確保本地已經裝了Ruby環境，由於這二者都是用Ruby語言開發的。至於Ruby環境的安裝，本文提供兩個途徑：

• 一個是taobao鏡像，

• 一個是Ruby China上的安裝教程

Sass 的經常使用方法

Sass有兩種語法規則 -- Sass 和 Scss, 如下所說的都是針對Scss語法。如下示例只給出Scss的寫法，若有須要瞭解編譯後樣式的，推薦參考官網。

編譯

Scss有四種編譯風格，分別是：

• nested(默認): 嵌套縮進

• expanded: 擴展的

• compact: 簡潔格式

• compressed: 壓縮

至於怎麼編譯，咱們放在下面跟Compass一塊兒講，由於這裏主要分享和compass結合使用。若是要單獨編譯Sass，能夠參考官網上提供的在線編輯器，或者用koala軟件，一款Less、Sass編譯器，若是項目中有用Gulp或Webpack,能夠用它們的插件自行編譯便可。

註釋

如下兩種註釋方式，你們自取所需便可。

//這種註釋方式，不會被編譯到css文件中，只能保留在源文件
/* 這種註釋能夠被編譯到css文件中 */

變量

Scss語法支持使用變量，變量都以$符號開頭，如下給出簡單示例：

$font-color: #ff637c;
$sm-padding: 6px;
.main {
    color: $font-color;
    padding-top: $sm-padding;
}

嵌套

Scss支持選擇器嵌套使用，省去咱們寫不少相同的選擇器名稱，如：

.prev-item {
    border: 1px solid $primary-color;
    padding: $sm-padding;

    p {
        line-height: 28px;
    }
}

這裏提醒一點，嵌套層級太深會影響網頁性能，通常推薦嵌套不超過3層。

複用

scss代碼的複用，這裏講如下幾種：

@mixin 和 @include

@mixin size($width, $height: $width) {
    width: $width;
    height: $height;
}

.containter {
    @include size(60px);
}

class / placeholder 和 @extend

請你們看看如下兩種形式，注意兩種形式的編譯結果:

%auto {
    margin-left: auto;
    margin-right: auto;
}

.box {
    @extend %auto;
    width: 80px;
}

.auto {
    margin-left: auto;
    margin-right: auto;
}
    
.content {
    @extend .auto;
    width: 80px;
}

第一種寫法是Scss的placeholder的用法，編譯結果以下，也就是」%auto「的樣式是不會單
被編譯出來的，只在引用它的選擇器裏面生效：

.box {
    margin-left: auto;
    margin-right: auto;
    width: 80px;
}

而第二個編譯結果是

.auto {
    margin-left: auto;
    margin-right: auto;
}
    
.content {
     margin-left: auto;
     margin-right: auto;
     width: 80px;
}

所以，若是你的html中須要用到諸如」auto「這個類的，選用第二種方法，若是html中不須要用到「auto」這個類，scss中的「auto"純屬用來服務其餘類的，那咱們選擇第一種方法，減小css中多餘的樣式。

@import

@import命令在css模塊化的運用中起着重要的做用，它用來引入外部的文件。好比咱們已經寫好了_reset.scss、header.scss和modal.scss,以下：

這裏咱們在寫index.scss時，須要用到header和modal的樣式，那麼咱們直接在index.scss裏面，經過@import命令引進來就行，如圖：

這裏提醒注意兩點

• scss文件的文件名若是是有下劃線「—」，則不會單獨被編譯成一份css文件，而只會在引用它的文件裏面編譯。可是在引用它時，不用加上下劃線, 如上面的 @import 'reset';

• 確保每份scss文件最上面都有 @charset 'utf-8', 以防編譯中文註釋時，出現亂碼。

Sass還有不少高級用法，如自定義函數、條件語句等, 有興趣的同窗能夠看看官方文檔。

Compass 與 Sass結合使用

Compass和Sass結合使用，能夠大大加快咱們編寫css的速度，由於Compass裏面已經有不少現成的sass模板，咱們能夠直接拿來用。先看看在項目裏面裝了Compass之後，compass裏面會有一個config.rb文件、一個存放Sass文件的文件夾和一個存放編譯後的css文件夾（文件夾名稱可自行修改），你也能夠放入其餘文件，以下圖的images文件夾。

咱們看看下圖config.rb文件：

在代碼的6~9行，咱們能夠設置文件的路徑，在14行設置編譯後的css格式，20行設置 line_comments = false 去除默認狀態下大量的註釋，若是須要去除緩存文件，則加上一句 cache = false 便可。

編譯

若是項目中沒有使用gulp或者webpack,單純用compass來編譯的話，能夠命令行中項目的根目錄下，執行 compass compile ，這樣compass就會把Scss文件夾中的scss文件, 編譯成css 並存放在css(或默認名爲stylesheets)的文件夾裏面。Compass 也能夠像gulp或者webpack同樣，實時編譯，只須要在項目的根目錄下，打 compass watch , 這樣compass就會實時監聽scss文件，一旦sass文件有改動，及當即編譯到css文件。

模塊引用

有了compass，咱們不用再本身寫一個reset.scss文件，或者定義一大堆css3的@mixin等，能夠直接在scss文件裏面引用compass的現成模塊。具體模塊不少，有興趣的同窗能夠瀏覽官網，上面有詳細的用法說明，這裏只給出簡單示例：

這樣這份scss文件在編譯後，就會自動生成 css reset 的代碼，咱們也能夠經過 @include 來直接引用compass/css3中的19種命令，如 clearfix 、 box-sizing 或者其餘css3新屬性border-radius 等，參考下圖：

此外，值得推薦的是，咱們能夠把項目裏面 共用的變量 和 計劃用到的工具，包括自定義的 @mixin, 放在一個base文件裏面，這樣，咱們就不用在每一個sass文件裏面都聲明、引用一些相同的東西，直接經過 @import 命令，在其餘文件裏面引用一個base文件就行。下面是定義好的base文件：

這時咱們須要在application.scss裏面用到base裏面的這些變量和工具，咱們直接在 application.scss 裏面這樣寫就行：

@import 'base';

更多模塊操做，請細讀官方教程。

函數

Compass有不少封裝好的函數，方便咱們直接使用，這裏挑個比較經常使用的講下. 好比，咱們在圖片路徑時，能夠引用 image-url 函數，直接在config.rb文件裏面，配置好圖片的路徑，而後在scss文件中，直接把圖片名稱做爲參數傳給 image-url 便可，如圖：

你也能夠拿它再和scss結合使用，封裝出更實用的代碼，如封裝一個兼容1倍屏和2倍屏圖片的@mixin，代碼以下：

@mixin bg-img($image1, $image2) {
    background: image-url($image1);
    background: -webkit-image-set(image-url($image1) 1x, image-url($image2) 2x);
}

在須要用到的地方，經過 @include 引進來，並傳入圖片名稱，以下所示：

.icon-bg {
    @include bg-img('icons.png','icons@2x.png');
}

更多實例，請參考這裏.

篇幅有限，就先寫這麼多了，若是你有更多的發現，歡迎一塊兒分享...

資料推薦

• Sass用法指南

• Compass用法指南