Tài liệu tham khảo nhanh SASS
Tài liệu tham khảo Sass / SCSS có thể tìm kiếm và in được — biến, nesting, module @use, mixin, hàm, control flow và module tích hợp sẵn. Miễn phí.
Variables
10$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
9.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
10_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
10@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
9@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
10@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
9@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
14@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
9%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
12.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
Không có mục nào khớp với “:q”.
Giới thiệu về Tài liệu tham khảo nhanh SASS
Bảng tra cứu Sass / SCSS này bao gồm bộ tiền xử lý từ cú pháp đến kiến trúc: biến, lồng nhau, partial và module, mixin, hàm, toán tử và phép tính, luồng điều khiển, các module dựng sẵn, placeholder và kế thừa, cùng interpolation với các mục linh tinh khác.
Nó phản ánh cách Sass hiện đại được viết — hệ thống module @use và các module dựng sẵn có namespace cùng với các tính năng cổ điển — nên vừa hữu ích cho việc bảo trì codebase @import cũ vừa hữu ích cho việc viết stylesheet mới dựa trên module.
Bảng này miễn phí và hiển thị phía client. Lọc mọi đoạn mã trực tiếp bằng ô tìm kiếm, nhảy đến một phần từ mục lục cố định, nhấp vào bất kỳ đoạn mã nào để sao chép vào stylesheet của bạn và in trang ra cho một tài liệu tham khảo SCSS trên giấy.
Cách sử dụng Tài liệu tham khảo nhanh SASS
- Lướt qua các phần, từ Variables và Nesting qua Mixins đến Built-in modules.
- Tìm một tính năng như mixin, @use hoặc map để lọc bảng trực tiếp.
- Nhảy đến Control flow hoặc Placeholders & inheritance qua thanh bên cố định.
- Nhấp vào một đoạn mã hoặc biểu tượng sao chép của nó để sao chép SCSS vào stylesheet của bạn.
- In bảng nếu bạn thích tài liệu tham khảo trên giấy khi tái cấu trúc style.
Câu hỏi thường gặp
Mười phần: biến, lồng nhau, partial và module, mixin, hàm, toán tử và phép tính, luồng điều khiển, các module dựng sẵn, placeholder và kế thừa, cùng interpolation và các mục linh tinh.
Có. Phần partial và module hiển thị các import dựa trên @use và namespace, và phần các module dựng sẵn liệt kê các hàm chuẩn có namespace dùng trong Sass hiện đại.
Cả hai đều có trong bảng: mixin được đưa vào bằng @include và có thể nhận đối số, trong khi placeholder được mở rộng bằng @extend và chia sẻ chung một selector được tạo ra. Các phần liên quan hiển thị cú pháp cho từng loại.
Có. Nhấp vào bất kỳ đoạn mã SCSS nào hoặc biểu tượng sao chép hiện khi rê chuột và nó được sao chép vào clipboard của bạn kèm xác nhận ngắn gọn.
Có, hoàn toàn miễn phí — chạy phía client, có thể tìm kiếm và in được, không cần tài khoản.
Tìm kiếm phổ biến
sass cheat sheet
scss syntax reference
sass mixins example
sass variables
sass nesting rules
use vs import sass
sass built-in modules
sass each and for loops
Cần trợ giúp?
Gặp sự cố với công cụ này? Hãy cho đội ngũ của chúng tôi biết.