Chuleta de SASS
Una referencia de Sass / SCSS imprimible y con búsqueda — variables, anidamiento, módulos @use, mixins, funciones, control de flujo y módulos integrados. Gratis.
Variables
10$primary: #1d6f42;
Declarar una variable
$radius: 4px !default;
Establecer solo si aún no está definida
$theme: dark !global;
Asignar al ámbito global desde dentro de un bloque
.box { $w: 10px; width: $w; }
Variable local, limitada al bloque
$font-stack: 'Inter', sans-serif;
Valor de cadena / lista
$gap: 8px * 2;
Las variables pueden contener valores calculados
color: $primary;
Usar una variable como valor de propiedad
$sizes: 4px, 8px, 16px;
Una variable de lista separada por comas
$config: ('gap': 8px);
Una variable de mapa (pares clave/valor)
$on: true;
Variable booleana para control de flujo
Anidamiento
9.card { .title { color: red; } }
Anidar un selector dentro de su padre
.btn { &:hover { opacity: .8; } }
& hace referencia al selector padre
.btn { &.is-active {} }
Selector padre compuesto con &
.list { & + & { margin-top: 8px; } }
Regla de hermano adyacente usando &
.menu { .dark & { color: #fff; } }
Colocar & al final para anteponer un contexto
.box { font: { size: 14px; weight: 700; } }
Propiedades anidadas para un espacio de nombres (font-*)
.grid { > .col {} }
Combinador de hijo anidado
@media (min-width: 768px) { .col { width: 50%; } }
Anidar media queries dentro de una regla también
.a { color: red; .b & { color: blue; } }
Reordenar el contexto moviendo &
Parciales y módulos
10_base.scss
Archivo parcial (guion bajo inicial, no se compila solo)
@use 'base';
Cargar un módulo (con espacio de nombres por nombre de archivo)
base.$primary;
Acceder a un miembro a través de su espacio de nombres
@use 'base' as b;
Cargar un módulo bajo un espacio de nombres personalizado
@use 'base' as *;
Cargar en el espacio de nombres global (sin prefijo)
@use 'theme' with ($primary: #000);
Configurar las variables !default de un módulo al cargarlo
@forward 'buttons';
Reexportar un módulo desde un punto de entrada
@forward 'buttons' as btn-*;
Reexportar miembros con un prefijo
@forward 'src/list' hide list-reset;
Reexportar pero ocultando miembros específicos
@forward 'config' with ($gap: 4px !default);
Reexportar y establecer valores por defecto configurables
Mixins
10@mixin reset { margin: 0; padding: 0; }
Definir un bloque reutilizable de declaraciones
@include reset;
Aplicar un mixin
@mixin pad($x) { padding: $x; }
Mixin con un argumento
@include pad(8px);
Pasar un argumento al incluir
@mixin pad($x: 4px) { padding: $x; }
Argumento con un valor por defecto
@include pad($x: 12px);
Pasar un argumento por palabra clave
@mixin shadow($a...) { box-shadow: $a; }
Argumentos arbitrarios (variables)
@mixin card { border: 1px solid; @content; }
Aceptar un bloque @content
@include card { color: red; }
Pasar un bloque al @content del mixin
@mixin on-dark { @content; }
Envolver reglas arbitrarias pasadas vía @content
Funciones
9@function double($n) { @return $n * 2; }
Definir una función que devuelve un valor
width: double(8px);
Llamar a una función personalizada
@function pad($x: 4px) { @return $x; }
Función con un argumento por defecto
@function sum($a, $b) { @return $a + $b; }
Varios argumentos
@function clampn($n) { @if $n < 0 { @return 0; } @return $n; }
Las funciones pueden contener control de flujo
@use 'sass:math';
Importar un módulo integrado para usar en funciones
@function half($n) { @return math.div($n, 2); }
Usar funciones de módulos dentro de las tuyas
@function list-len($l) { @return list.length($l); }
Las funciones pueden envolver funciones integradas
margin: sum(4px, 8px);
Usar el valor devuelto como valor de propiedad
Operadores y matemáticas
10@use 'sass:math';
Cargar el módulo math para la división
width: math.div(100%, 3);
División (math.div, no el obsoleto /)
width: 100% - 20px;
Resta
margin: 4px + 4px;
Suma
width: 2 * 8px;
Multiplicación
$r: 10 % 3;
Módulo (resto)
@if $a == $b {}
Comparación de igualdad
@if $a >= 768px {}
Comparación mayor o igual
@if $a and $b {}
Y lógico
@if not $disabled {}
Negación lógica
Flujo de control
9@if $on { display: block; }
Bloque condicional
@else if $alt { display: flex; }
Condición adicional
@else { display: none; }
Rama de respaldo
@each $c in red, green, blue {}
Iterar sobre una lista
@each $name, $val in $map {}
Iterar sobre las claves y valores de un mapa
@each $k, $v in ('sm': 4px, 'md': 8px) { .#{$k} { gap: $v; } }
Generar reglas a partir de un mapa
@for $i from 1 through 3 {}
Bucle que incluye el valor final
@for $i from 0 to 3 {}
Bucle que excluye el valor final
@while $i > 0 { $i: $i - 1; }
Bucle mientras se cumple una condición
Módulos integrados
14@use 'sass:math'; math.floor(4.7)
Redondear hacia abajo al entero más cercano
math.ceil(4.1)
Redondear hacia arriba al entero más cercano
math.round(4.5)
Redondear al entero más cercano
math.percentage(math.div(1, 4))
Convertir una proporción sin unidades a porcentaje
@use 'sass:string'; string.to-upper-case('hi')
Poner una cadena en mayúsculas
string.quote(hello)
Envolver un valor entre comillas
@use 'sass:color'; color.adjust($c, $lightness: 10%)
Ajustar un canal de color en una cantidad
color.scale($c, $lightness: 20%)
Escalar un canal de color de forma fluida
color.mix($a, $b, 50%)
Mezclar dos colores
@use 'sass:list'; list.length($l)
Número de elementos de una lista
list.nth($l, 1)
Obtener el n-ésimo elemento (base 1)
@use 'sass:map'; map.get($m, 'gap')
Leer un valor de un mapa por clave
map.merge($a, $b)
Fusionar dos mapas
map.keys($m)
Obtener una lista de las claves de un mapa
Placeholders y herencia
9%card { border: 1px solid; }
Selector placeholder (no se emite por sí solo)
.box { @extend %card; }
Heredar los estilos de un placeholder
.alert { color: red; }
Un selector normal para extender
.error { @extend .alert; }
Extender un selector real
.note { @extend .alert !optional; }
!optional: no dar error si el objetivo no existe
%btn-base { padding: 8px; }
Compartir una base entre muchos botones
.btn-primary { @extend %btn-base; }
Varios selectores comparten una regla vía @extend
.btn-ghost { @extend %btn-base; }
Cada extensión se agrupa en la salida
@include card;
Preferir mixins sobre @extend para reutilización parametrizada
Interpolación y varios
12.icon-#{$name} { content: ''; }
Interpolar una variable en un selector
width: calc(100% - #{$gap});
Interpolar un valor de Sass dentro de calc()
content: '#{$count} items';
Interpolar dentro de una cadena
--bs-#{$key}: #{$val};
Construir propiedades personalizadas CSS dinámicamente
$map: ('sm': 576px, 'md': 768px);
Definir un mapa de pares clave/valor
map.get($map, 'md')
Leer un valor de mapa (vía sass:map)
@debug $value;
Imprimir un valor en la consola al compilar
@warn 'deprecated';
Emitir una advertencia en tiempo de compilación
@error 'invalid input';
Abortar la compilación con un error
// inline comment
Comentario silencioso (eliminado de la salida)
/* block comment */
Comentario CSS (se conserva en la salida comprimida si /*! )
@import 'base';
Import heredado — obsoleto, preferir @use / @forward
Ninguna entrada coincide con “:q”.
¿Necesitas ayuda?
¿Encontraste un problema con esta herramienta? Avísanos.