sass用法

可能剛開始咱們學習前端的時候都習慣用html+css。來作網頁，可是咱們發現css有不少重複的代碼或者是你要改裏面的圖片或者文字還有去誒個的找很麻煩，因此咱們就用sass來簡化它。

首先咱們須要安裝一個koala軟件它是編譯asaa代碼來生成css代碼，剛開始我坐起來很不習慣，可是它確實方便了不少，也提升了你作網頁的效率。

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

列：body

       background: #eee

       font-size:12px

p

       background: #0982c1

//文件後綴名爲scss的語法

body

{ background: #eee; font-size:12px;

}

p

{ background: #0982c1;

}

 ！defanlt 默認值，在外面能夠隨便改變這個默認值
能夠任何地方加上變量須要加上#號{}號爲特殊變量

多值變量，能夠1個變量多個值
列：$num:1px 2px 3px 4px
    margin:nth($num,1);
nth做用域（根據你的下標值獲取某個元素）

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

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

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

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

 

固然這幾個只是我說的幾個方法而已，他還有不少方法，這幾個是咱們最經常使用的。能夠測試一下