一、什么是SASS

SASS在CSS的基礎上做了一些擴展，使用SASS你可以使用一些簡單的編程思想進來編寫CSS。比如，SASS中可以定義變量、混合、嵌套以及 函數等功能。只不過SASS不像CSS，可以直接運用到項目中，如果你需要將樣式運用到項目中，有一個步驟是必須經過的——SASS轉譯成CSS。

到目前為止，將SASS轉譯成CSS并不是件困難的事情。可以通過命令行工具或者第三方插件來完成SASS向CSS的轉譯工作，并且轉譯出來的CSS代碼，格式優美，且符合CSS的標準。

SASS發展到今天，變化非常大，功能也非常強。同時他的語法也有所改變。直到寫這篇文章之時，SASS具有兩種語法。新的主要語法（SASS 3）稱作SCSS (Sassy CSS)，同時支持CSS3的語法。也就是說只要CSS3支持的在SCSS中也被支持。SCSS文件擴展名為’.scss’，這也是當下使用最多的。

二、安裝和使用

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

在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，添加環境變量，不然以后使用編譯軟件的時候會提示找不到ruby環境

安裝完ruby之后，在開始菜單中，找到剛才我們安裝的ruby，打開Start Command Prompt with Ruby

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

gem install sass

按回車鍵確認，等待一段時間就會提示你sass安裝成功。最近因為墻的比較厲害，如果你沒有安裝成功，那么請參考下面的淘寶的RubyGems鏡像安裝sass，如果成功則忽略。

如果要安裝beta版本的，可以在命令行中輸入

gem install sass --pre

你還可以從sass的Git repository來安裝，git的命令行為

git clone git://github.com/nex3/sass.git
cd sass
rake install

升級sass版本的命令行為

gem update sass

查看sass版本的命令行為

sass -v

你也可以運行幫助命令行來查看你需要的命令

sass -h

干凈的SASS項目

所謂的“干凈的SASS”項目指的就是不使用其他任何SASS庫，簡單點說，就是項目先在SASS中開發，然后轉譯成CSS。我們來看看這樣的項目是如何創建的。

首先進入到你本地項目目錄下，我的一般放在Sites中，如下所示：

$?cd?Sites

這個時候就進入了項目目庫中：

/Users/airen/Sites

例如我們要創建一個項目，其名稱叫作“mySass”：

$?mkdir?mySass

此時mySass這個項目就在/Users/airen/Sites中了，要是你不放心，你可以使用ls命令查驗一下：

$?ls

為了讓項目規化的更完美一些，我把.scss的SASS文件都放在sass目錄中，而需要轉譯出來的.css文件都將放在css目錄中。因此，我們還需要在mySass項目中創建sass和css兩個文件夾：

$?cd?mySass?$?mkdir?sass?$?mkdir?css

接下來打開你的編輯器，新建一個文件，并且在里面編輯一段簡單的SASS代碼，如下所示：

$main-color:?#ce4dd6;?$style:?solid;?.navbar?{?border-bottom:?{?color:?$main-color;?style:?$style;?}?}?a?{?color:?$main-color;?&:hover?{?border-bottom:?1px?$style;?}?}

并且將此文件命名為style.scss保存在mySass/sass下。

Compass創建SASS項目

上面簡單的介紹了一個凈身的SASS項目，簡單就不用說了。接下來我們一起看看如何通過Compass來創建一個SASS項目。

同樣打開你的命令終端，并且進入到Sites目錄下。例如我們要創建一個compassSass的項目放在Sites目錄下，我們就可以這樣做：

$?compass?create?compassSass

這句命令一完，你的終端中會出現很多信息，首先會告訴你創建了一個compassSass項目，并且自動在這個項目中創建了哪些文件：

+compassSass?|--+sass?|-----screen.scss?|-----print.scss?|-----ie.scss?|--+stylesheets?|-----ie.css?|-----print.css?|-----screen.css?|---config.rb

除了創建了相關文件之外，還會告訴你一些其他的信息。其中有一個config.rb文件非常重要，其主要是用來配置Compass創建的項目運行環境。所以在修改這個配置文件的時候，大家需要小心處理。

#?Require?any?additional?compass?plugins?here.#?Set?this?to?the?root?of?your?project?when?deployed: http_path?=?"/" css_dir?=?"stylesheets" sass_dir?=?"sass" p_w_picpaths_dir?=?"p_w_picpaths" javascripts_dir?=?"javascripts"#?You?can?select?your?preferred?output?style?here?(can?be?overridden?via?the?command?line): #?output_style?=?:expanded?or?:nested?or?:compact?or?:compressed#?To?enable?relative?paths?to?assets?via?compass?helper?functions.?Uncomment: #?relative_assets?=?true#?To?disable?debugging?comments?that?display?the?original?location?of?your?selectors.?Uncomment: #?line_comments?=?false#?If?you?prefer?the?indented?syntax,?you?might?want?to?regenerate?this #?project?again?passing?--syntax?sass,?or?you?can?uncomment?this: #?preferred_syntax?=?:sass #?and?then?run: #?sass-convert?-R?--from?scss?--to?sass?sass?scss?&&?rm?-rf?sass?&&?mv?scss?sass

?

這樣你就可以在sass目錄中創建你需要的.scss文件，你也可以直接在screen.scss文件中編輯SASS代碼。例如此處，將上例中style.scss的SASS代碼放置在screen.scss中。

/*?Welcome?to?Compass.?*?In?this?file?you?should?write?your?main?styles.?(or?centralize?your?imports)?*?Import?this?file?using?the?following?HTML?or?equivalent:?*?<link?href="/stylesheets/screen.css"?media="screen,?projection"?rel="stylesheet"?type="text/css"?/>?*/?@import?"compass/reset";?$main-color:?#ce4dd6;?$style:?solid;?.navbar?{?border-bottom:?{?color:?$main-color;?style:?$style;?}?}?a?{?color:?$main-color;?&:hover?{?border-bottom:?1px?$style;?}?}

在Compass創建的項目中，會自動通過@import導入樣式

@import?"compass/reset";

另外，如果你不想使用SCSS，只想著舊人，不愛新歡，那么你可以在后面添加一個參數-x sass：

$?compass?create?compassSass?-x?sass

SASS轉譯成CSS

既然.scss能通過sass命令轉譯成.css樣式

$?sass sass/style.scss css/style.css

CSS轉譯成SASS

既然.scss能通過sass命令轉譯成.css樣式，那么我們是否可以將.css轉譯成.scss呢？事實是可以的，我們可以通過sass-convert命令：

$ sass-convert css/style.css style.scss

sass-convert除了可以將.css樣式轉譯成.scss文件之外，還可以通過這個命令對.sass和.scss之間樣式轉譯。

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

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

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

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

　　*?--style compressed：壓縮后的css代碼。

舉例

sass --watch sass/test.scss:css/test.css --style compressed

--watch 可以讓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?{h1?{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%)??//?#d6d65cdarken(#cc3,?10%)??//??#a3a329grayscale(#cc3)?//?#808080complement(#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-p_w_picpath:?url("/p_w_picpath/#{$member}.jpg");}}

5.3 自定義函數

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

　　@function?double($n)?{　　　　@return?$n?*?2;　}#sidebar?{　　　width:?double(5px);　　}

結束

轉載于:https://blog.51cto.com/xhtml/1585028

總結

以上是生活随笔為你收集整理的sass 安装配置和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。