Sass: Una herramienta para optimizar el css

Sass es un preprocesador de css. Quizás esto sea un término nuevo para ti. ¿Preprocesador?, ¿qué es? Pues bien, no es más que una herramienta que nos facilita mucho el trabajo al momento de generar los estilos. Seguro se preguntarán cómo funciona. Es muy sencillo, en un archivo debemos crear nuestros estilos en forma de pseudocódigo, el preprocesador se encargará de convertirlo a css real.

Tiene muchas ventajas en cuanto a la legibilidad y el tiempo de escribir nuestro css, pues nos permite implementar bucles, crear variables, condiciones y funciones. Muy similar a los lenguajes de programación comunes. Además de esto, facilita mucho nuestro trabajo a la hora de editar nuestros estilos. Actualmente existen muchos preprocesadores de css, pero los más populares son: Sass, Less y Stylus. Hoy hablaremos un poco sobre Sass y los primeros pasos para utilizarlo.

Sass (Syntactically Awesome StyleSheets), aporta elegancia y pulcritud a la forma en la escribimos en nuestro css, permite anidar selectores y organizar mejor los elementos en nuestro archivo. Para usar Sass en Windows, primero debemos instalar Ruby y por medio del siguiente comando, instalamos esta herramienta:

gem install sass

En el caso de Linux o Mac Os, sólo será necesario ejecutar el comando. Una vez instalado Sass, debemos crear nuestro archivo .scss o .sass (dependerá de la sintaxis que estemos usando. Sass cuenta con dos sintaxis, ambas válidas y compatibles con css. Si usamos la más reciente, debemos usar la extensión .sass). Como les comenté al principio, este código deberá ser transformado a css real, pues el navegador no reconocerá estilos con otras extensiones. Para esto, debemos configurar, por medio del siguiente comando, ambos archivos (el archivo sass y el archivo css):

sass --watch input.scss:output.css

Con este commando también nos aseguramos que todos los cambios hechos en el archive .sass, serán reflejados en nuestro archivo css.

La sintaxis es muy sencilla, a continuación les muestraremos cómo sería un fragmento de código usando la herramienta Sass y su equivalente en css. Podemos ver el uso de variables para los colores. Si les interesa esta maravillosa herramienta y quieren implementarla, pueden consultar su documentación oficial.

About Omar Gudiño view all posts

Ingeniero Informatico, especialista en Seguridad Informática y Arquitecto de Soluciones Cloud. Apasionado de la seguridad Informática y las Artes Marciales.

0 Comments Join the Conversation →


Loading Facebook Comments ...