Lembar Contekan SASS

Gratis

Referensi Sass / SCSS yang dapat dicari dan dicetak — variabel, nesting, modul @use, mixin, fungsi, control flow, dan modul bawaan. Gratis.

Variabel

$primary: #1d6f42;

Deklarasikan variabel

$radius: 4px !default;

Atur hanya jika belum didefinisikan

$theme: dark !global;

Tetapkan ke scope global dari dalam blok

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

Variabel lokal, tercakup pada blok

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

Nilai string / list

$gap: 8px * 2;

Variabel dapat menyimpan nilai terhitung

color: $primary;

Gunakan variabel sebagai nilai properti

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

Variabel list dipisah koma

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

Variabel map (pasangan key/value)

$on: true;

Variabel boolean untuk alur kontrol

Penyarangan

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

Sarangkan selektor di dalam induknya

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

& merujuk ke selektor induk

.btn { &.is-active {} }

Selektor induk majemuk dengan &

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

Aturan saudara berdekatan menggunakan &

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

Letakkan & di akhir untuk menambahkan konteks di depan

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

Properti tersarang untuk namespace (font-*)

.grid { > .col {} }

Kombinator anak tersarang

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

Sarangkan media query di dalam aturan juga

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

Atur ulang konteks dengan memindahkan &

Partial & modul

_base.scss

File partial (underscore di depan, tidak dikompilasi sendiri)

@use 'base';

Muat modul (namespace berdasarkan nama file)

base.$primary;

Akses anggota melalui namespace-nya

@use 'base' as b;

Muat modul di bawah namespace kustom

@use 'base' as *;

Muat ke namespace global (tanpa prefiks)

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

Konfigurasi variabel !default modul saat dimuat

@forward 'buttons';

Ekspor ulang modul dari entrypoint

@forward 'buttons' as btn-*;

Teruskan anggota dengan prefiks

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

Teruskan tetapi sembunyikan anggota tertentu

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

Teruskan dan atur default yang dapat dikonfigurasi

Mixin

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

Definisikan blok deklarasi yang dapat digunakan ulang

@include reset;

Terapkan mixin

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

Mixin dengan argumen

@include pad(8px);

Berikan argumen saat menyertakan

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

Argumen dengan nilai default

@include pad($x: 12px);

Berikan argumen berdasarkan kata kunci

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

Argumen sembarang (variabel)

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

Terima blok @content

@include card { color: red; }

Berikan blok ke @content mixin

@mixin on-dark { @content; }

Bungkus aturan sembarang yang diberikan via @content

Fungsi

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

Definisikan fungsi yang mengembalikan nilai

width: double(8px);

Panggil fungsi kustom

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

Fungsi dengan argumen default

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

Beberapa argumen

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

Fungsi dapat berisi alur kontrol

@use 'sass:math';

Impor modul bawaan untuk digunakan dalam fungsi

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

Gunakan fungsi modul di dalam fungsi Anda sendiri

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

Fungsi dapat membungkus fungsi bawaan

margin: sum(4px, 8px);

Gunakan nilai kembalian sebagai nilai properti

Operator & matematika

@use 'sass:math';

Muat modul math untuk pembagian

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

Pembagian (math.div, bukan / yang usang)

width: 100% - 20px;

Pengurangan

margin: 4px + 4px;

Penjumlahan

width: 2 * 8px;

Perkalian

$r: 10 % 3;

Modulo (sisa)

@if $a == $b {}

Perbandingan kesamaan

@if $a >= 768px {}

Perbandingan lebih-besar-atau-sama-dengan

@if $a and $b {}

AND logis

@if not $disabled {}

Negasi logis

Alur kontrol

@if $on { display: block; }

Blok kondisional

@else if $alt { display: flex; }

Kondisi tambahan

@else { display: none; }

Cabang fallback

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

Iterasi atas list

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

Iterasi atas key dan value map

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

Hasilkan aturan dari map

@for $i from 1 through 3 {}

Loop termasuk nilai akhir

@for $i from 0 to 3 {}

Loop tidak termasuk nilai akhir

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

Loop selama kondisi terpenuhi

Modul bawaan

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

Bulatkan ke bawah ke integer terdekat

math.ceil(4.1)

Bulatkan ke atas ke integer terdekat

math.round(4.5)

Bulatkan ke integer terdekat

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

Konversi rasio tanpa unit ke persentase

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

Ubah string ke huruf kapital

string.quote(hello)

Bungkus nilai dalam tanda kutip

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

Sesuaikan kanal warna sebesar sejumlah nilai

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

Skalakan kanal warna secara mulus

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

Campur dua warna

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

Jumlah item dalam list

list.nth($l, 1)

Ambil item ke-n (berbasis 1)

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

Baca nilai dari map berdasarkan key

map.merge($a, $b)

Gabungkan dua map

map.keys($m)

Ambil daftar key dari map

Placeholder & pewarisan

%card { border: 1px solid; }

Selektor placeholder (tidak menghasilkan output sendiri)

.box { @extend %card; }

Warisi gaya placeholder

.alert { color: red; }

Selektor biasa untuk di-extend

.error { @extend .alert; }

Extend selektor nyata

.note { @extend .alert !optional; }

!optional: jangan galat jika target tidak ada

%btn-base { padding: 8px; }

Bagikan basis ke banyak tombol

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

Beberapa selektor berbagi satu aturan via @extend

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

Setiap ekstensi dikelompokkan dalam output

@include card;

Utamakan mixin daripada @extend untuk penggunaan ulang berparameter

Interpolasi & lain-lain

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

Interpolasi variabel ke dalam selektor

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

Interpolasi nilai Sass di dalam calc()

content: '#{$count} items';

Interpolasi di dalam string

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

Bangun properti kustom CSS secara dinamis

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

Definisikan map pasangan key/value

map.get($map, 'md')

Baca nilai map (via sass:map)

@debug $value;

Cetak nilai ke konsol saat kompilasi

@warn 'deprecated';

Hasilkan peringatan saat kompilasi

@error 'invalid input';

Batalkan kompilasi dengan galat

// inline comment

Komentar senyap (dihapus dari output)

/* block comment */

Komentar CSS (dipertahankan dalam output terkompresi jika /*! )

@import 'base';

Impor lama — usang, utamakan @use / @forward

Tidak ada entri yang cocok dengan “:q”.

Butuh bantuan?

Menemukan masalah dengan alat ini? Beri tahu tim kami.

Laporkan masalah

Tambahkan alat gratis ini ke situs web Anda sendiri — salin dan tempel kode di bawah ini.

<iframe src="https://tweakee.com/id/studio/dev/sass-cheatsheet?embed=1" width="100%" height="720" style="border:1px solid #e2e8f0;border-radius:12px;max-width:680px;" loading="lazy"></iframe>