Sass
1. 變數宣告與使用
$sizes: (
small: 34px,
medium: 38px,
large: 40px,
);這裡使用了 SCSS 變數來定義一個 map（映射），儲存不同尺寸的高度值。這讓你可以在一個地方統一管理所有尺寸，之後要修改時只需修改這個 map。
2. Map 操作函數
$default-height: map-get($sizes, medium);map-get() 是 Sass 的內建函數，用來從 map 中取得特定鍵的值。此處它從 $sizes 中取出 medium 的值 (38px)。
3. 巢狀選擇器
:host {
::ng-deep {
// 樣式內容
}
}巢狀選擇器是 SCSS 的核心特性，它讓你可以在一個選擇器內部定義另一個選擇器，創建一個階層關係。這裡 ::ng-deep 是 Angular 的穿透選擇器，用於修改被封裝組件內的樣式。
4. @each 迴圈
@each $size, $height in $sizes {
&.#{$size} ::ng-deep {
// 樣式內容
}
}@each 是 Sass 的迭代指令，用來遍歷集合中的每個項目。這裡它遍歷 $sizes map，將每個鍵值對分別賦給 $size 和 $height 變數。
5. 字串插值
&.#{$size} ::ng-deep {
// 樣式內容
}#{$size} 是 Sass 的字串插值語法，將變數值插入到選擇器或屬性名中。這裡它將 $size 的值（如 "small"、"medium"、"large"）插入類別名稱中。
6. 父選擇器引用
&.#{$size} ::ng-deep {
// 樣式內容
}& 符號代表父選擇器，這是 Sass 的一個強大特性。在這個例子中，& 代表 :host，所以 &.small 會編譯為 :host.small。
7. 條件式樣式 (@if)
@if $size == small {
// 特定的樣式
}@if 是 Sass 的條件語句，用來根據條件決定是否執行某些代碼。這裡它檢查 $size 是否等於 "small"，如果是，則應用特定的樣式調整。
8. CSS 變數使用
color: var(--Neutral-600);雖然這不是 SCSS 特有的功能，但這裡使用了 CSS 變數（自定義屬性）來管理色彩，這是一種現代前端開發的良好實踐，使得主題化和樣式覆蓋變得更容易。
9. CSS 計算函數
max-width: calc(100% - 6px);同樣，這不是 SCSS 特有的，但這裡使用了 calc() 函數進行 CSS 值的動態計算，這對於響應式設計非常有用。
這些 SCSS 特性組合在一起，讓你能夠以一種高度維護、可擴展的方式編寫樣式，特別適合用於處理多種變體（如不同尺寸）的組件樣式。
以下是範例
// 1. 變數宣告 - 定義基本顏色與尺寸
$primary-color: #007bff;
$secondary-color: #6c757d;
$error-color: #dc3545;
// 2. Map 映射 - 儲存多個相關值
$theme-colors: (
primary: $primary-color,
secondary: $secondary-color,
error: $error-color,
success: #28a745,
warning: #ffc107
);
// 不同尺寸的按鈕高度
$button-sizes: (
small: 30px,
medium: 40px,
large: 50px
);
// 使用 map-get 從 map 中取得特定值
$default-button-height: map-get($button-sizes, medium);
// 設定CSS變數，可以在整個應用中使用
:root {
--primary: #{map-get($theme-colors, primary)};
--secondary: #{map-get($theme-colors, secondary)};
--error: #{map-get($theme-colors, error)};
}
// 主按鈕元件樣式
.button {
// 基本樣式
display: inline-block;
padding: 0 16px;
border-radius: 4px;
font-weight: 500;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
height: $default-button-height;
line-height: $default-button-height;
background-color: map-get($theme-colors, primary);
color: white;
border: none;
// 使用 CSS calc() 函數動態計算寬度
width: calc(100% - 32px);
max-width: 300px;
// 巢狀選擇器 - 定義按鈕內的圖標樣式
.icon {
margin-right: 8px;
font-size: 16px;
}
// 父選擇器參考 & - 定義懸停狀態
&:hover {
background-color: darken(map-get($theme-colors, primary), 10%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
// 使用 @each 迴圈遍歷所有尺寸，創建不同大小的按鈕
@each $size, $height in $button-sizes {
// 字串插值 #{$size} 創建對應的類別名
&.#{$size} {
height: $height;
line-height: $height;
// 使用 @if 條件判斷，為不同尺寸設定專屬樣式
@if $size == small {
font-size: 12px;
padding: 0 12px;
} @else if $size == large {
font-size: 18px;
padding: 0 24px;
}
}
}
// 使用 @each 遍歷主題顏色，創建不同顏色的按鈕
@each $name, $color in $theme-colors {
&.#{$name} {
background-color: $color;
&:hover {
background-color: darken($color, 10%);
}
// 對特定的主題色添加特別處理
@if $name == warning {
color: #333; // 淺色背景需要深色文字
}
}
}
// 禁用狀態
&.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
}
// 使用 CSS 變數建立的元件
.card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
// 使用 CSS 變數
&.primary {
border-color: var(--primary);
}
&.error {
border-color: var(--error);
}
}這是一個簡潔但完整的示例，展示了所有我們討論過的 SCSS 特殊方法。讓我解釋一下這段代碼的關鍵部分：
主要 SCSS 功能展示
變數宣告：代碼開始定義了基本顏色和尺寸變數，使它們易於維護和重用。
Map 映射：創建了兩個 map 來組織相關的值 -
$theme-colors用於顏色系統，$button-sizes用於按鈕尺寸。Map-get 函數：使用
map-get($button-sizes, medium)從 map 中取出特定值作為預設高度。字串插值：在
:root中設定 CSS 變數時使用#{map-get($theme-colors, primary)}來插入變數值。巢狀選擇器：
.button內部定義了.icon的樣式，這是 SCSS 最基本的嵌套特性。父選擇器引用：使用
&:hover簡潔地定義按鈕懸停狀態。@each 迴圈：代碼使用兩個
@each迴圈 - 一個遍歷尺寸，一個遍歷顏色主題，為每種變體生成對應的樣式。@if 條件判斷：在
@each迴圈內部使用@if來為特殊情況（如小按鈕或警告顏色按鈕）添加專屬樣式。CSS 變數：定義並使用 CSS 變數（如
var(--primary)）來實現全域主題色管理。Calc() 函數：使用
width: calc(100% - 32px)動態計算按鈕寬度。
這個例子展示了如何將多種 SCSS 功能結合起來，創建一個靈活、可維護的樣式系統。你可以根據這個基礎擴展更多功能，或者調整現有的樣式變量來快速改變整個系統的外觀。
Last updated