Cuando un proyecto web empieza a crecer, el CSS también crece con él. Lo que al principio parecía una hoja de estilos sencilla puede convertirse, poco a poco, en un conjunto de reglas repetidas, pequeñas variaciones, media queries duplicadas y patrones difíciles de mantener.
En ese punto, Sass sigue siendo una herramienta muy útil para escribir estilos de forma más ordenada, especialmente cuando trabajamos con arquitectura CSS, componentes reutilizables o sistemas de diseño.
Uno de los recursos más prácticos de Sass son los mixins. Entender cómo utilizar mixins en Sass te permite escribir código más limpio, evitar repeticiones innecesarias y crear patrones reutilizables para botones, layouts, breakpoints, estados visuales, sombras, animaciones o cualquier bloque de estilos que aparezca varias veces en un proyecto.
Si ya has trabajado con Sass o estás valorando incorporarlo a tu flujo de trabajo, puede que también te interese leer este artículo sobre 10 razones para utilizar Sass en tu próximo proyecto, donde explico por qué sigue teniendo sentido en muchos proyectos frontend actuales.
En este artículo vamos a ver qué son los mixins, cuáles son sus ventajas, cuándo conviene utilizarlos, cuándo es mejor evitarlos y varios ejemplos útiles de mixins en Sass que puedes adaptar a tus propios proyectos.
Qué son los mixins en Sass
Un mixin en Sass es un bloque reutilizable de código CSS que se define con @mixin y se utiliza con @include.
Dicho de forma sencilla: un mixin funciona como una pequeña plantilla de estilos. Puedes definir un conjunto de propiedades una sola vez y reutilizarlas en distintos selectores sin tener que copiar y pegar el mismo código una y otra vez.
Por ejemplo, imagina que en tu proyecto utilizas muchas veces el mismo patrón para centrar elementos con Flexbox:
.card {
display: flex;
align-items: center;
justify-content: center;
}
.modal {
display: flex;
align-items: center;
justify-content: center;
}
.hero-content {
display: flex;
align-items: center;
justify-content: center;
}El código funciona, pero es repetitivo. Si más adelante quieres cambiar la forma de centrar los elementos, tendrás que modificarlo en varios lugares.
Con un mixin, puedes centralizar ese patrón:
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.card {
@include flex-center;
}
.modal {
@include flex-center;
}
.hero-content {
@include flex-center;
}El resultado compilado seguirá siendo CSS normal, pero tu código fuente será más claro, más breve y más fácil de mantener.
Sintaxis básica de un mixin
La sintaxis mínima de un mixin en Sass es esta:
@mixin nombre-del-mixin {
propiedad: valor;
propiedad: valor;
}Y para utilizarlo dentro de un selector:
.selector {
@include nombre-del-mixin;
}Un ejemplo muy básico podría ser el de una tarjeta reutilizable:
@mixin card-base {
border-radius: 1rem;
padding: 1.5rem;
background-color: #ffffff;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}
.article-card {
@include card-base;
}
.project-card {
@include card-base;
}Este mixin crea una base visual común para tarjetas. Después, cada componente puede añadir sus propias variaciones:
.project-card {
@include card-base;
border: 1px solid #e8e8e8;
}Así consigues una base consistente sin renunciar a la personalización.
Resultado CSS compilado
Cuando Sass compila el código anterior, el navegador no ve @mixin ni @include. Solo recibe CSS estándar:
.article-card {
border-radius: 1rem;
padding: 1.5rem;
background-color: #ffffff;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
}
.project-card {
border-radius: 1rem;
padding: 1.5rem;
background-color: #ffffff;
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);
border: 1px solid #e8e8e8;
}Esto es importante: Sass no se ejecuta directamente en el navegador. Sass se compila antes y genera CSS final. Por eso, los mixins son una herramienta de organización en tiempo de desarrollo.
Ventajas de utilizar mixins en Sass
Los mixins no sirven únicamente para escribir menos código. Bien utilizados, pueden mejorar la arquitectura de estilos de un proyecto completo.
Reducen la repetición de código
La ventaja más evidente es que ayudan a evitar bloques repetidos. Esto encaja con el principio DRY, es decir, Don’t Repeat Yourself, muy habitual en desarrollo.
Si repites muchas veces el mismo patrón visual, un mixin puede ayudarte a mantenerlo en un único lugar. Por ejemplo:
@mixin transition-base {
transition: all 0.25s ease;
}
.button {
@include transition-base;
}
.card {
@include transition-base;
}
.nav-link {
@include transition-base;
}Ahora, si decides ajustar la duración de la transición, solo tienes que cambiar el mixin:
@mixin transition-base {
transition: all 0.2s ease-in-out;
}Ese cambio se aplicará a todos los selectores que incluyan el mixin.
Si quieres profundizar más en cómo funcionan las transiciones y cuándo conviene usarlas frente a las animaciones, puedes leer también el artículo sobre la diferencia entre transition y animation en CSS.
Mejoran la consistencia visual
En proyectos con muchas páginas, componentes o personas tocando el mismo código, es fácil que aparezcan pequeñas inconsistencias: botones con radios diferentes, sombras ligeramente distintas, espaciados no alineados o breakpoints duplicados con valores diferentes.
Los mixins ayudan a crear patrones compartidos. Por ejemplo, puedes definir una sombra estándar:
@mixin soft-shadow {
box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.08);
}Y aplicarla en todos los componentes que necesiten ese mismo tratamiento visual:
.pricing-card {
@include soft-shadow;
}
.testimonial {
@include soft-shadow;
}Esto no solo mejora el código, también mejora la coherencia de la interfaz.
Permiten crear patrones flexibles con argumentos
Una de las grandes ventajas de los mixins es que pueden recibir argumentos. Esto significa que no tienen por qué generar siempre el mismo CSS exacto.
Puedes pasarles valores para crear variaciones controladas:
@mixin button-variant($bg-color, $text-color) {
background-color: $bg-color;
color: $text-color;
border: none;
border-radius: 999px;
padding: 0.75rem 1.25rem;
font-weight: 600;
cursor: pointer;
}
.button-primary {
@include button-variant(#cc2b5e, #ffffff);
}
.button-secondary {
@include button-variant(#f8e0ea, #753a88);
}Este mixin permite crear variantes de botón sin repetir toda la estructura.
También puedes usar valores por defecto:
@mixin button-variant($bg-color: #cc2b5e, $text-color: #ffffff) {
background-color: $bg-color;
color: $text-color;
border: none;
border-radius: 999px;
padding: 0.75rem 1.25rem;
font-weight: 600;
}Así puedes llamar al mixin sin argumentos:
.button-primary {
@include button-variant;
}O sobrescribir solo cuando lo necesites:
.button-light {
@include button-variant(#ffffff, #020101);
}Facilitan la gestión de media queries
Uno de los usos más habituales de los mixins en Sass es la gestión de breakpoints. En lugar de escribir media queries manualmente en cada componente, puedes centralizarlas.
@mixin respond-to($breakpoint) {
@if $breakpoint == tablet {
@media (min-width: 768px) {
@content;
}
}
@if $breakpoint == desktop {
@media (min-width: 1024px) {
@content;
}
}
@if $breakpoint == wide {
@media (min-width: 1280px) {
@content;
}
}
}Después puedes usarlo así:
.hero {
padding: 3rem 1.5rem;
@include respond-to(tablet) {
padding: 4rem 2rem;
}
@include respond-to(desktop) {
padding: 6rem 4rem;
}
}Aquí aparece @content, una característica muy útil de Sass que permite pasar un bloque de estilos dentro del @include.
Este patrón resulta especialmente interesante cuando trabajas con diseño responsive. En ese contexto, también puedes revisar el artículo sobre cómo utilizar media queries internas en imágenes SVG.
Cómo utilizar mixins en Sass paso a paso
Para sacarles partido, no basta con saber escribir @mixin. También conviene pensar dónde colocarlos, cómo nombrarlos y cómo evitar que se conviertan en una capa de abstracción innecesaria.
Paso 1: detecta patrones repetidos
Antes de crear un mixin, pregúntate si ese bloque de estilos se repite de verdad, si lo vas a necesitar en más de dos o tres sitios y si representa un patrón del proyecto.
Buenos candidatos para convertirse en mixins:
- Centrado con Flexbox.
- Media queries.
- Estilos base de botones.
- Estados
hoveryfocus. - Estilos visuales reutilizables.
- Helpers de accesibilidad.
- Patrones de truncado de texto.
- Animaciones repetidas.
- Contenedores con ancho máximo.
En cambio, no suele ser buena idea crear un mixin para un estilo que solo se usa una vez o para un bloque demasiado específico de un componente.
Un mixin debe resolver un problema concreto. Si el nombre del mixin tiene que explicar demasiadas cosas, probablemente está haciendo demasiado.
Paso 2: usa nombres claros
Los nombres importan. Un buen nombre permite entender qué hace el mixin sin tener que abrir su definición.
Mejor esto:
@mixin visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}Que esto:
@mixin hidden-thing {
position: absolute;
width: 1px;
height: 1px;
}El primer nombre comunica intención. El segundo no.
También conviene evitar nombres demasiado genéricos como box, style, effect o custom. En un proyecto grande, esos nombres se vuelven difíciles de mantener.
Paso 3: organiza los mixins en archivos separados
En proyectos pequeños puedes escribir los mixins en el mismo archivo, pero en un proyecto real conviene separarlos.
Una estructura sencilla podría ser:
scss/
abstracts/
_variables.scss
_mixins.scss
base/
_reset.scss
_typography.scss
components/
_buttons.scss
_cards.scss
main.scssEn Sass moderno es recomendable trabajar con @use y @forward en lugar de depender de @import.
Por ejemplo:
// abstracts/_mixins.scss
@mixin flex-center {
display: flex;
align-items: center;
justify-content: center;
}Luego, en otro archivo:
@use "../abstracts/mixins" as mixins;
.card {
@include mixins.flex-center;
}Este enfoque evita contaminar el espacio global y hace que el origen de cada mixin sea más claro.
Ejemplos útiles de mixins en Sass
A continuación tienes varios ejemplos prácticos que puedes adaptar a tus propios proyectos.
Mixin para centrar elementos con Flexbox
@mixin flex-center($direction: row, $gap: 0) {
display: flex;
flex-direction: $direction;
align-items: center;
justify-content: center;
gap: $gap;
}
.empty-state {
@include flex-center(column, 1rem);
min-height: 20rem;
text-align: center;
}Este mixin es útil para componentes como modales, tarjetas vacías, secciones hero o layouts centrados.
Mixin para media queries
@mixin media-up($size) {
@if $size == sm {
@media (min-width: 640px) {
@content;
}
}
@if $size == md {
@media (min-width: 768px) {
@content;
}
}
@if $size == lg {
@media (min-width: 1024px) {
@content;
}
}
@if $size == xl {
@media (min-width: 1280px) {
@content;
}
}
}Uso:
.blog-grid {
display: grid;
gap: 1.5rem;
@include media-up(md) {
grid-template-columns: repeat(2, 1fr);
}
@include media-up(lg) {
grid-template-columns: repeat(3, 1fr);
}
}Este patrón ayuda a mantener las media queries consistentes y evita escribir valores sueltos por todo el proyecto.
Mixin para botones reutilizables
@mixin button-base {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: 0;
border-radius: 999px;
padding: 0.85rem 1.4rem;
font: inherit;
font-weight: 700;
text-decoration: none;
cursor: pointer;
transition:
transform 0.2s ease,
background-color 0.2s ease,
color 0.2s ease;
}
@mixin button-theme($bg, $color, $hover-bg) {
background-color: $bg;
color: $color;
&:hover {
background-color: $hover-bg;
transform: translateY(-2px);
}
&:focus-visible {
outline: 3px solid rgba($bg, 0.35);
outline-offset: 3px;
}
}
.button-primary {
@include button-base;
@include button-theme(#cc2b5e, #ffffff, #753a88);
}
.button-soft {
@include button-base;
@include button-theme(#f8e0ea, #753a88, #f1c4d7);
}Aquí separamos la estructura del botón de su tema visual. Esto hace que el código sea más fácil de escalar.
Mixin para texto oculto visualmente
Este tipo de mixin es útil cuando queremos ocultar texto de forma visual pero mantenerlo disponible para tecnologías de asistencia.
@mixin visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.icon-button span {
@include visually-hidden;
}Este patrón puede ser útil en botones que solo muestran un icono, pero que necesitan conservar un nombre accesible para lectores de pantalla.
Mixin para truncar texto
@mixin truncate($lines: 1) {
overflow: hidden;
@if $lines == 1 {
white-space: nowrap;
text-overflow: ellipsis;
} @else {
display: -webkit-box;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
}
}
.card-title {
@include truncate(2);
}Este mixin permite reutilizar un patrón muy habitual en tarjetas de blog, listados de productos o interfaces con contenido dinámico.
Mixin para mantener proporciones de imagen
@mixin aspect-ratio($width, $height) {
aspect-ratio: #{$width} / #{$height};
overflow: hidden;
> img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.post-card__media {
@include aspect-ratio(3, 2);
border-radius: 1rem;
}Este mixin es práctico cuando quieres mantener una línea visual consistente en imágenes destacadas, galerías o tarjetas.
Mixins en Sass vs variables CSS: cuándo usar cada uno
Una duda habitual es si tiene sentido seguir usando Sass cuando CSS moderno ya incluye custom properties, también conocidas como variables CSS.
La respuesta corta es: sí, pero no para lo mismo.
Las variables CSS se declaran con la sintaxis --nombre-variable y se consumen mediante var(). Además, participan en la cascada y pueden cambiar según el contexto del elemento. Esto las hace muy útiles para temas, modos claro/oscuro o valores dinámicos.
Por ejemplo:
:root {
--color-primary: #cc2b5e;
}
.button {
background-color: var(--color-primary);
}Un mixin, en cambio, no existe en tiempo de ejecución. Se compila antes de llegar al navegador.
Por eso, un mixin es ideal para generar bloques completos de CSS, mientras que una variable CSS es ideal para valores que pueden cambiar según el contexto.
Usa mixins cuando necesites generar patrones de CSS
Por ejemplo:
@mixin focus-ring($color) {
&:focus-visible {
outline: 3px solid $color;
outline-offset: 4px;
}
}
.link {
@include focus-ring(#cc2b5e);
}Usa variables CSS cuando necesites valores dinámicos
:root {
--focus-color: #cc2b5e;
}
[data-theme="dark"] {
--focus-color: #f8e0ea;
}
.link:focus-visible {
outline: 3px solid var(--focus-color);
}En muchos proyectos, la mejor solución es combinar ambas herramientas: Sass para organizar y generar CSS, y variables CSS para gestionar valores que deben adaptarse al contexto.
Errores comunes al utilizar mixins en Sass
Los mixins son útiles, pero también pueden utilizarse mal. Estos son algunos errores frecuentes que conviene evitar.
Crear mixins para todo
No todo necesita ser un mixin. Si un bloque de estilos solo se utiliza una vez, probablemente no merece convertirse en una abstracción.
Un exceso de mixins puede hacer que el CSS sea más difícil de leer, porque obliga a saltar constantemente entre archivos para entender qué estilos se están aplicando.
Crear mixins demasiado grandes
Un mixin debería tener una responsabilidad clara. Este ejemplo es problemático:
@mixin complete-card-system {
display: grid;
padding: 2rem;
border-radius: 1rem;
background: white;
color: black;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.12);
h2 {
font-size: 2rem;
}
p {
color: gray;
}
a {
color: red;
}
}Este mixin mezcla layout, estilos visuales, tipografía y estilos de elementos internos. Puede parecer cómodo al principio, pero a la larga será difícil de mantener.
Es mejor dividirlo en piezas pequeñas:
@mixin card-surface {
border-radius: 1rem;
background: white;
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.12);
}
@mixin content-flow($gap: 1rem) {
display: grid;
gap: $gap;
}Así puedes combinar solo lo que necesites.
Usar mixins para valores simples
Si solo quieres reutilizar un color, un tamaño o un espaciado, probablemente sea mejor usar una variable Sass o una variable CSS.
No tiene mucho sentido hacer esto:
@mixin primary-color {
color: #cc2b5e;
}En este caso, sería más claro usar una variable:
$color-primary: #cc2b5e;
.title {
color: $color-primary;
}O una custom property si quieres que el valor sea dinámico:
.title {
color: var(--color-primary);
}Buenas prácticas para escribir mixins mantenibles
Para que los mixins sigan siendo útiles con el paso del tiempo, conviene aplicar algunas buenas prácticas.
Mantén una responsabilidad por mixin
Un mixin debería resolver una cosa concreta: centrar elementos, aplicar una media query, generar una variante de botón, crear un estado de foco o definir una superficie visual.
Si un mixin empieza a crecer demasiado, divídelo.
Usa argumentos con nombres claros
Los argumentos deben ser fáciles de entender:
@mixin container($max-width: 72rem, $padding-inline: 1.5rem) {
width: min(100% - (#{$padding-inline} * 2), #{$max-width});
margin-inline: auto;
}Uso:
.page-wrapper {
@include container(80rem, 2rem);
}También puedes usar argumentos nombrados para mejorar la legibilidad:
.page-wrapper {
@include container($max-width: 80rem, $padding-inline: 2rem);
}Documenta los mixins importantes
No hace falta comentar todo, pero sí conviene documentar los mixins que forman parte de la arquitectura del proyecto.
/// Crea un contenedor centrado con ancho máximo y padding lateral.
/// @param {Length} $max-width - Ancho máximo del contenedor.
/// @param {Length} $padding-inline - Espaciado lateral mínimo.
@mixin container($max-width: 72rem, $padding-inline: 1.5rem) {
width: min(100% - (#{$padding-inline} * 2), #{$max-width});
margin-inline: auto;
}Esta pequeña documentación puede ahorrar mucho tiempo cuando el proyecto crece o cuando otra persona se incorpora al código.
Evita esconder demasiada lógica
Los mixins deben ayudarte, no convertirse en una caja negra. Si un @include genera demasiadas reglas inesperadas, puede dificultar la depuración en el navegador.
Un buen mixin debe ser predecible.
Cuándo conviene utilizar mixins en Sass
Los mixins son especialmente útiles cuando existe un patrón repetible con cierta lógica.
Por ejemplo:
@mixin hover-lift($distance: -3px) {
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
&:hover {
transform: translateY($distance);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12);
}
}Uso:
.article-card {
@include hover-lift;
}
.project-card {
@include hover-lift(-5px);
}También son muy útiles cuando quieres crear una API interna para tus estilos. Por ejemplo, un equipo puede acordar que todos los componentes usen el mismo mixin para los estados de foco:
@mixin accessible-focus($color: #cc2b5e) {
&:focus-visible {
outline: 3px solid $color;
outline-offset: 4px;
}
}De esta manera, la accesibilidad visual se vuelve más consistente en todo el proyecto.
Y si estás trabajando con movimiento en interfaces, conviene recordar que no todo tiene que resolverse con CSS puro. Para ciertos casos más avanzados, puedes combinar Sass con librerías específicas. En ese contexto, puede interesarte este artículo sobre cómo crear animaciones para la web con la librería GSAP.
Preguntas frecuentes sobre mixins en Sass
¿Cuál es la diferencia entre un mixin y una función en Sass?
Una función en Sass devuelve un valor, mientras que un mixin genera un bloque de declaraciones CSS.
Por ejemplo, una función puede calcular un tamaño o devolver un color transformado. Un mixin, en cambio, puede generar varias propiedades como display, align-items, justify-content, padding, border-radius o incluso media queries completas.
En resumen: usa funciones para valores y mixins para bloques de estilos reutilizables.
¿Es buena idea utilizar mixins para responsive design?
Sí, siempre que se usen con criterio. Los mixins para media queries ayudan a centralizar los breakpoints y evitar inconsistencias.
En lugar de escribir @media (min-width: 768px) en veinte archivos diferentes, puedes crear un mixin como media-up(md) y usarlo en todos los componentes.
Esto mejora la mantenibilidad y hace que el sistema responsive del proyecto sea más fácil de modificar.
¿Los mixins aumentan el tamaño del CSS final?
Pueden hacerlo si se abusa de ellos. Cada vez que incluyes un mixin, Sass copia su contenido en el selector correspondiente.
Si un mixin genera muchas propiedades y lo usas en demasiados lugares, el CSS compilado puede crecer.
Por eso es importante utilizar mixins para patrones realmente reutilizables, no como sustituto automático de cualquier declaración CSS.
Escribir menos no siempre es escribir mejor
Los mixins en Sass son una herramienta muy poderosa para escribir CSS más organizado, reutilizable y coherente. Permiten reducir repetición, centralizar patrones, crear variantes mediante argumentos y trabajar mejor con media queries, estados visuales o estructuras comunes de componentes.
Sin embargo, como ocurre con cualquier abstracción, su valor depende de cómo se utilicen. Un buen mixin hace que el código sea más claro. Un mal mixin puede convertir una hoja de estilos en un sistema difícil de seguir.
La clave está en usarlos con intención. Antes de crear un mixin, pregúntate si realmente estás resolviendo un patrón repetido, si el nombre comunica bien su propósito y si el resultado será más fácil de mantener dentro de unos meses.
Sass sigue teniendo sentido en muchos flujos de trabajo modernos, especialmente cuando se combina con CSS actual, variables personalizadas, arquitectura modular y una buena organización de componentes.
En definitiva, aprender cómo utilizar mixins en Sass no consiste solo en memorizar @mixin y @include. Consiste en desarrollar criterio para detectar patrones, reducir ruido y construir una base de estilos más sólida para tus proyectos frontend.