SASS-spiekbriefje

Gratis

Een doorzoekbaar, afdrukbaar Sass / SCSS-naslagwerk — variabelen, nesten, @use modules, mixins, functies, control flow en ingebouwde modules. Gratis.

Variabelen

$primary: #1d6f42;

Declareer een variabele

$radius: 4px !default;

Stel alleen in indien nog niet gedefinieerd

$theme: dark !global;

Wijs toe aan de globale scope vanuit een blok

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

Lokale variabele, gescopet tot het blok

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

String- / lijstwaarde

$gap: 8px * 2;

Variabelen kunnen berekende waarden bevatten

color: $primary;

Gebruik een variabele als eigenschapwaarde

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

Een komma-gescheiden lijstvariabele

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

Een map-variabele (sleutel/waarde-paren)

$on: true;

Booleaanse variabele voor control flow

Nesten

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

Nest een selector binnen zijn parent

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

& verwijst naar de parent-selector

.btn { &.is-active {} }

Samengestelde parent-selector met &

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

Aangrenzende-sibling-regel met &

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

Plaats & achteraan om een context voor te voegen

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

Geneste eigenschappen voor een namespace (font-*)

.grid { > .col {} }

Geneste child-combinator

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

Nest media queries ook binnen een regel

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

Herorden context door & te verplaatsen

Partials & modules

_base.scss

Partial-bestand (voorafgaande underscore, niet apart gecompileerd)

@use 'base';

Laad een module (namespaced op bestandsnaam)

base.$primary;

Benader een member via zijn namespace

@use 'base' as b;

Laad een module onder een aangepaste namespace

@use 'base' as *;

Laad in de globale namespace (geen prefix)

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

Configureer de !default-variabelen van een module bij het laden

@forward 'buttons';

Re-exporteer een module vanuit een entrypoint

@forward 'buttons' as btn-*;

Forward members met een prefix

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

Forward maar verberg specifieke members

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

Forward en stel configureerbare defaults in

Mixins

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

Definieer een herbruikbaar blok declaraties

@include reset;

Pas een mixin toe

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

Mixin met een argument

@include pad(8px);

Geef een argument door bij het includen

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

Argument met een standaardwaarde

@include pad($x: 12px);

Geef een argument door via keyword

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

Willekeurige (variabele) argumenten

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

Accepteer een @content-blok

@include card { color: red; }

Geef een blok door aan de @content van de mixin

@mixin on-dark { @content; }

Wikkel willekeurige regels doorgegeven via @content

Functies

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

Definieer een functie die een waarde retourneert

width: double(8px);

Roep een aangepaste functie aan

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

Functie met een standaardargument

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

Meerdere argumenten

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

Functies mogen control flow bevatten

@use 'sass:math';

Importeer een ingebouwde module voor gebruik in functies

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

Gebruik modulefuncties binnen je eigen

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

Functies kunnen ingebouwde functies omhullen

margin: sum(4px, 8px);

Gebruik de geretourneerde waarde als eigenschapwaarde

Operatoren & wiskunde

@use 'sass:math';

Laad de math-module voor deling

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

Deling (math.div, niet de verouderde /)

width: 100% - 20px;

Aftrekken

margin: 4px + 4px;

Optellen

width: 2 * 8px;

Vermenigvuldigen

$r: 10 % 3;

Modulo (rest)

@if $a == $b {}

Gelijkheidsvergelijking

@if $a >= 768px {}

Groter-dan-of-gelijk-vergelijking

@if $a and $b {}

Logische en

@if not $disabled {}

Logische negatie

Control flow

@if $on { display: block; }

Voorwaardelijk blok

@else if $alt { display: flex; }

Extra voorwaarde

@else { display: none; }

Fallback-tak

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

Itereer over een lijst

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

Itereer over de sleutels en waarden van een map

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

Genereer regels uit een map

@for $i from 1 through 3 {}

Loop inclusief de eindwaarde

@for $i from 0 to 3 {}

Loop exclusief de eindwaarde

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

Loop zolang een voorwaarde geldt

Ingebouwde modules

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

Rond naar beneden af op het dichtstbijzijnde gehele getal

math.ceil(4.1)

Rond naar boven af op het dichtstbijzijnde gehele getal

math.round(4.5)

Rond af op het dichtstbijzijnde gehele getal

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

Converteer een eenheidloze verhouding naar een percentage

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

Zet een string om in hoofdletters

string.quote(hello)

Wikkel een waarde in aanhalingstekens

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

Pas een kleurkanaal aan met een bepaalde hoeveelheid

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

Schaal een kleurkanaal vloeiend

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

Meng twee kleuren

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

Aantal items in een lijst

list.nth($l, 1)

Haal het n-de item op (1-gebaseerd)

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

Lees een waarde uit een map op sleutel

map.merge($a, $b)

Voeg twee maps samen

map.keys($m)

Haal een lijst van de sleutels van een map op

Placeholders & overerving

%card { border: 1px solid; }

Placeholder-selector (niet zelfstandig uitgevoerd)

.box { @extend %card; }

Erf de stijlen van een placeholder

.alert { color: red; }

Een normale selector om uit te breiden

.error { @extend .alert; }

Breid een echte selector uit

.note { @extend .alert !optional; }

!optional: geef geen fout als het doel ontbreekt

%btn-base { padding: 8px; }

Deel een basis over veel knoppen

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

Meerdere selectors delen één regel via @extend

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

Elke extensie wordt gegroepeerd in de uitvoer

@include card;

Geef voorkeur aan mixins boven @extend voor geparametriseerd hergebruik

Interpolatie & diversen

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

Interpoleer een variabele in een selector

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

Interpoleer een Sass-waarde binnen calc()

content: '#{$count} items';

Interpoleer binnen een string

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

Bouw CSS custom properties dynamisch op

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

Definieer een map van sleutel/waarde-paren

map.get($map, 'md')

Lees een map-waarde (via sass:map)

@debug $value;

Print een waarde naar de console tijdens het compileren

@warn 'deprecated';

Genereer een waarschuwing tijdens compileren

@error 'invalid input';

Breek het compileren af met een fout

// inline comment

Stil commentaar (verwijderd uit uitvoer)

/* block comment */

CSS-commentaar (behouden in gecomprimeerde uitvoer als /*! )

@import 'base';

Legacy import — verouderd, geef voorkeur aan @use / @forward

Geen vermelding komt overeen met “:q”.

Hulp nodig?

Een probleem met deze tool gevonden? Laat het ons weten.

Een probleem melden

Voeg deze gratis tool toe aan je eigen website — kopieer en plak de onderstaande code.

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