SASS對css的管理

1、SASS簡介

SASS是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。 本文總結了SASS的主要用法。個人目標是，有了這篇文章，平常的通常使用就不須要去看官方文檔了。

2、安裝和使用

一、 安裝

• SASS是Ruby語言寫的，可是二者的語法沒有關係。不懂Ruby，照樣使用。只是必須先安裝Ruby，而後再安裝SASS。
• window下面安裝ruby：https://www.ruby-lang.org/en/documentation/installation/#homebrew
• 下載rubyinstaller.exe 安裝就能夠了。
• 在安裝的時候，請勾選Add Ruby executables to your PATH這個選項，添加環境變量，否則之後使用編譯軟件的時候會提示找不到ruby環境

　　

• 安裝完ruby以後，在開始菜單中，找到剛纔咱們安裝的ruby，打開Start Command Prompt with 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

• 淘寶RubyGems鏡像安裝 sass

• 因爲國內網絡緣由（你懂的），致使 rubygems.org 存放在 Amazon S3 上面的資源文件間歇性鏈接失敗。這時候咱們能夠經過gem sources命令來配置源，先移除默認的https://rubygems.org源，而後添加淘寶的源https://ruby.taobao.org/，而後查看下當前使用的源是哪一個，若是是淘寶的，則表示能夠輸入sass安裝命令gem install sass了，關於經常使用gem source命令可參看：經常使用的gem source

• $ gem sources --remove https://rubygems.org/
• $ gem sources -a https://ruby.taobao.org/

• $ gem sources -l

• *** CURRENT SOURCES *** 

• $ gem install sass
• # 請確保只有 ruby.taobao.org
• https://ruby.taobao.org

• mac下面安裝ruby

　　

　　能夠看到版本號，說明安裝成功！

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

　　

二、使用

• SASS文件就是普通的文本文件，裏面能夠直接使用CSS語法。文件後綴名是.scss，意思爲Sassy CSS。 下面的命令，能夠在屏幕上顯示.scss文件轉化的css代碼。（假設文件名爲test。）

　　

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

　　

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

　　

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

　　

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

　　

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

3、基本用法

sass有兩種後綴名文件：一種後綴名爲sass，不使用大括號和分號；另外一種就是咱們這裏使用的scss文件，這種和咱們平時寫的css文件格式差很少，使用大括號和分號。而本教程中所說的全部sass文件都指後綴名爲scss的文件。在此也建議使用後綴名爲scss的文件，以免sass後綴名的嚴格格式要求報錯。

//文件後綴名爲sass的語法
body background: #eee font-size:12px p background: #0982c1 //文件後綴名爲scss的語法  
body { background: #eee; font-size:12px; } p{ background: #0982c1; }

一、 變量

SASS容許使用變量，全部變量以$開頭，後面緊跟變量名，而變量值和變量名之間就須要使用冒號(:)分隔開（就像CSS屬性設置同樣），若是值後面加上!default則表示默認值。

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

二、 計算功能

sass具備運算的特性，能夠對數值型的Value(如：數字、顏色、變量等)進行加減乘除四則運算。請注意運算符先後請留一個空格，否則會出錯。

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

三、 嵌套

sass的嵌套包括兩種：一種是選擇器的嵌套；另外一種是屬性的嵌套。咱們通常提及或用到的都是選擇器的嵌套。

選擇器嵌套

所謂選擇器嵌套指的是在一個選擇器中嵌套另外一個選擇器來實現繼承，從而加強了sass文件的結構性和可讀性。

在選擇器嵌套中，可使用&表示父元素選擇器

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

在嵌套的代碼塊內，可使用$引用父元素。好比a:hover僞類，能夠寫成：

四、 註釋

SASS共有兩種註釋風格。

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

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

在/*後面加一個感嘆號，表示這是"重要註釋"。即便是壓縮模式編譯，也會保留這行註釋，一般能夠用於聲明版權信息。

4、代碼的重用

一、 繼承

sass中，選擇器繼承可讓選擇器繼承另外一個選擇器的全部樣式，並聯合聲明。使用選擇器的繼承，要使用關鍵詞@extend，後面緊跟須要繼承的選擇器。

SASS容許一個選擇器，繼承另外一個選擇器。好比，現有class1：

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

二、 Mixin混合

sass中使用@mixin聲明混合，能夠傳遞參數，參數名以$符號開始，多個參數以逗號分開，也能夠給參數設置默認值。聲明的@mixin經過@include來調用。

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

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

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

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

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

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

使用的時候，能夠像下面這樣調用：

三、 顏色函數

sass定義了不少函數可供使用，固然你也能夠本身定義函數，以@fuction開始。sass的官方函數連接爲：sass fuction，實際項目中咱們使用最多的應該是顏色函數，而顏色函數中又以lighten減淡和darken加深爲最，其調用方法爲lighten($color,$amount)和darken($color,$amount)，它們的第一個參數都是顏色值，第二個參數都是百分比。

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

四、 插入文件

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

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

5、高級用法

1 、條件語句

@if可一個條件單獨使用，也能夠和@else結合多條件使用

二、 循環語句

SASS支持for循環：

• for循環有兩種形式，分別爲：@for $var from <start> through <end>和@for $var from <start> to <end>。
• $i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

也支持while循環：

each命令，做用與for相似：

語法爲：@each $var in <list or map>。其中$var表示變量，而list和map表示list類型數據和map類型數據。sass 3.3.0新加入了多字段循環和map數據循環。

三、 自定義函數

SASS容許用戶編寫本身的函數。

四、三目判斷

語法爲：if($condition, $if_true, $if_false) 。三個參數分別表示：條件，條件爲真的值，條件爲假的值。

if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px

要是您有什麼問題，能夠留言交流！