SASS 好用的性質-(2)

介紹 nested CSS, variables, self &, import, mixin 共5種

一、nested CSS

(1) header 底下可這樣寫，是不是比較好看呀!!

二、variables (變數)

(1) $ 後面可自己設定變數名稱

(2) 下面圖示為 $excolor 為綠色，而這個變數就可拿來做使用。

(3) 這個在大型project就可感覺得出來

三、self &

(1) 為指向自己的意思

(2) 下圖使用 & 並且 :hover ，左側的css 一樣會變成此header。

四、import(分類 & 重複利用)

(1) 創立一個 _header.scss 的程式碼

(2)將我的style.scss 的 header 整段放入_header.scss

(3) 在@import 輸入剛剛的連結，就會發現css也寫入編程了

五、mixin

(1) 它可以設定function，以下我的flexbox為我的函數名稱

(2) 在這裡我想要使用flexbox這個函數，故@include 之後打上我要使用的函數

(3) 故這跟函數很像，所以我也能設定我的變數，變數名稱前面要打上$，以下為使用方法