變數 Variables (1)

• 指一個抽象的儲存位址，含有了被稱為一個值的某種已知或未知的資訊量，並且配對了關聯的符號名稱
• Sass/SCSS允許使用變數來儲存重複使用的CSS值
• 以 $ 錢字號來宣告變數
• 資料型態有:

1. 數值 Number

2. 字串 String

3. 顏色 Color

4. 陣列 List

5. 地圖 Maps

6. 布林 Boolean

7. 空值 Null

8. 函式參考 Function references

9. 數值

例子 :
$base-padding: 10px; // 定義變數 $base-padding，表示基礎內邊距為 10px
$double-padding: $base-padding * 2; // 定義變數 $double-padding，將基礎內邊距乘以 2，結果為 20px

.container {
padding: $double-padding; // 使用 $double-padding，設置 .container 的內邊距為 20px
margin-top: 15px + 5px; // 直接進行運算，將 margin-top 設置為 20px
}

編譯後 :
.container {
padding: 20px; /* 內邊距設置為 20px，這是 $double-padding 計算結果 /
margin-top: 20px; / margin-top 直接計算為 20px */
}
map-get() 函數從 $theme-colors 地圖中提取顏色
background-color 變成了 #3498db 和 #2ecc71

2. 字串
   例子 :
   $font-family: "Arial, sans-serif"; // 定義變數 $font-family，表示字體家族
   $icon-url: "/images/icons/"; // 定義變數 $icon-url，表示圖標的路徑
   $icon-name: "home"; // 定義變數 $icon-name，表示圖標的名稱

.icon {
background-image: url(#{$icon-url}#{$icon-name}.png); // 拼接字串生成背景圖片的 URL
font-family: $font-family; // 使用定義好的字體家族
}

編譯後 :
.icon {
background-image: url(/images/icons/home.png); /* 圖標背景圖路徑已拼接 /
font-family: "Arial, sans-serif"; / 字體家族設置 */
}
background-image: url(#{$icon-url}#{$icon-name}.png) 將變數拼接成 /images/icons/home.png
font-family: $font-family 被編譯成 font-family: "Arial, sans-serif"