Folha de referência SASS
Uma referência Sass / SCSS pesquisável e imprimível — variáveis, aninhamento, módulos @use, mixins, funções, controlo de fluxo e módulos integrados. Grátis.
Variables
10$primary: #1d6f42;
Declare a variable
$radius: 4px !default;
Set only if not already defined
$theme: dark !global;
Assign to the global scope from inside a block
.box { $w: 10px; width: $w; }
Local variable, scoped to the block
$font-stack: 'Inter', sans-serif;
String / list value
$gap: 8px * 2;
Variables can hold computed values
color: $primary;
Use a variable as a property value
$sizes: 4px, 8px, 16px;
A comma-separated list variable
$config: ('gap': 8px);
A map variable (key/value pairs)
$on: true;
Boolean variable for control flow
Nesting
9.card { .title { color: red; } }
Nest a selector inside its parent
.btn { &:hover { opacity: .8; } }
& refers to the parent selector
.btn { &.is-active {} }
Compound parent selector with &
.list { & + & { margin-top: 8px; } }
Adjacent-sibling rule using &
.menu { .dark & { color: #fff; } }
Place & last to prepend a context
.box { font: { size: 14px; weight: 700; } }
Nested properties for a namespace (font-*)
.grid { > .col {} }
Nested child combinator
@media (min-width: 768px) { .col { width: 50%; } }
Nest media queries inside a rule too
.a { color: red; .b & { color: blue; } }
Reorder context by moving &
Partials & modules
10_base.scss
Partial file (leading underscore, not compiled alone)
@use 'base';
Load a module (namespaced by file name)
base.$primary;
Access a member through its namespace
@use 'base' as b;
Load a module under a custom namespace
@use 'base' as *;
Load into the global namespace (no prefix)
@use 'theme' with ($primary: #000);
Configure a module's !default variables on load
@forward 'buttons';
Re-export a module from an entrypoint
@forward 'buttons' as btn-*;
Forward members with a prefix
@forward 'src/list' hide list-reset;
Forward but hide specific members
@forward 'config' with ($gap: 4px !default);
Forward and set configurable defaults
Mixins
10@mixin reset { margin: 0; padding: 0; }
Define a reusable block of declarations
@include reset;
Apply a mixin
@mixin pad($x) { padding: $x; }
Mixin with an argument
@include pad(8px);
Pass an argument when including
@mixin pad($x: 4px) { padding: $x; }
Argument with a default value
@include pad($x: 12px);
Pass an argument by keyword
@mixin shadow($a...) { box-shadow: $a; }
Arbitrary (variable) arguments
@mixin card { border: 1px solid; @content; }
Accept a @content block
@include card { color: red; }
Pass a block into the mixin's @content
@mixin on-dark { @content; }
Wrap arbitrary rules passed via @content
Functions
9@function double($n) { @return $n * 2; }
Define a function that returns a value
width: double(8px);
Call a custom function
@function pad($x: 4px) { @return $x; }
Function with a default argument
@function sum($a, $b) { @return $a + $b; }
Multiple arguments
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
Functions may contain control flow
@use 'sass:math';
Import a built-in module for use in functions
@function half($n) { @return math.div($n, 2); }
Use module functions inside your own
@function list-len($l) { @return list.length($l); }
Functions can wrap built-ins
margin: sum(4px, 8px);
Use the returned value as a property value
Operators & math
10@use 'sass:math';
Load the math module for division
width: math.div(100%, 3);
Division (math.div, not the deprecated /)
width: 100% - 20px;
Subtraction
margin: 4px + 4px;
Addition
width: 2 * 8px;
Multiplication
$r: 10 % 3;
Modulo (remainder)
@if $a == $b {}
Equality comparison
@if $a >= 768px {}
Greater-than-or-equal comparison
@if $a and $b {}
Logical and
@if not $disabled {}
Logical negation
Control flow
9@if $on { display: block; }
Conditional block
@else if $alt { display: flex; }
Additional condition
@else { display: none; }
Fallback branch
@each $c in red, green, blue {}
Iterate over a list
@each $name, $val in $map {}
Iterate over a map's keys and values
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
Generate rules from a map
@for $i from 1 through 3 {}
Loop inclusive of the end value
@for $i from 0 to 3 {}
Loop exclusive of the end value
@while $i > 0 { $i: $i - 1; }
Loop while a condition holds
Built-in modules
14@use 'sass:math'; math.floor(4.7)
Round down to the nearest integer
math.ceil(4.1)
Round up to the nearest integer
math.round(4.5)
Round to the nearest integer
math.percentage(math.div(1, 4))
Convert a unitless ratio to a percentage
@use 'sass:string'; string.to-upper-case('hi')
Uppercase a string
string.quote(hello)
Wrap a value in quotes
@use 'sass:color'; color.adjust($c, $lightness: 10%)
Adjust a colour channel by an amount
color.scale($c, $lightness: 20%)
Scale a colour channel fluidly
color.mix($a, $b, 50%)
Blend two colours
@use 'sass:list'; list.length($l)
Number of items in a list
list.nth($l, 1)
Get the nth item (1-based)
@use 'sass:map'; map.get($m, 'gap')
Read a value from a map by key
map.merge($a, $b)
Merge two maps
map.keys($m)
Get a list of a map's keys
Placeholders & inheritance
9%card { border: 1px solid; }
Placeholder selector (not output on its own)
.box { @extend %card; }
Inherit a placeholder's styles
.alert { color: red; }
A normal selector to extend
.error { @extend .alert; }
Extend a real selector
.note { @extend .alert !optional; }
!optional: do not error if the target is missing
%btn-base { padding: 8px; }
Share a base across many buttons
.btn-primary { @extend %btn-base; }
Multiple selectors share one rule via @extend
.btn-ghost { @extend %btn-base; }
Each extension is grouped in the output
@include card;
Prefer mixins over @extend for parameterised reuse
Interpolation & misc
12.icon-#{$name} { content: ''; }
Interpolate a variable into a selector
width: calc(100% - #{$gap});
Interpolate a Sass value inside calc()
content: '#{$count} items';
Interpolate inside a string
--bs-#{$key}: #{$val};
Build CSS custom properties dynamically
$map: ('sm': 576px, 'md': 768px);
Define a map of key/value pairs
map.get($map, 'md')
Read a map value (via sass:map)
@debug $value;
Print a value to the console while compiling
@warn 'deprecated';
Emit a compile-time warning
@error 'invalid input';
Abort compilation with an error
// inline comment
Silent comment (stripped from output)
/* block comment */
CSS comment (kept in compressed output if /*! )
@import 'base';
Legacy import — deprecated, prefer @use / @forward
Nenhuma entrada corresponde a “:q”.
Sobre Folha de referência SASS
Este guia de referência de Sass / SCSS cobre o pré-processador da sintaxe à arquitetura: variáveis, aninhamento, partials e módulos, mixins, funções, operadores e matemática, controle de fluxo, módulos embutidos, placeholders e herança, e interpolação com outras miscelâneas.
Ele reflete como o Sass moderno é escrito — o sistema de módulos @use e os módulos embutidos com namespace ao lado dos recursos clássicos — então é igualmente útil para manter uma base de código antiga com @import e para escrever novas folhas de estilo baseadas em módulos.
A folha é gratuita e renderizada no navegador. Filtre cada trecho em tempo real com a caixa de busca, salte para uma seção pelo sumário fixo, clique em qualquer trecho para copiá-lo para sua folha de estilos e imprima a página para uma referência SCSS em papel.
Como usar Folha de referência SASS
- Percorra as seções, de Variáveis e Aninhamento até Mixins e Módulos embutidos.
- Busque por um recurso como mixin, @use ou map para filtrar a folha em tempo real.
- Salte para Controle de fluxo ou Placeholders e herança pela barra lateral fixa.
- Clique em um trecho ou no ícone de copiar para copiar o SCSS para sua folha de estilos.
- Imprima a folha se preferir uma referência em papel enquanto refatora estilos.
Perguntas frequentes
Dez seções: variáveis, aninhamento, partials e módulos, mixins, funções, operadores e matemática, controle de fluxo, módulos embutidos, placeholders e herança, e interpolação mais miscelânea.
Sim. A seção de partials e módulos mostra importações baseadas em @use e namespacing, e a seção de módulos embutidos lista as funções padrão com namespace usadas no Sass moderno.
Ambos estão na folha: mixins são incluídos com @include e podem receber argumentos, enquanto placeholders são estendidos com @extend e compartilham um único seletor gerado. As seções relevantes mostram a sintaxe de cada um.
Sim. Clique em qualquer trecho SCSS ou no seu ícone de copiar ao passar o mouse e ele é copiado para sua área de transferência com uma breve confirmação.
Sim, totalmente gratuita — executada no navegador, pesquisável e imprimível sem conta.
Pesquisas populares
sass cheat sheet
scss syntax reference
sass mixins example
sass variables
sass nesting rules
use vs import sass
sass built-in modules
sass each and for loops
Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.