SASS-fusklapp

Gratis

En sökbar, utskrivbar Sass / SCSS-referens — variabler, nästling, @use-moduler, mixins, funktioner, kontrollflöde och inbyggda moduler. Gratis.

Variabler

$primary: #1d6f42;

Deklarera en variabel

$radius: 4px !default;

Sätt endast om inte redan definierad

$theme: dark !global;

Tilldela till global räckvidd inifrån ett block

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

Lokal variabel, avgränsad till blocket

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

Sträng-/listvärde

$gap: 8px * 2;

Variabler kan hålla beräknade värden

color: $primary;

Använd en variabel som ett egenskapsvärde

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

En kommaseparerad listvariabel

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

En map-variabel (nyckel/värde-par)

$on: true;

Boolesk variabel för flödeskontroll

Nästling

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

Nästla en selektor inuti dess förälder

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

& refererar till förälderselektorn

.btn { &.is-active {} }

Sammansatt förälderselektor med &

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

Regel för intilliggande syskon med &

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

Placera & sist för att lägga till en kontext först

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

Nästlade egenskaper för en namnrymd (font-*)

.grid { > .col {} }

Nästlad barnkombinator

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

Nästla även media queries inuti en regel

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

Ordna om kontext genom att flytta &

Partialer och moduler

_base.scss

Partialfil (ledande understreck, kompileras inte ensam)

@use 'base';

Ladda en modul (namnrymd efter filnamn)

base.$primary;

Åtkomst till en medlem via dess namnrymd

@use 'base' as b;

Ladda en modul under en anpassad namnrymd

@use 'base' as *;

Ladda in i den globala namnrymden (inget prefix)

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

Konfigurera en moduls !default-variabler vid laddning

@forward 'buttons';

Återexportera en modul från en ingångspunkt

@forward 'buttons' as btn-*;

Vidarebefordra medlemmar med ett prefix

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

Vidarebefordra men dölj specifika medlemmar

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

Vidarebefordra och ange konfigurerbara standardvärden

Mixins

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

Definiera ett återanvändbart block med deklarationer

@include reset;

Tillämpa en mixin

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

Mixin med ett argument

@include pad(8px);

Skicka ett argument vid inkludering

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

Argument med ett standardvärde

@include pad($x: 12px);

Skicka ett argument med nyckelord

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

Godtyckliga (variabla) argument

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

Acceptera ett @content-block

@include card { color: red; }

Skicka ett block till mixinens @content

@mixin on-dark { @content; }

Omslut godtyckliga regler via @content

Funktioner

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

Definiera en funktion som returnerar ett värde

width: double(8px);

Anropa en anpassad funktion

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

Funktion med ett standardargument

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

Flera argument

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

Funktioner kan innehålla flödeskontroll

@use 'sass:math';

Importera en inbyggd modul för användning i funktioner

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

Använd modulfunktioner inuti dina egna

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

Funktioner kan omsluta inbyggda funktioner

margin: sum(4px, 8px);

Använd det returnerade värdet som ett egenskapsvärde

Operatorer och matematik

@use 'sass:math';

Ladda math-modulen för division

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

Division (math.div, inte det utfasade /)

width: 100% - 20px;

Subtraktion

margin: 4px + 4px;

Addition

width: 2 * 8px;

Multiplikation

$r: 10 % 3;

Modulo (rest)

@if $a == $b {}

Likhetsjämförelse

@if $a >= 768px {}

Större-än-eller-lika-jämförelse

@if $a and $b {}

Logiskt och

@if not $disabled {}

Logisk negation

Kontrollflöde

@if $on { display: block; }

Villkorligt block

@else if $alt { display: flex; }

Ytterligare villkor

@else { display: none; }

Reservgren

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

Iterera över en lista

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

Iterera över en maps nycklar och värden

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

Generera regler från en map

@for $i from 1 through 3 {}

Loopa inklusive slutvärdet

@for $i from 0 to 3 {}

Loopa exklusive slutvärdet

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

Loopa medan ett villkor gäller

Inbyggda moduler

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

Avrunda nedåt till närmaste heltal

math.ceil(4.1)

Avrunda uppåt till närmaste heltal

math.round(4.5)

Avrunda till närmaste heltal

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

Konvertera ett enhetslöst förhållande till procent

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

Gör en sträng versal

string.quote(hello)

Omslut ett värde med citattecken

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

Justera en färgkanal med ett belopp

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

Skala en färgkanal flytande

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

Blanda två färger

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

Antal objekt i en lista

list.nth($l, 1)

Hämta det n:te objektet (1-baserat)

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

Läs ett värde från en map med nyckel

map.merge($a, $b)

Slå samman två maps

map.keys($m)

Hämta en lista över en maps nycklar

Platshållare och arv

%card { border: 1px solid; }

Platshållarselektor (utdata inte på egen hand)

.box { @extend %card; }

Ärv en platshållares stilar

.alert { color: red; }

En vanlig selektor att utöka

.error { @extend .alert; }

Utöka en riktig selektor

.note { @extend .alert !optional; }

!optional: ge inte fel om målet saknas

%btn-base { padding: 8px; }

Dela en bas över många knappar

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

Flera selektorer delar en regel via @extend

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

Varje utökning grupperas i utdata

@include card;

Föredra mixins framför @extend för parametriserad återanvändning

Interpolation och övrigt

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

Interpolera en variabel i en selektor

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

Interpolera ett Sass-värde inuti calc()

content: '#{$count} items';

Interpolera inuti en sträng

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

Bygg CSS-anpassade egenskaper dynamiskt

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

Definiera en map med nyckel/värde-par

map.get($map, 'md')

Läs ett map-värde (via sass:map)

@debug $value;

Skriv ett värde till konsolen under kompilering

@warn 'deprecated';

Generera en varning vid kompilering

@error 'invalid input';

Avbryt kompileringen med ett fel

// inline comment

Tyst kommentar (borttagen från utdata)

/* block comment */

CSS-kommentar (behålls i komprimerad utdata om /*! )

@import 'base';

Äldre import — utfasad, föredra @use / @forward

Ingen post matchar “:q”.

Behöver du hjälp?

Hittade du ett problem med det här verktyget? Berätta för oss.

Rapportera ett problem

Lägg till det här gratisverktyget på din egen webbplats — kopiera och klistra in koden nedan.

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