Consideraciones sobre SASS

A lo largo de los artículos de esta serie hemos ido aprendiendo como usar SASS para escribir hojas de estilo de una forma optimizada, elegante, limpia y mantenible, acorde con las buenas prácticas de la programación actuales. Evidentemente, no lo sabemos todo sobre SASS. Es mucho más amplio que lo que hemos visto aquí. Uno […]

Herencia en SASS

¿Cómo? ¿Herencia en SASS? ¿Es que SASS es un lenguaje basado en el paradigma POO? Bueno, no exactamente. Quizá hablar de herencia, si dejamos que se entienda por tal lo que conocemos con ese nombre en lenguajes de programación, pueda parecer un poco pretencionso. Sin embargo, en SASS sí tenemos un cierto grado de herencia […]

Las media queries en SASS

Las media queries son elementos imprescindibles en cualquier hoja de estilos actual. Desde que se empezó a extender la navegación en Internet con dispositivos móviles de pantallas pequeñas, una web que no sea responsiva no sólo está rechazando a un número importante de visitantes, sino que, además, está siendo penalizada por los principales buscadores. No […]

Más sobre datos: las listas

En un artículo anterior conocimos unas colecciones de datos que se llaman mapas, y hemos visto algunos ejemplos de su uso. Aquí vamos a conocer otro modo de crear y manejar colecciones de datos de otro tipo: las listas. Sintácticamente, las listas son parecidas a los mapas, sólo que los valores se almacenan sin claves. […]

Estructuras de control (III). @for y @while.

En este artículo vamos a conocer dos estructuras de control para el uso de bucles en SASS. Los bucles nos permiten crear conjuntos de reglas CSS repetitivas de una forma muy simple. Al transpilar el código SASS a CSS se puede generar una lista de reglas muy amplia habiendo escrito muy pocas líneas de código. […]

Estructuras de control (II). @each y mapas.

Llegados a este artículo vamos a desarrollar aquí dos conceptos que, en principio, parecen muy dispares, pero es difícil entender uno sin el otro. Vamos a ver como crear unas estructuras de datos complejas, llamadas mapas, y como usar la directiva @each para gestionar dichos mapas de una forma eficiente. Conceptualmente, si has usado matrices […]

Estructuras de control (I). Condicionales.

Al igual que cualquier lenguaje de programación, SASS nos permite usar condicionales para flexibilizar el flujo de código, de forma que al transpilar a CSS podamos obtener los resultados deseados con toda precisión, pero con un código SASS original mucho más limpio y legible. Supongo que habrás observado que hago mucho hincapié, en estos artículos, […]

Interpolación de variables en SASS

En este artículo vamos a exponer un concepto simple, pero muy importante en el desarrollo de hojas de estilo con SASS. La interpolación de variables es un mecanismo para evaluar una variable a través de su nombre. Si estás familiarizado con JavaScript o PHP conoces, sin duda, la instrucción eval(). Es el mismo concepto, solo […]

Optimizando código (II). Las funciones.

Iniciamos este artículo dedicado a las funciones en SASS. En principio, puede sonar algo extraño. ¿Funciones en CSS? Si CSS no usa funciones. De acuerdo. Es cierto. CSS no las usa. Pero recuerda que SASS no es CSS. Es una forma alternativa de escribir CSS, con muchas más prestaciones. En SASS sí disponemos de funciones. […]

Optimizando código (I). La directiva @mixin.

En este artículo continuamos descubriendo las posibilidades que SASS nos ofrece para el desacoplamiento y la optimización de código. En concreto vamos a conocer los mixins. Se trata de una técnica que consiste en agrupar reglas CSS en bloques de código flexibles que pueden, a su vez, ser incluidos en otras reglas. Junto con las […]