推薦：關(guān)于響應(yīng)式頁面
眾所周知，所謂響應(yīng)式頁面，就是能夠用一套樣式，使你的頁面能夠在不同分辨率的屏幕下都有很好的表現(xiàn)形式。響應(yīng)式Web設(shè)計(jì)，這個(gè)概念是Ethan Marctte 在A List Apart 發(fā)表的

什么是SASS?

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

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

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

看看下面這個(gè)簡單的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使用雙空格的縮進(jìn)來定義代碼鑲套結(jié)構(gòu)。這里你可以大體的了解SASS的樣子，下面我們將介紹為什么SASS如此的棒！

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

變量

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

$red： #FF4848

當(dāng)然，在SASS中有一些內(nèi)建的功能，例如，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

鑲套

兩種類型的鑲套：

選擇器鑲套

這是第一個(gè)鑲套類型。鑲套類似我們在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; }

屬性鑲套

這是第二個(gè)鑲套的類型：

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

$fontsize： 12px

.speaker

.name

font：

weight： bold

size： $fontsize + 10px

.position

font：

size： $fontsize

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

.speaker .name {

font-weight： bold;

font-size： 22px; }

.speaker .position {

font-size： 12px; }

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

Mixins

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

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

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

@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將會(huì)被編譯成如下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我們沒有指定任何內(nèi)容。所以會(huì)使用缺省的5px。

選擇器繼承

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

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

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

以上代碼將會(huì)被編譯成如下CSS：

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

調(diào)試SASS

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

安裝使用：如果你有Ruby gems你只需要簡單運(yùn)行g(shù)em install sass即可。

你可以輸入如下命令：

sass --watch sass_folder:stylesheets_folder

其中sass_folder是你的sass文件的目錄，stylesheets_folder是生成的css的目錄。--watch選項(xiàng)意思是將會(huì)關(guān)注這個(gè)目錄，如果我們修改了任何文件，保存后將會(huì)被自動(dòng)的轉(zhuǎn)化。

將CSS轉(zhuǎn)化成SASS

你可以在已經(jīng)存在的項(xiàng)目中使用sass-convert。

輸入你需要轉(zhuǎn)換的目錄并且輸入：

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

其中-R意思是遞歸， . 意思是當(dāng)前目錄

關(guān)于SCSS(SASSY CSS)

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

總結(jié)

分享：經(jīng)驗(yàn)分享：網(wǎng)頁設(shè)計(jì)中的6個(gè)小技巧
工作中,網(wǎng)頁設(shè)計(jì)師經(jīng)常會(huì)遇見這些情況,時(shí)間這么短又要出彩,又是要大氣要?dú)夥誠風(fēng)格不明確很難把握,欄目這么多頁面又這么長,,突然覺得素手無策,怎么辦呢