sass

Scss旅程(8) – 格式、變數與繼承

今天的旅程有三個部分要介紹,分別是:

格式:除了之前說過的「巢狀結構」外,Scss還有某些撰寫的「規矩」需要注意。

變數:variable,寫過javascript的話對於這個單字應該不陌生,在scss裡善用變數,對於網站的更新(特別是那個顏色啊字型啊)會更加的輕鬆與快速。

繼承:extend,讓數個class或id可以「共用設定」的方法。

1.格式

首先最重要的,就是Sass 跟Scss 之間些微不同的格式。

前面有提過,Sass在分辨元素層級,是使用斷行+縮排,無須加上常見的上下大括號。而Scss則是需要加上上下大括號,否則算格式錯誤。

站在要可以融合css的點來說,建議是使用Scss,而非Sass。以下跟之後的程式都會以Scss進行示範喔。

format-1
[圖一]Scss格式
這張圖大致說明了兩個Scss要注意的格式,或者是說寫法:巢狀結構與父元素。

1.1.巢狀結構

圖片裡左側的Scss語法,form所屬的大括號裡又存在好幾層大括號,這種層層包的寫法就是「巢狀結構」。Sass / Scss 相較於 Css最大的優勢就是這種層層包的巢狀結構,對結構而言一目了然(這很重要)。

當元素裡相關的 class 或 id 變多時,這種巢狀結構對於工程師們在尋找「這個元素在第幾行」或「這個元素的父元素到底是誰(當css效果被干擾時)」時顯得有相當大的優勢。

1.2.父元素

繼續那張圖,可以看到左側的Scss的第二行:

  1. & input[type=text]{

再對照右側的css:

  1. form input[type=text] {

各位有發現什麼嗎(・ω´・ )?是的!可以看到左側 Scss 區塊有個「&」符號,當Scss 編譯成 Css時,「&」變成了「form」。

這個「&」代表的就是父元素!在範例中,「&」代表的就是上一層的「form」。而「&」跟後面的元素接的是空白還是大於符號,這邊的規則就跟Css一樣,看是只要是底下層級的都套用,還是強制下一層的元素。

剛開始接觸Scss時可能會不小心忘記要寫「&」,雖然編譯後可能不會出錯,但還是請保持加上「&」的習慣喔。

2.變數

變數是Sass/Scss極具特色的一個要素,針對常用的數值,比如說網站的主色調、連結的顏色等等,可以用一個變數儲存這筆資料,接著重複使用這個變數,甚至是對此變數進行運算或是調整(改顏色之類的)。

如此一來當網站需要進行改版(節慶、週年慶或者是活動時),工程師只需要修改變數的數值,接著所有使用該變數元素都會套用這個新的數值。

恩,真是個好東西啊(遠望

使用的部分,變數是以「$」開頭,賦予值則是用冒號,而非常見的等號,這邊剛開始很容易寫錯,還請多注意:

var-1
[圖二]Scss變數

3.繼承(extend)

extend-1
[圖三]Scss extend
使用方法:@extend (這邊是要被繼承的class或id)。像是這次的示範圖裡的:

  1. @extended .btn;

可以看到左邊使用繼承的「.submit-btn」的class 編譯成Css後的狀態,它們合併了!

像這種可能會被重複使用的樣式(transition、按鈕等等),根據工程師的習慣可能會分成兩種寫法。

第一種就是使用繼承後的效果(請參考圖片右半部),這樣的寫法才是正確的寫法。除了程式整齊外,在減少Css檔案容量上也有一定的幫助。

第二種可能的寫法則是,在使用了class「btn」的元素上再加上一個class,接著使用那個class的設定「強行蓋過btn的設定(像是使用!important)」,這方法也行,沒有絕對的對錯,只有適不適合該專案而已。

說實話兩種寫法某貓都寫過,但若各位決定使用Scss或Sass,也打算使用第一種寫法的話,可以試試這個繼承的寫法喔。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.