Sass es un procesador CSS, es decir una herramienta que nos permite generar, de manera automática, hojas de estilo, añadiendoles características que no tiene CSS, y que son propias de los lenguajes de programación, como pueden ser variables, funciones, selectores anidados, herencia, etcétera.
Estas características de los procesadores nos permiten, además, que el CSS que se genera sea más fácil de mantener y más reutilizable.
La principal ventaja de SASS es la posibilidad de convertir los CSS en algo dinámico. Permite trabajar mucho más rápido en la creación de código con la posibilidad de crear funciones que realicen ciertas operaciones matemáticas y reutilizar código gracias a los mixins, variables que nos permiten guardar valores. SASS, en definitiva, se convierte en tu mejor ayudante.
Y algo siempre importante cuando te decantas por una herramienta con alternativas, dispone de una gran comunidad que la hace progresar, por lo que se le augura un gran futuro por delante.
Ventajas de utilizar Sass
El uso de una herramienta como Sass proporciona una serie de ventajas, como son las siguientes:
- Reduce el tiempo para crear y mantener el CSS.
- Permite tener una organización modular de los estilos, lo cual es vital para proyectos grandes.
- Proporciona estructuras avanzadas propias de los lenguajes de programación, como variables, listas, funciones y estructuras de control.
- Permite generar distintos tipos de salida, comprimida, normal o minimizada, trabajando tanto en desarrollo como en producción, además se hace una forma muy fácil.
- Permite vigilar los ficheros, de tal manera que, si ha habido un cambio en la hoja de estilos, se regenera automáticamente (modo watch).
- Tiene muy pocas dependencias, sobre todo la nueva versión, que es dart-sass. En las anteriores versiones se dependía de muchas librerías de Ruby y era un poco engorroso de instalar, pero con la nueva versión, la instalación es muy fácil.
- Existen muchas herramientas asociadas, muchas librerías hechas con Sass y una comunidad muy importante de usuarios.
Desventajas de utilizar Sass
Como todo, Sass tiene algunas desventajas, que son extensibles a cualquier otro preprocesador que se utilice:
- Hay que aprender a utilizar una nueva herramienta, lo que para algunos supone una desventaja.
- Hay un tiempo de consumo en el proceso de generación o compilación del CSS, sobre todo si es el archivo SCSS es muy grande. No es mucho tiempo, pero sí que existe esa pequeña demora.
- Tiene una sintaxis más compleja que CSS.
¿Cómo funciona?
SASS dispone de dos formatos diferentes para la sintaxis, lo que hace se traduce en dos extensiones de fichero diferentes: .sass y .scss
El primero en salir fue .sass y se caracteriza, al igual que Stylus y coffeescript para el lenguaje de programación Javascript, en no hacer uso de llaves ni punto y coma final, en busca de la simplicidad y eliminación de ruido.
body background: #000 font-size: 62.5%
Los .scss salieron con la versión 3 de preprocesador y permiten utilizar llaves e incorporar código de CSS clásico.
body {
background: #000;
font-size: 62.5%;
}
Tanto la sintaxis de .sass como la de .scss no puede ser interpretada directamente por los navegadores, por lo se debe compilar para traducir nuestro archivo SASS en un clásico fichero CSS.
Algunas funcionalidades básicas de SASS utilizando la sintaxis .scss
Variables
Permite reutilizar valores que podemos manejar desde un solo sitio de forma sencilla y centralizada.
$brand: #F98355;
body{
color:$brand;
}
No solo guardar colores, también los breakpoints de nuestro site:
$tablet-landscape-desktop: '(min-width: 768px) and (max-width: 979px)';
Mixins
Es un elemento esencial cuando se trabaja bajo la premisa DRY (Don’t Repeat Yourself). Un mixin permite aprovechar un trozo de nuestro código al que podemos llamar repetidamente y que encapsula en una o más líneas de código.
Comentarios recientes