CSS Academy · Lección

Funciones y flujo de control de Sass

Escriba lógica CSS dinámica mediante funciones integradas de Sass y las directivas @if, @each y @for.

Lección 4 de 412 pasos

Funciones y flujo de control de Sass es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.

Funciones integradas de Sass

Sass proporciona muchas funciones integradas para manipular colores, realizar cálculos, operar con cadenas y mucho más. Se ejecutan durante la compilación.

<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>

Funciones de color

Funciones de color principales de Sass:

darken($color, $amount)
lighten($color, $amount)
saturate($color, $amount)
mix($color1, $color2, $weight)
rgba($color, $alpha)
color.scale($color, $lightness: 20%)

Funciones personalizadas con @function

Defina funciones reutilizables que devuelvan valores (no reglas CSS):

<h2 class="heading">Heading (2rem)</h2>
  <p class="body">Body text (1.125rem)</p>

Control de flujo @if @else

Genere CSS condicionalmente según los valores de las variables:

<p class="text-large">Large text variant</p>
  <p class="text-small">Small text variant</p>
  <p class="text-default">Default text variant</p>

Bucle @each

Itere sobre una lista o un mapa para generar varias reglas:

<button class="btn-primary">Primary</button>
  <button class="btn-danger">Danger</button>
  <button class="btn-success">Success</button>

Bucle @for

Genere CSS para un 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>

Bucle @while

Repita el bucle mientras una condición sea verdadera. Úselo con moderación: @each y @for cubren la mayoría de los 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 de Sass

Los mapas son estructuras de datos de pares clave-valor en Sass:

<div class="box">Responsive box (resize wider than 768px to see color change)</div>

@error @warn @debug

Sass proporciona tres funciones de diagnóstico:

@error: detiene la compilación y muestra un mensaje
@warn: registra una advertencia sin detener la compilación
@debug: registra un valor durante el desarrollo

Interpolación #{...}

Use #{$variable} para insertar valores de variables en selectores, nombres de propiedades o consultas de medios:

<p class="element">Interpolated property (#{$property})</p>

Comprobación rápida

¿Cuál es la diferencia entre un @mixin y una @function de Sass?

Responde en la lección interactiva

Resumen

Las funciones de color integradas de Sass (darken, lighten, mix) permiten manipular colores durante la compilación. Una @function personalizada devuelve un valor calculado. @if/@else añade una salida condicional. @each itera sobre listas y mapas. @for itera sobre rangos numéricos. Estas funcionalidades permiten crear hojas de estilo potentes y DRY con una repetición mínima.

Gratis para empezar

Aprende CSS con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 40
Lecciones: 159

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Funciones y flujo de control de Sass» es gratis?

Sí — el texto completo de «Funciones y flujo de control de Sass» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Funciones y flujo de control de Sass»?

Escriba lógica CSS dinámica mediante funciones integradas de Sass y las directivas @if, @each y @for. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar CSS Academy?

No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Funciones y flujo de control de Sass»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de CSS Academy?

Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a CSS Academy