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.
Variáveis
10$primary: #1d6f42;
Declara uma variável
$radius: 4px !default;
Define só se ainda não estiver definida
$theme: dark !global;
Atribui ao escopo global de dentro de um bloco
.box { $w: 10px; width: $w; }
Variável local, com escopo no bloco
$font-stack: 'Inter', sans-serif;
Valor de string/lista
$gap: 8px * 2;
Variáveis podem conter valores computados
color: $primary;
Usa uma variável como valor de propriedade
$sizes: 4px, 8px, 16px;
Uma variável de lista separada por vírgulas
$config: ('gap': 8px);
Uma variável de mapa (pares chave/valor)
$on: true;
Variável booleana para controlo de fluxo
Aninhamento
9.card { .title { color: red; } }
Aninha um seletor dentro do seu pai
.btn { &:hover { opacity: .8; } }
& refere-se ao seletor pai
.btn { &.is-active {} }
Seletor pai composto com &
.list { & + & { margin-top: 8px; } }
Regra de irmão adjacente usando &
.menu { .dark & { color: #fff; } }
Coloca & no fim para anteceder um contexto
.box { font: { size: 14px; weight: 700; } }
Propriedades aninhadas para um namespace (font-*)
.grid { > .col {} }
Combinador de filho aninhado
@media (min-width: 768px) { .col { width: 50%; } }
Aninha media queries dentro de uma regra também
.a { color: red; .b & { color: blue; } }
Reordena o contexto movendo &
Partials e módulos
10_base.scss
Ficheiro partial (sublinhado inicial, não compilado sozinho)
@use 'base';
Carrega um módulo (namespace pelo nome do ficheiro)
base.$primary;
Acede a um membro pelo seu namespace
@use 'base' as b;
Carrega um módulo sob um namespace personalizado
@use 'base' as *;
Carrega no namespace global (sem prefixo)
@use 'theme' with ($primary: #000);
Configura as variáveis !default de um módulo ao carregar
@forward 'buttons';
Reexporta um módulo a partir de um ponto de entrada
@forward 'buttons' as btn-*;
Encaminha membros com um prefixo
@forward 'src/list' hide list-reset;
Encaminha mas oculta membros específicos
@forward 'config' with ($gap: 4px !default);
Encaminha e define padrões configuráveis
Mixins
10@mixin reset { margin: 0; padding: 0; }
Define um bloco reutilizável de declarações
@include reset;
Aplica um mixin
@mixin pad($x) { padding: $x; }
Mixin com um argumento
@include pad(8px);
Passa um argumento ao incluir
@mixin pad($x: 4px) { padding: $x; }
Argumento com valor padrão
@include pad($x: 12px);
Passa um argumento por palavra-chave
@mixin shadow($a...) { box-shadow: $a; }
Argumentos arbitrários (variáveis)
@mixin card { border: 1px solid; @content; }
Aceita um bloco @content
@include card { color: red; }
Passa um bloco para o @content do mixin
@mixin on-dark { @content; }
Envolve regras arbitrárias passadas via @content
Funções
9@function double($n) { @return $n * 2; }
Define uma função que retorna um valor
width: double(8px);
Chama uma função personalizada
@function pad($x: 4px) { @return $x; }
Função com argumento padrão
@function sum($a, $b) { @return $a + $b; }
Múltiplos argumentos
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
Funções podem conter controlo de fluxo
@use 'sass:math';
Importa um módulo nativo para usar em funções
@function half($n) { @return math.div($n, 2); }
Usa funções de módulo dentro das tuas
@function list-len($l) { @return list.length($l); }
Funções podem envolver nativas
margin: sum(4px, 8px);
Usa o valor retornado como valor de propriedade
Operadores e matemática
10@use 'sass:math';
Carrega o módulo math para divisão
width: math.div(100%, 3);
Divisão (math.div, não o / obsoleto)
width: 100% - 20px;
Subtração
margin: 4px + 4px;
Adição
width: 2 * 8px;
Multiplicação
$r: 10 % 3;
Módulo (resto)
@if $a == $b {}
Comparação de igualdade
@if $a >= 768px {}
Comparação maior ou igual
@if $a and $b {}
E lógico
@if not $disabled {}
Negação lógica
Fluxo de controle
9@if $on { display: block; }
Bloco condicional
@else if $alt { display: flex; }
Condição adicional
@else { display: none; }
Ramo de fallback
@each $c in red, green, blue {}
Itera sobre uma lista
@each $name, $val in $map {}
Itera sobre as chaves e valores de um mapa
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
Gera regras a partir de um mapa
@for $i from 1 through 3 {}
Loop incluindo o valor final
@for $i from 0 to 3 {}
Loop excluindo o valor final
@while $i > 0 { $i: $i - 1; }
Repetir enquanto a condição for verdadeira
Módulos nativos
14@use 'sass:math'; math.floor(4.7)
Arredonda para baixo ao inteiro mais próximo
math.ceil(4.1)
Arredonda para cima ao inteiro mais próximo
math.round(4.5)
Arredonda ao inteiro mais próximo
math.percentage(math.div(1, 4))
Converte um rácio sem unidade em percentagem
@use 'sass:string'; string.to-upper-case('hi')
Converte uma string em maiúsculas
string.quote(hello)
Envolve um valor em aspas
@use 'sass:color'; color.adjust($c, $lightness: 10%)
Ajusta um canal de cor por um valor
color.scale($c, $lightness: 20%)
Escala um canal de cor de forma fluida
color.mix($a, $b, 50%)
Mistura duas cores
@use 'sass:list'; list.length($l)
Número de itens numa lista
list.nth($l, 1)
Obtém o n-ésimo item (base 1)
@use 'sass:map'; map.get($m, 'gap')
Lê um valor de um mapa por chave
map.merge($a, $b)
Funde dois mapas
map.keys($m)
Obtém uma lista das chaves de um mapa
Placeholders e herança
9%card { border: 1px solid; }
Seletor placeholder (não emitido por si só)
.box { @extend %card; }
Herda os estilos de um placeholder
.alert { color: red; }
Um seletor normal para estender
.error { @extend .alert; }
Estende um seletor real
.note { @extend .alert !optional; }
!optional: não dá erro se o alvo estiver em falta
%btn-base { padding: 8px; }
Partilha uma base entre vários botões
.btn-primary { @extend %btn-base; }
Vários seletores partilham uma regra via @extend
.btn-ghost { @extend %btn-base; }
Cada extensão é agrupada na saída
@include card;
Prefira mixins a @extend para reutilização parametrizada
Interpolação e diversos
12.icon-#{$name} { content: ''; }
Interpola uma variável num seletor
width: calc(100% - #{$gap});
Interpola um valor Sass dentro de calc()
content: '#{$count} items';
Interpola dentro de uma string
--bs-#{$key}: #{$val};
Constrói propriedades CSS personalizadas dinamicamente
$map: ('sm': 576px, 'md': 768px);
Define um mapa de pares chave/valor
map.get($map, 'md')
Lê um valor de mapa (via sass:map)
@debug $value;
Imprime um valor na consola durante a compilação
@warn 'deprecated';
Emite um aviso em tempo de compilação
@error 'invalid input';
Aborta a compilação com um erro
// inline comment
Comentário silencioso (removido da saída)
/* block comment */
Comentário CSS (mantido na saída comprimida se /*! )
@import 'base';
Import legado — obsoleto, prefira @use / @forward
Nenhuma entrada corresponde a “:q”.
Precisa de ajuda?
Encontrou um problema com esta ferramenta? Avise a nossa equipa.