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í.
Biến
10$primary: #1d6f42;
Khai báo một biến
$radius: 4px !default;
Đặt chỉ khi chưa được định nghĩa
$theme: dark !global;
Gán vào phạm vi toàn cục từ trong một khối
.box { $w: 10px; width: $w; }
Biến cục bộ, phạm vi trong khối
$font-stack: 'Inter', sans-serif;
Giá trị chuỗi / danh sách
$gap: 8px * 2;
Biến có thể giữ giá trị tính toán
color: $primary;
Dùng một biến làm giá trị thuộc tính
$sizes: 4px, 8px, 16px;
Biến danh sách ngăn cách bằng dấu phẩy
$config: ('gap': 8px);
Biến map (cặp khóa/giá trị)
$on: true;
Biến boolean cho luồng điều khiển
Lồng nhau
9.card { .title { color: red; } }
Lồng một selector trong selector cha
.btn { &:hover { opacity: .8; } }
& tham chiếu selector cha
.btn { &.is-active {} }
Selector cha ghép với &
.list { & + & { margin-top: 8px; } }
Quy tắc anh em liền kề dùng &
.menu { .dark & { color: #fff; } }
Đặt & cuối để thêm ngữ cảnh phía trước
.box { font: { size: 14px; weight: 700; } }
Thuộc tính lồng cho một namespace (font-*)
.grid { > .col {} }
Bộ kết hợp con lồng nhau
@media (min-width: 768px) { .col { width: 50%; } }
Lồng cả media query trong một quy tắc
.a { color: red; .b & { color: blue; } }
Sắp xếp lại ngữ cảnh bằng cách dời &
Partial & module
10_base.scss
File partial (gạch dưới đầu, không biên dịch riêng)
@use 'base';
Tải một module (namespace theo tên file)
base.$primary;
Truy cập một thành viên qua namespace của nó
@use 'base' as b;
Tải module dưới một namespace tùy chỉnh
@use 'base' as *;
Tải vào namespace toàn cục (không tiền tố)
@use 'theme' with ($primary: #000);
Cấu hình biến !default của module khi tải
@forward 'buttons';
Xuất lại một module từ một entrypoint
@forward 'buttons' as btn-*;
Chuyển tiếp thành viên kèm tiền tố
@forward 'src/list' hide list-reset;
Chuyển tiếp nhưng ẩn các thành viên cụ thể
@forward 'config' with ($gap: 4px !default);
Chuyển tiếp và đặt mặc định có thể cấu hình
Mixin
10@mixin reset { margin: 0; padding: 0; }
Định nghĩa một khối khai báo tái sử dụng
@include reset;
Áp dụng một mixin
@mixin pad($x) { padding: $x; }
Mixin có tham số
@include pad(8px);
Truyền tham số khi include
@mixin pad($x: 4px) { padding: $x; }
Tham số có giá trị mặc định
@include pad($x: 12px);
Truyền tham số theo từ khóa
@mixin shadow($a...) { box-shadow: $a; }
Tham số tùy ý (biến đổi)
@mixin card { border: 1px solid; @content; }
Nhận một khối @content
@include card { color: red; }
Truyền một khối vào @content của mixin
@mixin on-dark { @content; }
Bao các quy tắc tùy ý truyền qua @content
Hàm
9@function double($n) { @return $n * 2; }
Định nghĩa một hàm trả về giá trị
width: double(8px);
Gọi một hàm tùy chỉnh
@function pad($x: 4px) { @return $x; }
Hàm có đối số mặc định
@function sum($a, $b) { @return $a + $b; }
Nhiều tham số
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
Hàm có thể chứa luồng điều khiển
@use 'sass:math';
Nhập một module dựng sẵn dùng trong hàm
@function half($n) { @return math.div($n, 2); }
Dùng hàm module trong hàm của bạn
@function list-len($l) { @return list.length($l); }
Hàm có thể bao các hàm dựng sẵn
margin: sum(4px, 8px);
Dùng giá trị trả về làm giá trị thuộc tính
Toán tử & phép toán
10@use 'sass:math';
Tải module math để chia
width: math.div(100%, 3);
Phép chia (math.div, không dùng / đã lỗi thời)
width: 100% - 20px;
Phép trừ
margin: 4px + 4px;
Phép cộng
width: 2 * 8px;
Phép nhân
$r: 10 % 3;
Modulo (phần dư)
@if $a == $b {}
So sánh bằng
@if $a >= 768px {}
So sánh lớn hơn hoặc bằng
@if $a and $b {}
Và logic
@if not $disabled {}
Phủ định logic
Luồng điều khiển
9@if $on { display: block; }
Khối điều kiện
@else if $alt { display: flex; }
Điều kiện bổ sung
@else { display: none; }
Nhánh dự phòng
@each $c in red, green, blue {}
Lặp qua một danh sách
@each $name, $val in $map {}
Lặp qua khóa và giá trị của một map
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
Sinh quy tắc từ một map
@for $i from 1 through 3 {}
Lặp bao gồm giá trị cuối
@for $i from 0 to 3 {}
Lặp loại trừ giá trị cuối
@while $i > 0 { $i: $i - 1; }
Lặp khi điều kiện đúng
Module dựng sẵn
14@use 'sass:math'; math.floor(4.7)
Làm tròn xuống số nguyên gần nhất
math.ceil(4.1)
Làm tròn lên số nguyên gần nhất
math.round(4.5)
Làm tròn về số nguyên gần nhất
math.percentage(math.div(1, 4))
Chuyển tỉ lệ không đơn vị thành phần trăm
@use 'sass:string'; string.to-upper-case('hi')
Viết hoa một chuỗi
string.quote(hello)
Bọc một giá trị trong dấu nháy
@use 'sass:color'; color.adjust($c, $lightness: 10%)
Điều chỉnh một kênh màu theo lượng nhất định
color.scale($c, $lightness: 20%)
Co giãn một kênh màu mượt mà
color.mix($a, $b, 50%)
Pha trộn hai màu
@use 'sass:list'; list.length($l)
Số mục trong một danh sách
list.nth($l, 1)
Lấy mục thứ n (tính từ 1)
@use 'sass:map'; map.get($m, 'gap')
Đọc một giá trị từ map theo khóa
map.merge($a, $b)
Gộp hai map
map.keys($m)
Lấy danh sách khóa của một map
Placeholder & kế thừa
9%card { border: 1px solid; }
Selector placeholder (không tự xuất ra)
.box { @extend %card; }
Kế thừa style của một placeholder
.alert { color: red; }
Một selector thường để mở rộng
.error { @extend .alert; }
Mở rộng một selector thực
.note { @extend .alert !optional; }
!optional: không báo lỗi nếu mục tiêu thiếu
%btn-base { padding: 8px; }
Chia sẻ một nền tảng cho nhiều nút
.btn-primary { @extend %btn-base; }
Nhiều selector dùng chung một quy tắc qua @extend
.btn-ghost { @extend %btn-base; }
Mỗi phần mở rộng được nhóm trong đầu ra
@include card;
Ưu tiên mixin hơn @extend để tái dùng có tham số
Nội suy & khác
12.icon-#{$name} { content: ''; }
Nội suy một biến vào selector
width: calc(100% - #{$gap});
Nội suy một giá trị Sass trong calc()
content: '#{$count} items';
Nội suy trong một chuỗi
--bs-#{$key}: #{$val};
Xây thuộc tính tùy chỉnh CSS động
$map: ('sm': 576px, 'md': 768px);
Định nghĩa một map cặp khóa/giá trị
map.get($map, 'md')
Đọc một giá trị map (qua sass:map)
@debug $value;
In một giá trị ra console khi biên dịch
@warn 'deprecated';
Phát một cảnh báo lúc biên dịch
@error 'invalid input';
Hủy biên dịch kèm lỗi
// inline comment
Chú thích im lặng (bị loại khỏi đầu ra)
/* block comment */
Chú thích CSS (giữ trong đầu ra nén nếu /*! )
@import 'base';
Import cũ — lỗi thời, ưu tiên @use / @forward
Không có mục nào khớp với “:q”.
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.