SASS 變數
本文說明 SASS 變數。
我們將詳細說明 SASS 變數，並一步步學習其實際用法。
YouTube Video
SASS 變數
SASS 是一種 CSS 擴展語言，能讓你更靈活、高效地編寫 CSS。在眾多功能中，變數是維持樣式一致性並讓修改更容易的強大工具。
什麼是 SASS 變數？
SASS 變數讓你可以將顏色、字體大小、間距等常用的 CSS 值儲存在一個地方集中管理。
透過使用變數，你可以更容易地變更樣式並提升程式碼可讀性。
如何撰寫變數
變數可以如下撰寫。
1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;- 你必須在變數名稱前加上
$符號。 variable-name是變數名稱。建議給予明確且具描述性的名稱。value是指定給變數的值。
變數的基本用法
以下是 SASS 變數的基本範例。
1// Variable definition
2$primary-color: #3498db;
3$secondary-color: #2ecc71;
4$base-font-size: 16px;
5
6// Variable usage
7body {
8 font-size: $base-font-size;
9 color: $primary-color;
10 background-color: $secondary-color;
11}- 當你定義了一個變數，例如
$primary-color，就可以在需要的地方多次重複使用相同的值。 - 當需要變更值時，只需修改變數定義，提高了維護性。
產生的 CSS 輸出結果
1body {
2 font-size: 16px;
3 color: #3498db;
4 background-color: #2ecc71;
5}在巢狀結構中使用變數
將 SASS 的巢狀結構與變數結合，有助於組織程式碼並提升管理便利性。
1@use "sass:color";
2
3// Variable definition
4$button-bg: #e74c3c;
5$button-color: #fff;
6$button-padding: 10px 20px;
7
8.button {
9 background-color: $button-bg;
10 color: $button-color;
11 padding: $button-padding;
12
13 &:hover {
14 background-color: color.adjust($button-bg, $lightness: -10%);
15 }
16}- 你可以在巢狀選擇器中使用變數。
- 透過結合變數，您可以實現靈活的樣式設定，例如使用
color.adjust函數將顏色變深 10%。
產生的 CSS 輸出結果
1.button {
2 background-color: #e74c3c;
3 color: #fff;
4 padding: 10px 20px;
5}
6
7.button:hover {
8 background-color: #c0392b;
9}帶有預設值的變數
在 SASS 中，你可以為變數設定預設值。設置預設值可讓你在不覆蓋現有變數的情況下使用變數。
1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8 font-size: $font-size;
9}- 加上
!default後，若變數已被定義，就不會被覆蓋。 - 這對團隊開發或全域專案設定特別有用。
產生的 CSS 輸出結果
1p {
2 font-size: 16px;
3}變數的作用域
SASS 變數有作用域，其可用範圍取決於定義的位置。瞭解作用域有助於避免意外覆蓋變數。
- 全域作用域
1$global-color: #ff6347;
2
3.header {
4 color: $global-color;
5}- 全域作用域中的變數在整個檔案內都可使用。
- 區域作用域
1.card {
2 $card-bg: #f0f0f0;
3 background-color: $card-bg;
4}
5
6.button {
7 // Error: $card-bg cannot be used
8 background-color: $card-bg;
9}- 區域作用域的變數僅在特定的巢狀結構或檔案內可用。
在運算中使用變數
SASS 變數也可以用於運算。也可以對帶有單位的數值和顏色進行運算。
1@use "sass:color";
2
3$base-padding: 10px;
4$double-padding: $base-padding * 2;
5
6.container {
7 padding: $double-padding;
8}
9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14 color: $lighter-color;
15}產生的 CSS 輸出結果
1.container {
2 padding: 20px;
3}
4
5h1 {
6 color: #5dade2;
7}- 使用變數來調整顏色或間距能提升維護性。
總結
SASS 變數是高效管理與維護 CSS 的重要功能。
使用 SASS 變數可以在專案中保持樣式一致並讓修改更為容易。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。