Tutorial básico de Sass

11/08/2019 | CSS, Sass | 0 comentarios

Escribe CSS de forma rápida, eficiente con Sass, aprovecha las variables, funciones, mixins y operadores en la creación de CSS.

Escribir CSS es la tarea diaria de todo desarrollador FrontEnd, pero es una tarea repetitiva y tediosa, para agilizar este proceso existen herramientas que permiten agregan nuevas formas de crear estilos, herramientas como Less, Stylus y la más popular Sass que veremos en este artículo.

Sass

Sass es un pre-procesador de CSS, es decir permite escribir código utilizando características de un lenguaje de programación y que luego se procesa para generar el archivo CSS.

Sass soporta dos tipos de archivos fuente:

  • .sass utiliza tabulación para englobar las propiedades de un estilo.
  • .scss utiliza llaves {} para englobar las propiedades de un estilo.

Se recomienda utilizar archivos .scss por que la sintaxis es idéntica al CSS lo que lo hace fácil de aprender.

Cómo utilizar Sass

Para utilizar Sass es necesario tener instalado el pre-procesador. Existen versiones GUI como Koala o Prepros para procesar archivos Sass, también se puede utilizar en línea de comandos con Node.js o incluso con herramientas de automatización de tareas como Gulp.

Para aprender y hacer pruebas puedes usar la herramienta online SassMeister, escribes tu código y automáticamente verás el resultado en CSS.

Primeros pasos en Sass

Sass tiene muchas características interesantes, veamos las mas importantes:

  • Variables: para guardar datos que serán reutilizados.
  • Anidamiento: es posible anidar código CSS de manera sencilla.
  • Partials e Imports: archivos que luego pueden ser importadas a otro archivo.
  • Mixins: son funciones que devuelven código CSS.
  • Operadores: se pueden hacer operaciones boolenas, numéricas, etc.

Variables

Las variables permiten almacenar información reutilizable, el nombre de la variable debe empezar con $ y deben ser declaradas antes de utilizarse.

Resultado:

Anidamiento

Sass permite anidar hojas de estilo de manera sencilla, solo es necesario incluir el código dentro de las llaves del selector padre. Destacar la propiedad & que contiene el selector actual y facilita el anidamiento.

Resultado:

Partials e Imports

Con Sass es posible separar los estilos en varios archivos más pequeños llamados partials que luego pueden ser importados en otro archivo con la sentencia @import, esto permite separar lógicamente los estilos por ejemplo: header.scss, hero.scss, footer.scss.

Importamos el partial en otro archivo:

Resultado:

Mixins

Los mixins son funciones reutilizables que devuelven código CSS, se declaran empezando con la sentencia @mixin.

Resultado:

Operadores

Sass permite realizar operaciones lógicas, numéricas y de cadenas, esto facilita realizar cálculos para manejo de grillas o para responsive.

Resultado:

Cómo hemos visto con Sass tenemos características de un lenguaje de programación que lo hacen potente y reducen drásticamente la creación de CSS.

Referencias

Envíar Comentario

En este sitio los comentarios se publican previa aprobación del equipo de Kodetop. Evita los comentarios ofensivos, obscenos o publicitarios. Si deseas publicar código fuente puedes hacerlo entre las etiquedas <pre></pre>