推薦：關于響應式頁面
眾所周知，所謂響應式頁面，就是能夠用一套樣式，使你的頁面能夠在不同分辨率的屏幕下都有很好的表現形式。響應式Web設計，這個概念是Ethan Marctte 在A List Apart 發表的

什么是SASS?

SASS英文意思是Syntactically Awesome Stylesheets Sass，最早由Hampton Catlin開發和設計。SASS是一種幫助你簡化CSS工作流程的方式，幫助你更容易的維和和開發CSS內容。

如果你不明白為什么用SASS，你可以先看看這篇文章為什么需要將SASS和Compass融入CSS代碼開發流程 - CSS編譯器幫助你提高CSS開發效率和樂趣

最 簡單的例子，你是不是經常需要使用“查詢”和“替換”功能來修改CSS文件中某一個16進制的顏色？或者是打開一個計算器來計算多列設計中的列寬？ SASS介紹了一個新的概念例如，variables，mixins，鑲套或者是選擇器繼承。 從外形上看起來，非常像CSS，但是并沒有分割號或者大括號。

看看下面這個簡單的CSS：

#skyscraper_ad

{

display： block;

width： 120px;

height： 600px;

}

#leaderboard_ad

{

display： block;

width： 728px;

height： 90px;

}

如果你需要使用SASS，則如下代碼：

#skyscraper_ad

display： block

width： 120px

height： 600px

#leaderboard_ad

display： block

width： 728px

height： 90px

SASS使用雙空格的縮進來定義代碼鑲套結構。這里你可以大體的了解SASS的樣子，下面我們將介紹為什么SASS如此的棒！

如果你需要更多了解SASS，可以查看這篇內容為什么需要將SASS和Compass融入CSS代碼開發流程。

變量

在SASS中使用美元符號定義一個變量，在這個例子里，一個美元自負，變量名字加上一個冒號定義一個變量。

$red： #FF4848

當然，在SASS中有一些內建的功能，例如，darken，lighten來幫助你修改變量。下面例子里，我們使用lighten方法來生成段落中更亮的紅色：

$red： #FF4848 $fontsize： 12px h1 color： $red p color： lighten（$red， 10%）

在SASS中你還可以使用加減的方式來修改變量的值，如下：

p.addition_and_subtraction color： $red - #101 font-size： $fontsize + 10px

鑲套

兩種類型的鑲套：

選擇器鑲套

這是第一個鑲套類型。鑲套類似我們在html中使用的方式。

$fontsize： 12px

.speaker

.name

font：

weight： bold

size： $fontsize + 10px

.position

font：

size： $fontsize

如果你看看生成的CSS代碼，你可以看到如果鑲套的.name class位于.speaker class中，生成的CSS選擇器.speaker .name

.speaker .name {

font-weight： bold;

font-size： 22px; }

.speaker .position {

font-size： 12px; }

屬性鑲套

這是第二個鑲套的類型：

你可以使用同名前綴來鑲套屬性

$fontsize： 12px

.speaker

.name

font：

weight： bold

size： $fontsize + 10px

.position

font：

size： $fontsize

在上面的例子中，我們可以看到font屬性后添加了一個雙空格縮進，接下來是weight 和 size，這將會生成font-weight和font-size屬性，如下：

.speaker .name {

font-weight： bold;

font-size： 22px; }

.speaker .position {

font-size： 12px; }

所有的CSS連接符的屬性都支持。使用這種屬性的鑲套方式，可以幫助你有效的組織CSS的結構。

Mixins

Mixins是另外一個SASS的超棒屬性，允許你高效的重用你的一些SASS的代碼片段，甚至可以傳遞參數并且指定缺省的值。

定義mixins只需要使用@mixin關鍵字，然后是你需要使用的代碼部分。如果你需要使用任何的參數，包含一對括號和參數即可。如果你希望使用缺省值，添加一個冒號即可。

包含一個mixin也非常簡答，使用@include關鍵字，后面跟隨著Mixin名稱和任何括號中定義的參數即可。如下：

@mixin border-radius（$amount： 5px）

-moz-border-radius： $amount

-webkit-border-radius： $amount

border-radius： $amount

h1

@include border-radius（2px）

.speaker

@include border-radius

上面的SASS將會被編譯成如下CSS：

h1 {

-moz-border-radius： 2px;

-webkit-border-radius： 2px;

border-radius： 2x; }

.speaker {

-moz-border-radius： 5px;

-webkit-border-radius： 5px;

border-radius： 5px; }

我們指定了h1中的radius，但是對于.speaker我們沒有指定任何內容。所以會使用缺省的5px。

選擇器繼承

選擇器繼承允許你告訴任何選擇器從另外一個選擇器繼承所有的樣式，非常棒的一個特性。

使用它需要指定關鍵字@extend，后面跟隨一個你喜歡繼承的選擇器，然后所有的選擇器的樣式將會被繼承。

h1 border： 4px solid #ff9aa9 .speaker @extend h1 border-width： 2px

以上代碼將會被編譯成如下CSS：

h1， .speaker { border： 4px solid #ff9aa9; } .speaker { border-width： 2px; }

調試SASS

在線調試：你可以不安裝而使用SASS的在線調試來嘗試SASS的超棒特性。

安裝使用：如果你有Ruby gems你只需要簡單運行gem install sass即可。

你可以輸入如下命令：

sass --watch sass_folder:stylesheets_folder

其中sass_folder是你的sass文件的目錄，stylesheets_folder是生成的css的目錄。--watch選項意思是將會關注這個目錄，如果我們修改了任何文件，保存后將會被自動的轉化。

將CSS轉化成SASS

你可以在已經存在的項目中使用sass-convert。

輸入你需要轉換的目錄并且輸入：

sass-convert --from css --to sass -R .

其中-R意思是遞歸， . 意思是當前目錄

關于SCSS(SASSY CSS)

這里我們只介紹了SASS語法。然而，這里有一個叫做SCSS(Sassy CSS)的更新的格式。區別在于Sassy CSS看起來更像我們在CSS中使用的樣子，但是也有類似 variable，mixins，鑲套和選擇器繼承的特性。

總結

分享：經驗分享：網頁設計中的6個小技巧
工作中,網頁設計師經常會遇見這些情況,時間這么短又要出彩,又是要大氣要氣氛\風格不明確很難把握,欄目這么多頁面又這么長,,突然覺得素手無策,怎么辦呢