sass

sass是一種CSS的開發工具，提供了許多便利的寫法，大大節省了設計者的時間，使得CSS的開發，變得簡單和可維護。

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; }

條件語句

@if能夠用來判斷：

p {

@if 1 + 1 == 2 { border: 1px solid; }

@if 5 < 3 { border: 2px dotted; }

}

配套的還有@else命令：

@if lightness($color) > 30% {

 

} @else {

 

}

 循環語句

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-image: url("/image/#{$member}.jpg");

}

}

自定義函數

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

@function double($n) {

@return $n * 2;

}

#sidebar {

width: double(5px);

}

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

@import("path/filename.scss");

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

@import "foo.css";

 顏色函數

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

lighten(#cc3, 10%) // #d6d65c

darken(#cc3, 10%) // #a3a329

grayscale(#cc3) // #808080

complement(#cc3) // #33c