HTML5學習之對SASS工具的應用

對於大部分前端程序員來說，最痛苦的是莫過於寫樣式(css)了,試想一下，當做了 一個炫酷插件，或者實現了多牛逼的功能，可是沒有完美樣式，是不被人寵幸的，巨了解，我身邊絕大部分的人都及其不喜歡寫樣式，一方面：嵌套多層元素時，那選擇器的寫法可不建議簡寫，畢竟涉及到樣式覆蓋與權重的問題;第二方面：對於某些程序員來說這與體力活不差一二。可是在我看來，一個優秀的，吸引人的web，樣式的成分還是還是處於上游的，試想一下，一個web，沒有「華麗」的表面，怎麼吸引人的注意?我始終相信這樣一句話「天無絕程序員之路」，這時候sass就拯救了我們

何為SASS

SASS是一個成熟、穩定、強大的 CSS 擴展語言解析器，提供變數、嵌套、混合、繼承等特性，使用起來可以有效節儉時間，效率更高，維護更便利

sass安裝的兩種不同方法

gulp-ruby-sass是調用sass，所以需要ruby環境，需要生成臨時目錄和臨時文件。

gulp-sass是調用node-sass,有node.js環境就夠了，編譯過程不需要臨時目錄和文件，直接通過buffer內容轉換。

1，這裡我主要介紹第二種方法首先需要在node環境下安裝gulp插件

(gulp是當下最流行的自動化工具，可以自動化完成我們開發過程中大量的重複工作)

2，假設安裝好gulp後，就可以安裝sass(npm install gulp-sass --save-dev)

3，這裡需要新建gulpfile.js文件(這是gu lp的配置文件，放在項目根目錄)

4，接下來就可以寫我們的sass了

注釋(與js相同)

單行注釋 //單行注釋不會存在css文件

多行注釋 /*多行注釋會存在css文件中*/

變數

1, sass的變數名必須使$開頭，後面接變數名(如 $color:#58bc58);好處不言而喻，相同屬性可以直接使用變數名(如 color:$color / background-color:$color)

2,當然說到變數肯定少不了全局變數，局部變數

(寫在選擇器外的稱全局變數，選擇器外稱局部變數，如果希望局部變數能覆蓋全局變數，只需加上

(!glogal)=>$color:#red !global )

3,引用外部文件的變數，同名變數需要覆蓋只需講要覆蓋的變數後加 !default =>$color:pink; !default

4,多值變數(list類型=>可以理解成js中的數組，map類型=>可以理解為js中的對象)

list : $pd : 5px 10px 15px 20px;=> div{ padding : $pd ;} span{ border : nth( $pd , 2 ) ;}

map : $head : ( h1 : 24px , h2 : 18px , h3 : 16px ); => h1{ map-get( $head , h1) ;}

嵌套(重要)

這個就很重要了，css中寫重複的東西是非常惱火的，假設父元素裡面有多個子元素，則父元素的id就要重複好多次了

如：#content .nav

#content .nav p { color : red };

#content span { border-top : ($pd,2) }

sass寫法

有了嵌套後就大大的提升開發者的效率了(在嵌套中用&表示父元素選擇器)

繼承(@extend)

(顧名思義就是繼承同種樣式，使用簡單，使代碼變得簡潔)

1，繼承一般樣式 @extend h1

2,站位選擇器 % (編譯後，符號不存在css中)，在我看來繼承跟變數的是使用某方面還是一方的

函數(針對數字方面提供一系列函數功能)

常用函數

· percentage($value)：將一個不帶單位的數轉換成百分比值;

· round($value)：將數值四捨五入，轉換成一個最接近的整數;

· ceil($value)：將大於自己的小數轉換成下一位整數;

· floor($value)：將一個數去除他的小數部分;

· abs($value)：返回一個數的絕對值;

· min($numbers…)：找出幾個數值之間的最小值;

· max($numbers…)：找出幾個數值之間的最大值。

· lighten($color,$percent) $color顏色值，$percent百分比

· darken($color,$num) $num:0-100

自定義函數(@function函數名)

運算

sass具有運算的特性，可以對數值型的Value(如：數字、顏色、變數等)進行加減乘除四則運算。請注意運算符前後請留一個空格，不然會出錯。

循環(重要)

像以上案例，循環就可以給4個li加上不同的背景圖片，有效的減少了代碼的複寫

導入(@import)

1,假設一個web，不同的頁面存在重複樣式有很多的時候，我們可以將其提取出來，存放在公共的sass文件中(如test.sass)，(包括需要繼承的樣式等)，@import "test" ;

2,大部分web中，header，footer內容都一樣，就可以同導入的方式完成了

來源：千鋒HTML5

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！