Frontend

Sass / SCSS Guide Cheat Sheet

Nesting, variáveis, mixins, herança e funções no pré-processador Sass (SCSS).

Básico

Uso de variáveis para cores e valores reutilizáveis.

$primary-color: #3498db;
body { color: $primary-color; }

Nesting (aninhamento) de seletores para código mais limpo.

nav {
  ul { margin: 0; }
  li { display: inline; }
}

Definição de Mixins para blocos de código reutilizáveis.

@mixin flex-center {
  display: flex;
  justify-content: center;
}

Inclusão de um Mixin em um seletor.

.box { @include flex-center; }

Herança de estilos usando @extend.

.btn { padding: 10px; }
.btn-primary { @extend .btn; background: blue; }

Importação e modularização de arquivos Sass.

@import 'base';
@use 'buttons' as btn;