Sass(Syntactically Awesome Style Sheets)是一種 CSS 預處理器,提供了比原生 CSS 更強大、更靈活的語法功能。它有兩種語法格式:
- Sass(縮進語法,
.sass
文件) - SCSS(CSS-like 語法,
.scss
文件),推薦使用 SCSS,因其更接近標準 CSS。
一、Sass/SCSS 基礎語法
1. 變量(Variables)
$primary-color: #3498db;body {background-color: $primary-color;
}
2. 嵌套(Nesting)
nav {ul {list-style: none;}li {display: inline-block;}a {text-decoration: none;color: $primary-color;}
}
編譯為 CSS:
nav ul {list-style: none;
}
nav li {display: inline-block;
}
nav a {text-decoration: none;color: #3498db;
}
3. 父選擇器 &
a {color: blue;&:hover {color: red;}
}
編譯為 CSS:
a {color: blue;
}
a:hover {color: red;
}
4. 混合宏(Mixins)
用于定義可復用的樣式塊:
@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius;
}.box {@include border-radius(10px);
}
5. 函數(Functions)
可以自定義函數并返回值:
@function calculate-rem($size) {$rem-size: $size / 16px;@return #{$rem-size}rem;
}body {font-size: calculate-rem(14px);
}
6. 導入(Import)
將多個 Sass 文件合并為一個 CSS 文件:
// _variables.scss
$primary-color: #3498db;// main.scss
@import 'variables';body {background-color: $primary-color;
}
?? 注意:Sass 的
@import
已被棄用,建議使用@use
和模塊化方式(見下文)。
7. 模塊化(@use
/ @forward
)
// _colors.scss
$primary: #3498db;
$secondary: #e74c3c;// main.scss
@use 'colors';body {background: colors.$primary;
}
8. 繼承(Extend)
通過 @extend
繼承其他選擇器的樣式:
.message {padding: 10px;border: 1px solid #ccc;
}.error {@extend .message;color: red;
}
9. 條件語句與循環
條件判斷(if/else)
@mixin theme-color($theme) {@if $theme == dark {background-color: #333;color: #fff;} @else {background-color: #fff;color: #333;}
}.container {@include theme-color(dark);
}
循環(for / each)
@for $i from 1 through 5 {.col-#{$i} {width: 20% * $i;}
}// 或者
$list: red, blue, green;
@each $color in $list {.btn-#{$color} {background: $color;}
}
二、Sass 編譯方式
你可以使用以下工具將 .scss
文件編譯為 .css
文件:
- Dart Sass(官方推薦)
- Node.js +
sass-loader
(配合 Webpack) - VSCode 插件如 Live Sass Compiler
安裝 Dart Sass:
npm install sass --save-dev
編譯命令:
npx sass src/styles.scss dist/styles.css
三、使用建議
技巧 | 說明 |
---|---|
使用 _filename.scss | 下劃線開頭表示 partial 文件,不會單獨編譯 |
模塊化組織結構 | 如 base/ , components/ , layout/ , themes/ 等目錄 |
使用占位符 % | 避免無用類輸出,只用于 @extend |
變量命名規范 | $spacing-sm , $font-title 等 |
使用 !default 設置默認值 | $color: red !default; |