喵娘兒, 在PG世界裡的UI: 【SCSS】2.5 Variables(變數)

2018年8月18日星期六

功能	用來儲存值，方便重複利用
表示方式	$自己取的變數名
資料型態	Numbers、Strings、Booleans、null 值（視為空值），甚至可以使用 Lists、Maps。數字，含小數（有單位或無單位皆可）字串，如 "String" , 'String' , String 3 種皆可顏色，如 blue , #0a43f9 , rgba(255, 0, 0, 0.5) 等布林值（Booleans）： true , false 空值 null 串列，例如 $font-list: Helvetica, Arial, sans-serif; ，以空格或逗號分隔的一連串的值鍵值映對(maps) ，例如： $map: (key1: value1, key2: value2, key3: value3); 函數參照(function references)

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裡面的智慧型物件，

做一次就好，可重複使用，可放大 / 縮小（拿去乘倍數）

2018年8月18日 星期六