從 CSS 到 SASS (SCSS) 超入門觀念引導

昨天晚上看完了 Alex大的 「CSS到SASS入門引導」直播

看完之後其實學到不少東西,趁著自己記憶猶新趕快將Alex在 Youtube留存的影片再拿來複習一下

順便紀錄在部落格當中,下次就可以更快速學習。

 

什麼是 SASS ?

不管是 SASS、SCSS、Stylus

相信大家一定都有聽過,但到底是什麼東西?為什麼大家都說好用、方便?

其實這部分需要從最一開始CSS設計開始說起。

相信大家一定都有類似這樣的經驗:

好不容易辛辛苦苦完成一個官方網站,業主看完之後回了一句:「我覺得這些按鈕的顏色都太淺了,我希望再深一點;另外背景色太暗了,我想要亮一點。

好,拿了錢總要做事嘛,花了好多時間把所有按鈕顏色加深、背景加亮。

業主看完之後依然回了一句:「原來加深之後這麼難看喔?那你幫我改回來好了,最好可以深一點點就好。

相信看到這裡的你,拳頭大概已經硬了

這樣改了又改,改了又改,錢也沒變多。

所以這時候就會開始納喊許願:

有沒有可能把程式的概念引入到 CSS 裡面去呢?例如說變數?這樣我們就能夠用變數來取代寫死的顏色,要改的話也很方便,只要改一個地方就好?

這不就是 CSS preprocessor 嗎?

沒錯,CSS preprocessor 就這樣誕生了。

CSS preprocessor,中文就叫做 CSS 「預處理器」,簡單來說就是你可以先用程式寫一些樣式設定的語法,經過這個預處理器之後,就會變成符合標準的 CSS。

有了CSS preprocessor之後,就可以把變數也應用到 CSS 上面,當然程式語法裡面的 IF、迴圈甚至是函式都應有盡有,讓你從設計師開始踏入這條程式的不歸路

而 CSS preprocessor 主要提供了以下幾個功能:

變數 ( Variable )、繼承 ( Extend )、函式 ( Function )、混用 ( Mixin )

那我們就一個一個來介紹怎麼使用吧!

變數 ( Variable )

有了前面慘痛的經驗後,我們體會到,每一次需求一來,改了又改,改了又改,改到最後甚至還忘記哪些地方漏改了,所以我們可以透過 變數,來幫我們做集中的管理

只需要改一次,就可以做到全站統一的效果。

$font_style:Microsoft JhengHei;
$body_color: #E1E1E1

body {
 font-family: $font_style;
 color: $body_color; 
}

就像上方的範例程式碼一樣,我們可以透過變數的方式,來控管字體樣式、背景顏色等等。

今天就算要更換樣式,我也只需要更改上方變數的值,就可以達到全站統一,這就是——變數

繼承 ( Extend )

有了變數之後,我們可以很快速的將每一個我們所需要的樣式,都套用同一個變數來去設定樣式。

可是這樣還有一個問題:「每一次我樣式都還要重複打」

在Alex大的影片當中有提到:通常我們想要將 <a> 變成按鈕的時候,我們都會固定打上以下的程式碼:

a {
  display:block; /*將 a 變成區塊*/ 
  text-decoration:none; /*清除超連結底下的那條底線*/
}

那變成是我們每一次在製作按鈕的時候,都需要先打上這兩行程式碼,之後再根據不同種類的按鈕給予不同的寬度、行高等。

那有沒有什麼方式是可以讓我把固定要寫的樣式集中在一起,未來有需要我只要呼叫就可以? 

那就是——繼承

%aButton {
  display:block;
  text-decoration:none;
}

a {
 @extend %aButton;
 /*透過上面的extend 我就可以直接使用已經寫好的樣式,接下來下方就可以自定義我其他按鈕樣式*/
 width:100%;
 height:20px;
 line-height:20px;

}

所以看到了這裡,我們已經善用了變數以及繼承,讓我們的SCSS可以做好一個集中式的控管,產生出來的CSS也是乾淨利落,一舉兩得。

不過接下來還有一個問題還沒解決。

我們很常會去定義每一種不同的類別的字,他的字型大小。

舉例來說:

上圖是我這一次參加六角學院舉辦的精神時光屋,所提供的一份設計稿。

其中裡面定義了Title、Title2、Title3、Subtitle、paragraph、Logo 的字型大小。

如果每一次都要去定義不同類別的字,會有不同的大小,好像也有點累。

要知道,人類是懶惰的,科技始終來自人的惰性。

所以這時候我們的函式就可以派上用場拉!

函式 ( Function )

我們可以透過函式,來去定義每一個類別的字,他要產生的大小為何。

/*這裡我們用六角學院提供的設計稿來做範例,我們發現他正好是12的倍數*/

$baseSize: 12px;

/*寫一個函數去定義每一種類別的字,它的大小 */
@function font($level: 1) {
  
  @return $baseSize *$level;
}

/*套用函數 font()*/

.Title {
 font-size:font(6);
 font-family: Roboto-Black;
}

.Title2 {
 font-size:font(4);
 font-family: Roboto-Black;
}

.Title3 {
 font-size:font(2);
 font-family: Roboto-Black;
}

.Subtitle {
 font-size:font(2);
 font-family: Roboto-Black;
}

.Paragraph {
 font-size:font(1.3);
 font-family: Roboto-Black;
}

這樣今天我如果我希望整個 baseSize調整成10的倍數,那麼也只要改最上面的$baseSize,就可以達到全站統一的效果。

是不是很簡單很開心?

好的~終於到最後一個重點了。

剛剛前面我們有講到:對於相同的、重複的樣式,我們可以透過 繼承(Extend) 來幫我們完成。

透過SASS,我們可以將共同的樣式寫在一起,之後使用@extend 就可以直接載入樣式:

%aButton {
  display:block;
  text-decoration:none;
}

.successBtn {
 @extend %aButton;
 /*透過上面的extend 我就可以直接使用已經寫好的樣式,接下來下方就可以自定義我其他按鈕樣式*/
 width:100%;
 height:20px;
 line-height:20px;

}

.errorBtn {
 @extend %aButton;
 /*透過上面的extend 我就可以直接使用已經寫好的樣式,接下來下方就可以自定義我其他按鈕樣式*/
 width:80%;
 height:20px;
 line-height:20px;

}

/*產生出來的 CSS */

.successBtn,.errorBtn {
  display:block;
  text-decoration:none;
}
.successBtn {
  width:100%;
  height:20px;
  line-height:20px;
}
.errorBtn {
 width:80%;
 height:20px;
 line-height:20px;
}

但是遇到有字級的這種該怎麼辦?

不同種類的文字,有自己對應的字級大小,也不是像 剛剛 function一樣是走一個倍數成長的概念。

那我要如何針對不同的字級,正確給予不同的大小呢?

那就是使用—— 混用 ( Mixin )

 混用 ( Mixin )

正如剛剛前面所說,針對每一種不同的文字種類,我希望大小要能不一樣(如:Title:36px, Subtitle:28px,content:16px)

但是使用 extend 我們會發現到:「extend會將共同擁有的樣式集中管理」。也就是一個樣式,只會產生出一份 Code

那 Mixin呢?

他會這樣子:

@mixin aButton() {
  display:block;
  text-decoration:none;
}

.successBtn {
 @include aButton();
 /*透過上面的include 我就可以直接使用上方寫好的mixin樣式,產出屬於他自己的Code*/
 width:100%;
 height:20px;
 line-height:20px;

}

.errorBtn {
 @include aButton();
 /*透過上面的include 我就可以直接使用上方寫好的mixin樣式,產出屬於他自己的Code*/
 width:80%;
 height:20px;
 line-height:20px;

}

/*產生出來的 CSS */

.successBtn {
  display:block;
  text-decoration:none;
  width:100%;
  height:20px;
  line-height:20px;
}
.errorBtn {
 display:block;
 text-decoration:none;
 width:80%;
 height:20px;
 line-height:20px;
}

沒錯,它不像extend一樣,會將共同的樣式集中在一起,而是產生出兩份一模一樣的程式碼。

而這一點,正好就可以應用在我們的字級上。

雖然說相對的產生出來的樣式會很大一包,因為每include一次,就會產生一組樣式。

但相對的,就能夠擁有客製化的效果。

我們來看看 Alex大 提供的字級樣式:

$baseSize:14px;
$sizeLevel:2px;

@function font($level: 0) {
  @if $level < 0 {
    $level:0 
  }
  @return $baseSize + $sizeLevel * round($level);
}

@function rhythm($size) {
  @return ceil($size * $paddingLevel / $baseLineSize) * $baseLineSize;
}

@mixin font($level: 1, $line-height: auto) {
  $size: font($level);
  $line: rhythm($size);

  font-size: $size;
  @if $line-height == auto or $line-height < $line {
    line-height: $line;
  } @else {
    line-height: $line-height;
  }
}


.aaa {
  @include font(2);
}

.bbb {
  @include font(4);
}

.ccc {
  @include font(2);
}

/* 產生出來的 CSS */

.aaa {
  font-size:20px;
}

.bbb {
   font-size:28px;
}

.ccc {
  font-size:16px;
}

透過 Mixin 我們就可以將不同類別的字級,給予不同的字體大小,就是這麼簡單。

注意: Mixin 是 跟 extend 做比較,一個是產生多個樣式;一個是將樣式全部集中管理。 請不要將 Minxin與 Function搞混做比較。

看完上面介紹的這幾種SCSS功能,有沒有更加了解呢?希望今天的筆記能帶給你/妳不一樣的 CSS 體驗。

當然,筆者只將 SCSS 的重點功能做一個簡單的介紹,方便當字典快速查閱。

其他精彩內容依然要到 Alex 大的頻道觀賞唷!

以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教:)

有任何家教、案子 或技術相關問題 請都歡迎聯繫我

http://www.zhenghui.idv.tw/