SASS 速查表
可搜尋、可列印的 Sass / SCSS 參考手冊——變數、巢狀、@use 模組、混入、函式、控制流程以及內建模組。免費。
變數
10$primary: #1d6f42;
宣告變數
$radius: 4px !default;
僅在尚未定義時設定
$theme: dark !global;
於區塊內指派至全域範圍
.box { $w: 10px; width: $w; }
區域變數，作用範圍限於區塊
$font-stack: 'Inter', sans-serif;
字串 / 清單值
$gap: 8px * 2;
變數可保存運算後的值
color: $primary;
將變數作為屬性值
$sizes: 4px, 8px, 16px;
逗號分隔的清單變數
$config: ('gap': 8px);
map 變數 (鍵值對)
$on: true;
用於控制流程的布林變數
巢狀
9.card { .title { color: red; } }
在父層中巢狀選擇器
.btn { &:hover { opacity: .8; } }
& 代表父選擇器
.btn { &.is-active {} }
以 & 組合父選擇器
.list { & + & { margin-top: 8px; } }
以 & 撰寫相鄰兄弟規則
.menu { .dark & { color: #fff; } }
將 & 置於最後以前置語境
.box { font: { size: 14px; weight: 700; } }
命名空間的巢狀屬性 (font-*)
.grid { > .col {} }
巢狀子代組合子
@media (min-width: 768px) { .col { width: 50%; } }
亦可在規則內巢狀 media query
.a { color: red; .b & { color: blue; } }
移動 & 以重排語境
部分檔與模組
10_base.scss
部分檔 (前置底線，不單獨編譯)
@use 'base';
載入模組 (以檔名命名空間)
base.$primary;
透過命名空間存取成員
@use 'base' as b;
以自訂命名空間載入模組
@use 'base' as *;
載入到全域命名空間 (無前綴)
@use 'theme' with ($primary: #000);
載入時設定模組的 !default 變數
@forward 'buttons';
從進入點重新匯出模組
@forward 'buttons' as btn-*;
以前綴轉發成員
@forward 'src/list' hide list-reset;
轉發但隱藏特定成員
@forward 'config' with ($gap: 4px !default);
轉發並設定可配置的預設值
Mixin
10@mixin reset { margin: 0; padding: 0; }
定義可重用的宣告區塊
@include reset;
套用 mixin
@mixin pad($x) { padding: $x; }
帶參數的 mixin
@include pad(8px);
include 時傳入參數
@mixin pad($x: 4px) { padding: $x; }
帶預設值的參數
@include pad($x: 12px);
以關鍵字傳入參數
@mixin shadow($a...) { box-shadow: $a; }
任意 (可變) 參數
@mixin card { border: 1px solid; @content; }
接受 @content 區塊
@include card { color: red; }
將區塊傳入 mixin 的 @content
@mixin on-dark { @content; }
包裹透過 @content 傳入的任意規則
函式
9@function double($n) { @return $n * 2; }
定義回傳值的函式
width: double(8px);
呼叫自訂函式
@function pad($x: 4px) { @return $x; }
具預設引數的函式
@function sum($a, $b) { @return $a + $b; }
多個參數
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
函式可包含控制流程
@use 'sass:math';
匯入內建模組以供函式使用
@function half($n) { @return math.div($n, 2); }
在自訂函式中使用模組函式
@function list-len($l) { @return list.length($l); }
函式可包裹內建函式
margin: sum(4px, 8px);
將回傳值作為屬性值
運算子與數學
10@use 'sass:math';
載入 math 模組以進行除法
width: math.div(100%, 3);
除法 (math.div，非已棄用的 /)
width: 100% - 20px;
減法
margin: 4px + 4px;
加法
width: 2 * 8px;
乘法
$r: 10 % 3;
取餘 (modulo)
@if $a == $b {}
相等比較
@if $a >= 768px {}
大於等於比較
@if $a and $b {}
邏輯且 (and)
@if not $disabled {}
邏輯否定 (not)
流程控制
9@if $on { display: block; }
條件區塊
@else if $alt { display: flex; }
額外條件
@else { display: none; }
後備分支
@each $c in red, green, blue {}
走訪清單
@each $name, $val in $map {}
走訪 map 的鍵與值
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
從 map 產生規則
@for $i from 1 through 3 {}
迴圈含結束值
@for $i from 0 to 3 {}
迴圈不含結束值
@while $i > 0 { $i: $i - 1; }
條件成立時持續迴圈
內建模組
14@use 'sass:math'; math.floor(4.7)
無條件捨去至最接近整數
math.ceil(4.1)
無條件進位至最接近整數
math.round(4.5)
四捨五入至最接近整數
math.percentage(math.div(1, 4))
將無單位比例轉為百分比
@use 'sass:string'; string.to-upper-case('hi')
將字串轉大寫
string.quote(hello)
為值加上引號
@use 'sass:color'; color.adjust($c, $lightness: 10%)
依量值調整顏色通道
color.scale($c, $lightness: 20%)
流暢地縮放顏色通道
color.mix($a, $b, 50%)
混合兩種顏色
@use 'sass:list'; list.length($l)
清單中的項目數
list.nth($l, 1)
取得第 n 個項目 (從 1 起算)
@use 'sass:map'; map.get($m, 'gap')
依鍵從 map 讀取值
map.merge($a, $b)
合併兩個 map
map.keys($m)
取得 map 的鍵清單
佔位選擇器與繼承
9%card { border: 1px solid; }
佔位選擇器 (不單獨輸出)
.box { @extend %card; }
繼承佔位選擇器的樣式
.alert { color: red; }
可供繼承的一般選擇器
.error { @extend .alert; }
繼承真實選擇器
.note { @extend .alert !optional; }
!optional：目標缺少時不報錯
%btn-base { padding: 8px; }
讓多個按鈕共用基底
.btn-primary { @extend %btn-base; }
多個選擇器透過 @extend 共用一條規則
.btn-ghost { @extend %btn-base; }
每個繼承在輸出中歸為一組
@include card;
參數化重用時優先用 mixin 而非 @extend
插值與其他
12.icon-#{$name} { content: ''; }
將變數插值到選擇器
width: calc(100% - #{$gap});
在 calc() 內插值 Sass 值
content: '#{$count} items';
在字串內插值
--bs-#{$key}: #{$val};
動態建立 CSS 自訂屬性
$map: ('sm': 576px, 'md': 768px);
定義鍵值對的 map
map.get($map, 'md')
讀取 map 值 (透過 sass:map)
@debug $value;
編譯時將值印到主控台
@warn 'deprecated';
發出編譯期警告
@error 'invalid input';
以錯誤中止編譯
// inline comment
靜默註解 (從輸出中移除)
/* block comment */
CSS 註解 (若為 /*! 則保留於壓縮輸出)
@import 'base';
舊式 import — 已棄用，建議用 @use / @forward
沒有條目符合「:q」。
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。