Helaian Rujukan SASS

Percuma

Rujukan Sass / SCSS yang boleh dicari dan dicetak — pemboleh ubah, nesting, modul @use, mixin, fungsi, control flow, dan modul terbina dalam. Percuma.

Pemboleh ubah

$primary: #1d6f42;

Isytihar pemboleh ubah

$radius: 4px !default;

Tetapkan hanya jika belum ditakrifkan

$theme: dark !global;

Umpuk ke skop global dari dalam blok

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

Pemboleh ubah tempatan, berskop pada blok

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

Nilai rentetan / senarai

$gap: 8px * 2;

Pemboleh ubah boleh menyimpan nilai dikira

color: $primary;

Guna pemboleh ubah sebagai nilai sifat

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

Pemboleh ubah senarai dipisah koma

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

Pemboleh ubah map (pasangan kunci/nilai)

$on: true;

Pemboleh ubah boolean untuk aliran kawalan

Penyarangan

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

Sarangkan pemilih dalam induknya

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

& merujuk kepada pemilih induk

.btn { &.is-active {} }

Pemilih induk kompaun dengan &

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

Peraturan adik-beradik bersebelahan menggunakan &

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

Letak & terakhir untuk awalkan konteks

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

Sifat bersarang untuk ruang nama (font-*)

.grid { > .col {} }

Pengkombinasi anak bersarang

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

Sarangkan pertanyaan media dalam peraturan juga

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

Susun semula konteks dengan mengalihkan &

Partial & modul

_base.scss

Fail partial (underscore awalan, tidak dikompil bersendirian)

@use 'base';

Muat modul (diruang-namakan ikut nama fail)

base.$primary;

Akses ahli melalui ruang namanya

@use 'base' as b;

Muat modul di bawah ruang nama tersuai

@use 'base' as *;

Muat ke ruang nama global (tiada awalan)

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

Konfigur pemboleh ubah !default modul semasa dimuat

@forward 'buttons';

Eksport semula modul dari titik masuk

@forward 'buttons' as btn-*;

Hantar hadapan ahli dengan awalan

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

Hantar hadapan tetapi sembunyi ahli tertentu

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

Hantar hadapan dan tetapkan lalai boleh konfigur

Mixin

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

Takrif blok pengisytiharan boleh guna semula

@include reset;

Gunakan mixin

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

Mixin dengan argumen

@include pad(8px);

Hantar argumen semasa menyertakan

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

Argumen dengan nilai lalai

@include pad($x: 12px);

Hantar argumen mengikut kata kunci

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

Argumen sewenang-wenang (pemboleh ubah)

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

Terima blok @content

@include card { color: red; }

Hantar blok ke @content mixin

@mixin on-dark { @content; }

Bungkus peraturan sewenang-wenang melalui @content

Fungsi

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

Takrif fungsi yang memulangkan nilai

width: double(8px);

Panggil fungsi tersuai

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

Fungsi dengan argumen lalai

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

Berbilang argumen

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

Fungsi boleh mengandungi aliran kawalan

@use 'sass:math';

Import modul terbina untuk digunakan dalam fungsi

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

Guna fungsi modul dalam fungsi sendiri

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

Fungsi boleh membungkus fungsi terbina

margin: sum(4px, 8px);

Guna nilai dipulangkan sebagai nilai sifat

Operator & matematik

@use 'sass:math';

Muat modul math untuk pembahagian

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

Pembahagian (math.div, bukan / yang lapuk)

width: 100% - 20px;

Penolakan

margin: 4px + 4px;

Penambahan

width: 2 * 8px;

Pendaraban

$r: 10 % 3;

Modulo (baki)

@if $a == $b {}

Perbandingan kesamaan

@if $a >= 768px {}

Perbandingan lebih besar atau sama

@if $a and $b {}

Logik and

@if not $disabled {}

Penafian logik

Aliran kawalan

@if $on { display: block; }

Blok bersyarat

@else if $alt { display: flex; }

Syarat tambahan

@else { display: none; }

Cabang sandaran

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

Lelar ke atas senarai

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

Lelar ke atas kunci dan nilai map

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

Jana peraturan daripada map

@for $i from 1 through 3 {}

Gelung termasuk nilai akhir

@for $i from 0 to 3 {}

Gelung tidak termasuk nilai akhir

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

Gelung selagi syarat dipenuhi

Modul terbina

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

Bundar ke bawah ke integer terdekat

math.ceil(4.1)

Bundar ke atas ke integer terdekat

math.round(4.5)

Bundar ke integer terdekat

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

Tukar nisbah tanpa unit kepada peratusan

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

Huruf-besarkan rentetan

string.quote(hello)

Bungkus nilai dalam tanda petik

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

Laraskan saluran warna mengikut jumlah

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

Skala saluran warna secara lancar

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

Adun dua warna

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

Bilangan item dalam senarai

list.nth($l, 1)

Dapatkan item ke-n (berasaskan 1)

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

Baca nilai dari map mengikut kunci

map.merge($a, $b)

Cantum dua map

map.keys($m)

Dapatkan senarai kunci map

Pemegang tempat & pewarisan

%card { border: 1px solid; }

Pemilih pemegang tempat (tidak dioutput bersendirian)

.box { @extend %card; }

Warisi gaya pemegang tempat

.alert { color: red; }

Pemilih biasa untuk dilanjutkan

.error { @extend .alert; }

Lanjutkan pemilih sebenar

.note { @extend .alert !optional; }

!optional: jangan ralat jika sasaran tiada

%btn-base { padding: 8px; }

Kongsi asas merentas banyak butang

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

Berbilang pemilih kongsi satu peraturan melalui @extend

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

Setiap lanjutan dikumpulkan dalam output

@include card;

Utamakan mixin berbanding @extend untuk guna semula berparameter

Interpolasi & lain-lain

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

Interpolasi pemboleh ubah ke dalam pemilih

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

Interpolasi nilai Sass dalam calc()

content: '#{$count} items';

Interpolasi dalam rentetan

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

Bina sifat tersuai CSS secara dinamik

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

Takrif map pasangan kunci/nilai

map.get($map, 'md')

Baca nilai map (melalui sass:map)

@debug $value;

Cetak nilai ke konsol semasa mengkompil

@warn 'deprecated';

Hasilkan amaran masa kompil

@error 'invalid input';

Batalkan kompilasi dengan ralat

// inline comment

Komen senyap (dibuang dari output)

/* block comment */

Komen CSS (dikekalkan dalam output mampat jika /*! )

@import 'base';

Import lama — lapuk, utamakan @use / @forward

Tiada entri sepadan dengan “:q”.

Perlukan bantuan?

Menemui masalah dengan alat ini? Beritahu pasukan kami.

Laporkan masalah

Tambah alat percuma ini ke laman web anda sendiri — salin dan tampal kod di bawah.

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