用設計師的角度來看,變數的概念,類似PS裡的智慧型物件,可重複使用。
功能 | 用來儲存值,方便重複利用 |
---|---|
表示方式 | $自己取的變數名 |
資料型態 | Numbers、Strings、Booleans、null 值(視為空值),甚至可以使用 Lists、Maps。
|
BootStrap將SCSS-Variables(變數),獨立出來成立一支_Variables.scss,這的確是非常聰明的做法,當任何一隻SCSS要取用Variables(變數)的時候,都只要填入變數名稱,即可帶入進行運算。
語法範例SCSS
//先定義色碼
//$參數名稱: 定義色碼(數字或單位....上表的8種
$blue: #3495b5;
$pink: #f26b6b;
//再依照屬性做語義定義
$primary: $blue;
$warning: $pink;
h1,
.color-primary {color: $primary;}
.color-warning {color: $warning;}
|
編譯後CSS
h1,
.color-primary { color: #3495b5;}
.color-warning { color: #f26b6b;}
|
不知道完全不會寫程式的人,在看到這樣A=B, B=C,會不會覺得無法理解,甚至覺得直接定義成這樣,不是更簡短。
$primary: #3495b5;
|
但其實如果從元件重複使用的角度來看,這樣的定義方式,的確更具彈性。
不過目前學習到此的心得,SCSS的確比較適合後台大型專案,如果是為期數週的行銷活動,或是頁面較少的網站,用SCSS的確有點殺雞用牛刀的意味。
而且行銷活動大多較為繽紛花俏,如果使用SCSS,可能反而在更改的時候會覺得絆手絆腳。
==========用設計師能理解的模式大概是這樣==========
變數 = PS裡面的智慧型物件,
做一次就好,可重複使用,可放大 / 縮小(拿去乘倍數)
沒有留言:
張貼留言