sass使用方式和常見語法總結

巢狀mixin（混合）

擴充套件/繼承

函式匯入

sass介紹

// scss .container .aside article // css .container .aside article

必須以$開頭

// scss
$font-size
:16px;
div// css
div

// scss $linkcolor :#ffffff #6fb6fd; div// css

div

一般我們都將變數當做屬性值來使用，但是也有極特殊情況下我們會將變數當做選擇器或者屬性名使用。這時候，我們必須以#的方式來使用變數名

// scss
$name
:top;
.header-#
:1px solid #b6b6b6;
}// css
.header-top

多值變數：代表的是多維資料的儲存方式，換句話說，list相當於js中的陣列。list資料一般用空格分割，但是也可以用逗號或者小括號分割多個值

// scss
$list
:(20px 40px)
(30px 20px 10)
(4px 3px 2px 5px)
;//相當於多維陣列
.main
// css
.main

map的資料是以鍵值對形式出現的，相當於js中的物件，可以結合each完成迴圈渲染

// scss
$headers:(
h1:20px,h2
:30px,h3
:40px)
;@each $key, $value in $headers
}// css
h1h2
h3

sass可以進行選擇器的巢狀，表示層級關係，看起來很有*格

// scssul}
}// css
ulul li
ul li>a

// scss
.main
}// css
.main

// scss
$color
: #ddd #e00;a}
// css
aa:hover

// scss .header }// css .header .header-top

sass中使用@mixin宣告混合，可以傳遞引數，引數名以$符號開始，多個引數以逗號分開，也可以給引數設定預設值。宣告的@mixin通過@include來呼叫。sass中可用mixin定義一些**片段，且可傳引數，方便日後根據需求呼叫。從此處理css3的字首相容輕鬆便捷。

// scss @mixin margincenter .container // css .container

// scss // 1000px為引數預設值 @mixin margincenter ($width :1000px) .container .inner // css .container .inner

sass可通過@extend來實現**組合宣告，使**更加優越簡潔

// scss .active .success // css .active, .success .success

sass定義了很多函式可供使用，當然你也可以自己定義函式，以@fuction開始。實際專案中我們使用最多的應該是顏色函式，而顏色函式中又以lighten減淡和darken加深為最，其呼叫方法為lighten(col

,color,

color,

amount)和darken(col

,color,

color,

amount)，它們的第乙個引數都是顏色值，第二個引數都是百分比。

// scss
$basefontsize
:10px;
$gray
:#ccc;
@function
pxtorem
($px)
html
body
.test
// css
html
body
.test

sass中如匯入其他sass檔案，最後編譯為乙個css檔案，優於純css的@import

@import
"reset"
;

sass是世界上最成熟、穩定和強大的專業級css擴充套件語言?。

sass是乙個將指令碼解析成css的指令碼語言，即sassscript，有很多好用的語法可以幫助我們減少css**的冗餘。而且他完全相容所有版本的css，也就是說在sass裡可以直接使用css。對於使用熟練的人來說它可以極大地?提高程式設計效率。

sass是乙個基於ruby環境的可程式設計的css，不能直接用於頁面，他需要編譯成css以後在html檔案中引入使用。

sass有兩種字尾名檔案：一種字尾名為sass，不使用大括號和分號；另一種就是scss檔案，這種和我們平時寫的css檔案格式差不多，使用大括號和分號。本篇文章所有sass檔案都指字尾名為scss的檔案。在此也建議使用字尾名為scss的檔案，以避免sass字尾名的嚴格格式要求報錯。