CSS Academy · Lección

Variables, anidamiento y parciales

Use variables de Sass para valores reutilizables, anide selectores para mejorar la legibilidad y divida el código en parciales.

Variables, anidamiento y parciales es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 1 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.

¿Qué es Sass?

Sass (Syntactically Awesome Stylesheets) es un preprocesador de CSS que amplía CSS con variables, anidamiento, mixins, funciones y mucho más. Los archivos de Sass se compilan en CSS estándar.

Las dos sintaxis de Sass

Sass tiene dos formatos de archivo:

.scss — sintaxis compatible con CSS y con funciones adicionales (la más popular)
.sass — sintaxis basada en la indentación (sin llaves ni punto y coma)

Este curso trata sobre SCSS.

Variables de Sass

Las variables de Sass usan el prefijo $. Se resuelven durante la compilación; a diferencia de las propiedades personalizadas de CSS, no permanecen activas en el navegador.

<button class="button">Sass Variables</button>

Variables de Sass frente a propiedades personalizadas de CSS

Diferencias principales:

Variables de Sass: se resuelven durante la compilación, no están disponibles en el navegador y no pueden cambiarse en tiempo de ejecución
Propiedades personalizadas de CSS: permanecen activas en el navegador, pueden cambiarse mediante JS y tienen en cuenta la cascada

Práctica moderna: use ambas. Variables de Sass para la lógica de compilación; propiedades personalizadas de CSS para la tematización en tiempo de ejecución.

Anidamiento

Sass permite anidar selectores unos dentro de otros, reflejando la estructura HTML. El resultado compilado usa selectores descendientes.

<div class="card">
    <div class="card-title">Card title</div>
    <div class="card-body">Card body text</div>
  </div>

Selector padre &

& hace referencia al selector padre, lo que permite crear patrones similares a BEM y selectores de estado:

<button class="button">Button</button>
  <button class="button active">Active state (font-weight: bold)</button>
  <button class="button--primary">BEM modifier: button--primary</button>
  <span class="button__icon">&#128279;</span> BEM element: button__icon

Advertencia sobre la profundidad del anidamiento

Evite anidar a más de 3 niveles de profundidad. El anidamiento profundo produce selectores demasiado específicos y hace que el CSS sea frágil. Si necesita anidar a mucha profundidad, es probable que deba refactorizar la arquitectura CSS.

Partials de Sass

Un partial es un archivo de Sass cuyo nombre comienza con un guion bajo (_card.scss). Los partials no se compilan de forma independiente; deben importarse en otro archivo. Así se evita generar archivos CSS de salida no deseados.

@use para importar

El Sass moderno usa @use para importar partials. Proporciona espacios de nombres que evitan conflictos entre variables:

<h2 class="heading">Namespaced heading (t.$primary-color)</h2>

@forward para bibliotecas

@forward vuelve a exportar los miembros de un módulo para que puedan usarlos los archivos que importen su biblioteca:

<span class="badge">Forwarded token (lib.$primary-color)</span>

@import antiguo (obsoleto)

La directiva @import antigua está obsoleta en Dart Sass. Migre a @use y @forward para mejorar los espacios de nombres y el rendimiento.

Comprobación rápida

¿Qué selector CSS genera Sass al anidar .nav { .link { color: white; } }?

Repaso

Las variables de Sass ($name) se resuelven durante la compilación. El anidamiento refleja la estructura HTML, pero evite superar los 3 niveles de profundidad. & hace referencia al selector padre para pseudoclases, estados y modificadores BEM. Los partials (_file.scss) se importan, no se compilan directamente. Use @use (no @import) para cargar módulos en el Sass moderno.

Preguntas frecuentes

¿La lección «Variables, anidamiento y parciales» es gratis?

Sí — el texto completo de «Variables, anidamiento y parciales» 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 «Variables, anidamiento y parciales»?

Use variables de Sass para valores reutilizables, anide selectores para mejorar la legibilidad y divida el código en parciales. 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 1 de 4.

¿Cuánto tiempo toma la lección «Variables, anidamiento y parciales»?

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