SASS基本使用教學：變數、函式、繼承、巢狀撰寫

在前一篇文章《當CSS遇上變數、函式，就變成SASS啦～ SASS安裝教學》有教到要如何安裝SASS，而在這篇文章中，則是要教大家如何使用SASS ，這篇文章會提到SASS裡面的四個特色：變數（Variables）、函式（Mixin）、繼承（extend）、巢狀撰寫（Nesting）

不過在介紹四大特色之前，要先教大家如何編譯SASS，SASS提供兩種編譯方式，一種是手動編譯，一種是監視編譯(–watch)，手動編譯就是當你撰寫好CSS時下指令去做編譯，監視編譯則是你指令一個目錄，當此目錄裡面的*.scss檔案有改變時（新增、覆寫等等），就會自動去做編譯的動作，我個人推薦用監視的方式做編譯，這樣子做事情比較方便XD，所以這邊就只講監視編譯的方式…ㄎ

SASS編譯

建立一個scss資料夾還有一個css資料夾

mkdir scss css

然後在scss資料夾裡面建立一個檔案：「style.scss」，注意雖然這程式叫做SASS，但是他的附檔名是scss

cd scss

touch style.scss

style.scss的內容，請輸入下面的範例程式碼：

$text:15px;
body{
	font-size:$text;
}

然後回到上一層資料夾，就可以開始做編譯囉～

cd ..

sass –watch scss:css

sass –watch scss:css這句語法的意思就是監視scss這個資料夾，然後編譯的結果存到css這個資料夾的意思～ 他會一直監視scss這個資料夾，直到你把程式終止掉

變數Variables

變數要使用前，要先宣告這個變數的存在，並且指定他的值，之後就可以在CSS裡面直接使用變數

另外要注意在SASS裡面，變數的命名第一個字一定要是$開頭

$text:15px;

body{
	font-size:$text;
}
#top{
	width:$text;
}

上面這段語法的意思就是宣告一個$text變數，裡面儲存15px這個值，之後font-size就直接使用$text這個變數

編譯的結果：

body{
	font-size:15px;
}
#top{
	width:15px;
}

$text的值會被帶入剛剛設定的地方

這就是變數的運用，另外還可以搭配運算子去做加減乘除的變化，例如：

$width:500px;

#content{
	width:$width;
	height:$width*2;
	font-size:$width/10;
}

編譯後的結果：

#content{
	width:500px;
	height:1000px;
	font-size:50px;
}

函式Mixin

SASS裡面可以使用函式，而且可以傳入值，這是一個很棒的設計，可以讓你省掉很多重複的CSS的撰寫

首先要先宣告函式的存在，然後再去引用函式，請參考下面的範例：

@mixin border-radius($angle){
	border-radius:$angle;
	-webkit-border-radius:$angle;
	-moz-border-radius:$angle;
}

上面的語法就是宣告一個函式叫做border-radius，@mixin是宣告函式的前置詞，border-radius則是函式名稱，後面的$angle則是傳入的參數，如果你要傳入多個參數可以用逗號分開，然後下面那三行就是內容，注意函式的宣告建議放在CSS的最上面

要使用border-radius這個函式，必須要使用@include，語法是：

@include mixin_name(args);

• mixin_name的部份改成函式名稱
• args則是相關的參數

#box{
	@include border-radius(10px);
}

編譯後的結果，會變成：

#box{
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}

另外Mixin不只是可以填CSS的屬性（也就是font-size、border、text-align….. 這些）進去，也可以填一段完整的CSS語法進去，例如：

@mixin border-radius($angle){
	#box{
		border-radius:10px;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
	}
}

@include border-radius(10px);

編譯後的結果會變成

#box {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; }

注意，整個box{}都被帶進去了，這就是我說的可以帶入整個CSS語法而不單只是屬性

繼承Extend

SASS裡面的繼承其實就跟物件導向裡面說的繼承很像，他可以繼承你指定的css語法的屬性，例如：

.ext{
	font-size:10px;
	width:400px;
}
body{
	@extend .ext;
	height:600px;
}

編譯後：

.ext, body {
  font-size: 10px;
  width: 400px; }

body {
  height: 600px; }

body會「繼承」.ext的屬性設定，這跟Mixin有點像但是不太一樣，Mixin可以傳值進去，而且可以用整段CSS當做函式的內容，但是繼承不行，繼承只能去取得指定元素的屬性，然後套用到自己身上，例如上面的範例就是取得.ext的屬性，然後套用到body上面

語法大致上是：「@extend name」

name的部份就是你要繼承的元素的名稱

巢狀撰寫Nesting

巢狀撰寫可以讓你的CSS易讀性更高，不過要熟悉這種寫法就是了

範例：（取用自SASS官網）

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

編譯後：

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

仔細去觀察，你會發現他直接繼承了上一層的元素，例如編譯前的table.hl{}這段，裡面有一個td.ln{}，編譯後變成table.hl td.ln{}，這就是所謂繼承了上一個元素，要注意編譯後是變成table.hl td.ln，而不是變成table.hl,td.ln，中間是空白而不是逗號，這兩種有很大的差別

table.hl td.ln的意思是說table.hl裡面的td.ln的意思，但是table.hl,td.ln則是說table.hl跟td.ln這兩個元素都要套用屬性，兩個是不同的要注意！！

還有

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

這部份則會變成

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

也就是說font底下的family、weight、size的意思，換句話說：

body{
	text:{
		align:center;
		indent:10px;
		transform:none;
	}
}

會變成：

body {
  text-align: center;
  text-indent: 10px;
  text-transform: none; }

大概就是這個意思了，如果你沒學過寫程式，這部份可能要自己去領悟一下！