Ściąga SASS

Bezpłatnie

Przeszukiwalny, gotowy do druku przewodnik po Sass / SCSS — zmienne, zagnieżdżanie, moduły @use, miksy, funkcje, sterowanie przepływem i moduły wbudowane. Za darmo.

Zmienne

$primary: #1d6f42;

Zadeklaruj zmienną

$radius: 4px !default;

Ustaw tylko, jeśli jeszcze niezdefiniowana

$theme: dark !global;

Przypisz do zakresu globalnego z wnętrza bloku

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

Zmienna lokalna, ograniczona do bloku

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

Wartość typu string / lista

$gap: 8px * 2;

Zmienne mogą przechowywać obliczone wartości

color: $primary;

Użyj zmiennej jako wartości właściwości

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

Zmienna lista oddzielona przecinkami

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

Zmienna mapa (pary klucz/wartość)

$on: true;

Zmienna logiczna dla sterowania przepływem

Zagnieżdżanie

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

Zagnieźdź selektor wewnątrz rodzica

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

& odwołuje się do selektora nadrzędnego

.btn { &.is-active {} }

Złożony selektor rodzica z &

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

Reguła sąsiadującego rodzeństwa z użyciem &

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

Umieść & na końcu, by dodać kontekst z przodu

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

Zagnieżdżone właściwości dla przestrzeni (font-*)

.grid { > .col {} }

Zagnieżdżony kombinator dziecka

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

Zagnieżdżaj też media queries wewnątrz reguły

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

Zmień kolejność kontekstu, przenosząc &

Pliki częściowe i moduły

_base.scss

Plik częściowy (podkreślenie z przodu, nie kompilowany sam)

@use 'base';

Załaduj moduł (przestrzeń nazw wg nazwy pliku)

base.$primary;

Dostęp do elementu przez jego przestrzeń nazw

@use 'base' as b;

Załaduj moduł pod własną przestrzenią nazw

@use 'base' as *;

Załaduj do globalnej przestrzeni (bez prefiksu)

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

Skonfiguruj zmienne !default modułu przy ładowaniu

@forward 'buttons';

Re-eksportuj moduł z punktu wejścia

@forward 'buttons' as btn-*;

Przekaż elementy z prefiksem

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

Przekaż, ukrywając wybrane elementy

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

Przekaż i ustaw konfigurowalne domyślne

Mixiny

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

Zdefiniuj wielokrotny blok deklaracji

@include reset;

Zastosuj mixin

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

Mixin z argumentem

@include pad(8px);

Przekaż argument przy dołączaniu

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

Argument z wartością domyślną

@include pad($x: 12px);

Przekaż argument przez słowo kluczowe

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

Dowolne (zmienne) argumenty

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

Przyjmij blok @content

@include card { color: red; }

Przekaż blok do @content mixinu

@mixin on-dark { @content; }

Opakuj dowolne reguły przekazane przez @content

Funkcje

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

Zdefiniuj funkcję zwracającą wartość

width: double(8px);

Wywołaj własną funkcję

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

Funkcja z argumentem domyślnym

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

Wiele argumentów

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

Funkcje mogą zawierać sterowanie przepływem

@use 'sass:math';

Zaimportuj wbudowany moduł do użycia w funkcjach

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

Używaj funkcji modułu wewnątrz własnych

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

Funkcje mogą opakowywać wbudowane

margin: sum(4px, 8px);

Użyj zwróconej wartości jako wartości właściwości

Operatory i matematyka

@use 'sass:math';

Załaduj moduł math do dzielenia

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

Dzielenie (math.div, nie przestarzałe /)

width: 100% - 20px;

Odejmowanie

margin: 4px + 4px;

Dodawanie

width: 2 * 8px;

Mnożenie

$r: 10 % 3;

Modulo (reszta)

@if $a == $b {}

Porównanie równości

@if $a >= 768px {}

Porównanie większe lub równe

@if $a and $b {}

Logiczne and

@if not $disabled {}

Negacja logiczna

Sterowanie przepływem

@if $on { display: block; }

Blok warunkowy

@else if $alt { display: flex; }

Dodatkowy warunek

@else { display: none; }

Gałąź awaryjna

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

Iteruj po liście

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

Iteruj po kluczach i wartościach mapy

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

Generuj reguły z mapy

@for $i from 1 through 3 {}

Pętla włącznie z wartością końcową

@for $i from 0 to 3 {}

Pętla bez wartości końcowej

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

Pętla, gdy warunek jest spełniony

Moduły wbudowane

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

Zaokrąglij w dół do najbliższej liczby całkowitej

math.ceil(4.1)

Zaokrąglij w górę do najbliższej liczby całkowitej

math.round(4.5)

Zaokrąglij do najbliższej liczby całkowitej

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

Przekształć bezwymiarowy stosunek w procent

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

Zamień łańcuch na wielkie litery

string.quote(hello)

Otocz wartość cudzysłowem

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

Skoryguj kanał koloru o daną wartość

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

Płynnie przeskaluj kanał koloru

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

Zmieszaj dwa kolory

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

Liczba elementów na liście

list.nth($l, 1)

Pobierz n-ty element (od 1)

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

Odczytaj wartość z mapy wg klucza

map.merge($a, $b)

Scal dwie mapy

map.keys($m)

Pobierz listę kluczy mapy

Symbole zastępcze i dziedziczenie

%card { border: 1px solid; }

Selektor zastępczy (sam nie jest wypisywany)

.box { @extend %card; }

Dziedzicz style selektora zastępczego

.alert { color: red; }

Zwykły selektor do rozszerzenia

.error { @extend .alert; }

Rozszerz rzeczywisty selektor

.note { @extend .alert !optional; }

!optional: bez błędu, gdy cel nie istnieje

%btn-base { padding: 8px; }

Współdziel bazę między wieloma przyciskami

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

Wiele selektorów współdzieli regułę przez @extend

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

Każde rozszerzenie jest grupowane w wyniku

@include card;

Wybieraj mixiny zamiast @extend przy parametryzacji

Interpolacja i różne

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

Interpoluj zmienną do selektora

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

Interpoluj wartość Sass wewnątrz calc()

content: '#{$count} items';

Interpoluj wewnątrz łańcucha

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

Buduj niestandardowe właściwości CSS dynamicznie

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

Zdefiniuj mapę par klucz/wartość

map.get($map, 'md')

Odczytaj wartość mapy (przez sass:map)

@debug $value;

Wypisz wartość do konsoli podczas kompilacji

@warn 'deprecated';

Wyemituj ostrzeżenie czasu kompilacji

@error 'invalid input';

Przerwij kompilację błędem

// inline comment

Komentarz cichy (usuwany z wyniku)

/* block comment */

Komentarz CSS (zachowany w skompresowanym wyniku przy /*! )

@import 'base';

Stary import — przestarzały, wybieraj @use / @forward

Żaden wpis nie pasuje do „:q”.

Potrzebujesz pomocy?

Masz problem z tym narzędziem? Daj nam znać.

Zgłoś problem

Dodaj to darmowe narzędzie do swojej witryny — skopiuj i wklej poniższy kod.

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