【SCSS】2.5 Variables(變數)

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

功能	用來儲存值，方便重複利用
表示方式	$自己取的變數名
資料型態	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】2.4 @for(迴圈)

迴圈就是重複的執行的意思。迴圈包迴圈是可以的，無線迴圈是不道德的。
在此懇求說話無線迴圈的人（例如我媽)，求你行行好...改成有限迴圈，而且i < 3，口 以嗎？

這單純是為了寫範例而做的，真正在BootStrap裡的灰階，並不是這樣做的。下方範例是字體顏色+背景為rgba，  ($i)   也可以直接寫成  $i  ， 不過工程師說，用()包起來是好習慣，那就醬

語法範例SCSS

//gray字體顏色+背景 @for   $i from 1 through 9 { //從 1 到 9 共執行 9 次。   .color-gray#{$i}00 {     color: rgba( 0,0,0,($i) /10 ); } .bg-gray#{$i}00 {   background-color: rgba( 0,0,0,($i) /10 ); }