Funções Sass e fluxo de controle
Escreva lógica CSS dinâmica usando funções integradas do Sass e as diretivas @if, @each e @for.
Funções Sass e fluxo de controle é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Funções integradas do Sass
O Sass fornece muitas funções integradas para manipulação de cores, matemática, operações com cadeias de caracteres e muito mais. Elas são executadas em tempo de compilação.
<div class="darker">darken($base, 15%)</div>
<div class="lighter">lighten($base, 15%)</div>
<div class="faded">transparentize($base, 0.5)</div>
<div class="mixed">mix($base, white, 60%)</div>
Funções de cor
Principais funções de cor do Sass:
darken($color, $amount)lighten($color, $amount)saturate($color, $amount)mix($color1, $color2, $weight)rgba($color, $alpha)color.scale($color, $lightness: 20%)
Funções personalizadas com @function
Defina funções reutilizáveis que retornam valores (não regras CSS):
<h2 class="heading">Heading (2rem)</h2>
<p class="body">Body text (1.125rem)</p>
Fluxo de controle com @if e @else
Gere CSS condicionalmente com base nos valores das variáveis:
<p class="text-large">Large text variant</p>
<p class="text-small">Small text variant</p>
<p class="text-default">Default text variant</p>
Laço @each
Percorra uma lista ou um mapa para gerar várias regras:
<button class="btn-primary">Primary</button>
<button class="btn-danger">Danger</button>
<button class="btn-success">Success</button>
Laço @for
Gere CSS para um intervalo de valores:
<div class="col-1">col-1 (20%)</div>
<div class="col-2">col-2 (40%)</div>
<div class="col-3">col-3 (60%)</div>
<div class="col-4">col-4 (80%)</div>
<div class="col-5">col-5 (100%)</div>
Laço @while
Repita enquanto uma condição for verdadeira. Use com moderação — @each e @for abrangem a maioria dos casos:
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
Mapas do Sass
Os mapas são estruturas de dados de chave e valor no Sass:
<div class="box">Responsive box (resize wider than 768px to see color change)</div>
@error @warn @debug
O Sass fornece três funções de diagnóstico:
@error: interrompe a compilação com uma mensagem@warn: registra um aviso sem interromper@debug: registra um valor durante o desenvolvimento
Interpolação #{...}
Use #{$variable} para inserir valores de variáveis em seletores, nomes de propriedades ou consultas de mídia:
<p class="element">Interpolated property (#{$property})</p>
Verificação rápida
Qual é a diferença entre um @mixin e uma @function do Sass?
Recapitulação
As funções de cor integradas do Sass (escurecer, clarear e misturar) permitem manipular cores em tempo de compilação. Uma @function personalizada retorna um valor calculado. @if/@else adiciona saída condicional. @each percorre listas e mapas. @for percorre intervalos numéricos. Esses recursos permitem criar folhas de estilo poderosas e DRY, com o mínimo de repetição.
Aprenda CSS com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 40
- Aulas
- 159
Perguntas Frequentes
A aula “Funções Sass e fluxo de controle” é grátis?
Sim — o texto completo de “Funções Sass e fluxo de controle” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Funções Sass e fluxo de controle”?
Escreva lógica CSS dinâmica usando funções integradas do Sass e as diretivas @if, @each e @for. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Funções Sass e fluxo de controle”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Aninhamento de variáveis e parciais
- Mixins e inclusões
- Seletores de extensão e marcadores de posição
- Funções Sass e fluxo de controle