2018年8月18日 星期六

【SCSS】2.5 Variables(變數)

用設計師的角度來看,變數的概念,類似PS裡的智慧型物件,可重複使用。


功能 用來儲存值,方便重複利用
表示方式 $自己取的變數名
資料型態 Numbers、Strings、Booleans、null 值(視為空值),甚至可以使用 Lists、Maps。
  1. 數字,含小數(有單位或無單位皆可)
  2. 字串,如 "String" , 'String' , String 3 種皆可
  3. 顏色,如 blue , #0a43f9 , rgba(255, 0, 0, 0.5) 等
  4. 布林值(Booleans): true , false
  5. 空值 null
  6. 串列,例如 $font-list: Helvetica, Arial, sans-serif; ,以空格或逗號分隔的一連串的值
  7. 鍵值映對(maps) ,例如: $map: (key1: value1, key2: value2, key3: value3);
  8. 函數參照(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裡面的智慧型物件,
做一次就好,可重複使用,可放大 / 縮小(拿去乘倍數)

沒有留言: