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

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

3 thoughts on “SASS基本使用教學:變數、函式、繼承、巢狀撰寫”

  1. Nesting 一段裡的「例如編譯前的table.hl{}這段,裡面有一個td.ln{},編譯後變成table.hl td.ln{},這就是所謂繼承了上一個元素」有誤。

    在 CSS 裡 table.hl 與 td.ln 是沒有繼承關係的,這個表示法只是為了要指定 table.hl 下面的 td.ln 元素而已,詳見 CSS selectors。

  2. 您好,想請問一下
    我利用cmd下指令之後只能夠編譯Scss的語法
    若我是使用Sass的語法的話,下一樣的指令會給我錯誤訊息如下:
    Error: Invalid CSS after “font-size:”: expected pseudoclass or pseudoelement, was “$text”
    on line 3 of sass_test/style.sass
    試過很多方式不知如何解決,不知您是否知道如何解決此問題,謝謝 !

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料