SASS 速查表

所有工具

免费

可搜索、可打印的 Sass / SCSS 参考手册——变量、嵌套、@use 模块、混入、函数、控制流以及内置模块。免费。

Variables

$primary: #1d6f42;

Declare a variable

$radius: 4px !default;

Set only if not already defined

$theme: dark !global;

Assign to the global scope from inside a block

.box { $w: 10px; width: $w; }

Local variable, scoped to the block

$font-stack: 'Inter', sans-serif;

String / list value

$gap: 8px * 2;

Variables can hold computed values

color: $primary;

Use a variable as a property value

$sizes: 4px, 8px, 16px;

A comma-separated list variable

$config: ('gap': 8px);

A map variable (key/value pairs)

$on: true;

Boolean variable for control flow

Nesting

.card { .title { color: red; } }

Nest a selector inside its parent

.btn { &:hover { opacity: .8; } }

& refers to the parent selector

.btn { &.is-active {} }

Compound parent selector with &

.list { & + & { margin-top: 8px; } }

Adjacent-sibling rule using &

.menu { .dark & { color: #fff; } }

Place & last to prepend a context

.box { font: { size: 14px; weight: 700; } }

Nested properties for a namespace (font-*)

.grid { > .col {} }

Nested child combinator

@media (min-width: 768px) { .col { width: 50%; } }

Nest media queries inside a rule too

.a { color: red; .b & { color: blue; } }

Reorder context by moving &

Partials & modules

_base.scss

Partial file (leading underscore, not compiled alone)

@use 'base';

Load a module (namespaced by file name)

base.$primary;

Access a member through its namespace

@use 'base' as b;

Load a module under a custom namespace

@use 'base' as *;

Load into the global namespace (no prefix)

@use 'theme' with ($primary: #000);

Configure a module's !default variables on load

@forward 'buttons';

Re-export a module from an entrypoint

@forward 'buttons' as btn-*;

Forward members with a prefix

@forward 'src/list' hide list-reset;

Forward but hide specific members

@forward 'config' with ($gap: 4px !default);

Forward and set configurable defaults

Mixins

@mixin reset { margin: 0; padding: 0; }

Define a reusable block of declarations

@include reset;

Apply a mixin

@mixin pad($x) { padding: $x; }

Mixin with an argument

@include pad(8px);

Pass an argument when including

@mixin pad($x: 4px) { padding: $x; }

Argument with a default value

@include pad($x: 12px);

Pass an argument by keyword

@mixin shadow($a...) { box-shadow: $a; }

Arbitrary (variable) arguments

@mixin card { border: 1px solid; @content; }

Accept a @content block

@include card { color: red; }

Pass a block into the mixin's @content

@mixin on-dark { @content; }

Wrap arbitrary rules passed via @content

Functions

@function double($n) { @return $n * 2; }

Define a function that returns a value

width: double(8px);

Call a custom function

@function pad($x: 4px) { @return $x; }

Function with a default argument

@function sum($a, $b) { @return $a + $b; }

Multiple arguments

@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }

Functions may contain control flow

@use 'sass:math';

Import a built-in module for use in functions

@function half($n) { @return math.div($n, 2); }

Use module functions inside your own

@function list-len($l) { @return list.length($l); }

Functions can wrap built-ins

margin: sum(4px, 8px);

Use the returned value as a property value

Operators & math

@use 'sass:math';

Load the math module for division

width: math.div(100%, 3);

Division (math.div, not the deprecated /)

width: 100% - 20px;

Subtraction

margin: 4px + 4px;

Addition

width: 2 * 8px;

Multiplication

$r: 10 % 3;

Modulo (remainder)

@if $a == $b {}

Equality comparison

@if $a >= 768px {}

Greater-than-or-equal comparison

@if $a and $b {}

Logical and

@if not $disabled {}

Logical negation

Control flow

@if $on { display: block; }

Conditional block

@else if $alt { display: flex; }

Additional condition

@else { display: none; }

Fallback branch

@each $c in red, green, blue {}

Iterate over a list

@each $name, $val in $map {}

Iterate over a map's keys and values

@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }

Generate rules from a map

@for $i from 1 through 3 {}

Loop inclusive of the end value

@for $i from 0 to 3 {}

Loop exclusive of the end value

@while $i > 0 { $i: $i - 1; }

Loop while a condition holds

Built-in modules

@use 'sass:math'; math.floor(4.7)

Round down to the nearest integer

math.ceil(4.1)

Round up to the nearest integer

math.round(4.5)

Round to the nearest integer

math.percentage(math.div(1, 4))

Convert a unitless ratio to a percentage

@use 'sass:string'; string.to-upper-case('hi')

Uppercase a string

string.quote(hello)

Wrap a value in quotes

@use 'sass:color'; color.adjust($c, $lightness: 10%)

Adjust a colour channel by an amount

color.scale($c, $lightness: 20%)

Scale a colour channel fluidly

color.mix($a, $b, 50%)

Blend two colours

@use 'sass:list'; list.length($l)

Number of items in a list

list.nth($l, 1)

Get the nth item (1-based)

@use 'sass:map'; map.get($m, 'gap')

Read a value from a map by key

map.merge($a, $b)

Merge two maps

map.keys($m)

Get a list of a map's keys

Placeholders & inheritance

%card { border: 1px solid; }

Placeholder selector (not output on its own)

.box { @extend %card; }

Inherit a placeholder's styles

.alert { color: red; }

A normal selector to extend

.error { @extend .alert; }

Extend a real selector

.note { @extend .alert !optional; }

!optional: do not error if the target is missing

%btn-base { padding: 8px; }

Share a base across many buttons

.btn-primary { @extend %btn-base; }

Multiple selectors share one rule via @extend

.btn-ghost { @extend %btn-base; }

Each extension is grouped in the output

@include card;

Prefer mixins over @extend for parameterised reuse

Interpolation & misc

.icon-#{$name} { content: ''; }

Interpolate a variable into a selector

width: calc(100% - #{$gap});

Interpolate a Sass value inside calc()

content: '#{$count} items';

Interpolate inside a string

--bs-#{$key}: #{$val};

Build CSS custom properties dynamically

$map: ('sm': 576px, 'md': 768px);

Define a map of key/value pairs

map.get($map, 'md')

Read a map value (via sass:map)

@debug $value;

Print a value to the console while compiling

@warn 'deprecated';

Emit a compile-time warning

@error 'invalid input';

Abort compilation with an error

// inline comment

Silent comment (stripped from output)

/* block comment */

CSS comment (kept in compressed output if /*! )

@import 'base';

Legacy import — deprecated, prefer @use / @forward

没有条目匹配“:q”。

关于 SASS 速查表

这份 Sass / SCSS 速查表从语法到架构全面涵盖了这款预处理器：变量、嵌套、局部文件和模块、混入（mixin）、函数、运算符和数学运算、控制流、内置模块、占位符和继承,以及插值和其他杂项。

它反映了现代 Sass 的实际写法——@use 模块系统和带命名空间的内置模块与经典特性并存——因此无论是维护使用旧版 @import 的代码库,还是编写新的基于模块的样式表,它都同样实用。

本速查表免费,在客户端渲染。用搜索框实时过滤每个代码片段,通过粘性目录跳转到指定章节,点击任意片段即可复制到你的样式表中,并可打印本页,得到一份纸质的 SCSS 参考。

如何使用 SASS 速查表

浏览各章节,从「变量」「嵌套」经「混入」到「内置模块」。
搜索 mixin、@use 或 map 等特性,即可实时过滤速查表。
通过粘性侧边栏跳转到「控制流」或「占位符与继承」。
点击代码片段或其复制图标,把这段 SCSS 复制到你的样式表中。
如果你更喜欢在重构样式时使用纸质参考,可以打印本页。

常见问题

共十个章节：变量、嵌套、局部文件和模块、混入、函数、运算符和数学运算、控制流、内置模块、占位符和继承,以及插值和杂项。

有。局部文件和模块章节展示了基于 @use 的导入和命名空间用法,内置模块章节则列出了现代 Sass 中使用的带命名空间的标准函数。

表中都有涉及：mixin 用 @include 引入,可以接受参数；占位符则用 @extend 扩展,共享同一个生成的选择器。相关章节展示了各自的语法。

可以。点击任意 SCSS 代码片段或悬停时出现的复制图标,它就会被复制到剪贴板,并有一条简短提示确认。

是的,完全免费——纯客户端运行,可搜索,可打印,无需账户。

SASS 速查表

Variables

Nesting

Partials & modules

Mixins

Functions

Operators & math

Control flow

Built-in modules

Placeholders & inheritance

Interpolation & misc

关于 SASS 速查表

如何使用 SASS 速查表

常见问题

Sass 速查表涵盖哪些内容？

它有没有涵盖 @use 模块系统？

mixin 和占位符有什么区别？

我可以一键复制代码片段吗？

SCSS 参考表是免费的吗？

相关工具

热门搜索

嵌入此工具