SASS

INTRODUCCION

SASS hace referencia a un preprocesador de hojas de estilo que viene a otorgar más funciones al estático y poco práctico lenguaje CSS, convirtiéndolo en un lenguaje de scripting. Gracias a SASS disponemos de variables, sentencias de control y funciones entre otras características, que van destinadas a escribir sin repetirse y reutilizando todo el código lo posible.

SASS actualmente es de los preprocesadores de CSS más importantes que existen por lo que es importante saber que nos ofrece y como aprovechar las ventajas que nos da si decidiéramos utilizarlo.

SASS Y CSS

Con CSS puede diseñar sitios web de acuerdo con sus ideas y gustos. Sin embargo, el lenguaje de hojas de estilo en cascada tiene sus limitaciones. Muchos desarrolladores web quieren una forma más cómoda y dinámica de diseñar páginas; aquí es donde entran en juego los preprocesadores de CSS. Este lenguaje de hoja de estilo, que prácticamente se puede ver como una extensión del CSS subyacente, puede simplificar enormemente su trabajo de diseño. El más conocido de estos lenguajes extendidos es SASS.

¿Qué es SASS?

Para comprender qué es SASS y por qué necesita este lenguaje, se tiene que entender la importancia de CSS. Los sitios web se basan inicialmente en el lenguaje de marcado HTML. Sin embargo, si desea diseñar en HTML, debe vincular el contenido al diseño en cada página HTML.

Por ejemplo, para poder establecer todos los encabezados en el formato de fuente Calibri de 22 píxeles, debe definirlo en la hoja de estilo, que proporciona pautas para la apariencia de su sitio web. Por lo general, estas reglas se encuentran en un archivo separado al que hacen referencia las páginas HTML, lo que reduce significativamente la carga de información por página.

A pesar de su gran utilidad, CSS tiene ciertas limitaciones que se hacen particularmente evidentes después de años de trabajar con este lenguaje. Su principal ventaja es también una de sus desventajas: el lenguaje es muy simple. SASS lo hace un poco más sofisticado y facilita mucho la creación de su diseño

Todos los navegadores modernos pueden mostrar CSS fácilmente, pero SASS (aunque se ha utilizado durante más de una década) u otros lenguajes de hoja de estilo avanzados no pueden. Por lo tanto, SASS generalmente se considera un preprocesador. El código del documento SASS se convierte primero en CSS antes de que el sistema entregue el código fuente y, por lo tanto, el sitio web.

¿Qué es un pre procesador? 

CSS nos permite diseñar sitios web exactamente como el diseñador hubiera querido, pero a medida que los sitios son más complejos, encontraremos limitaciones al CSS puro, con hojas de estilo de miles de líneas realmente difíciles de mantener, modificar o refactorizar.

Un pre-procesador de CSS es un lenguaje de hoja de estilos, lo cual, es una extensión de CSS que permite añadir nuevas funcionalidades para hacer el trabajo de diseño y maquetación del sitio web más asequible.

Los navegadores actuales pueden trabajar con CSS puro sin dificultades, pero no ocurre lo mismo con lenguajes de hoja de estilos, por ende, es necesario procesarlos antes de ingresarlos al sitio web.

Dicho de otro modo, el código del documento pre-procesado (SASS, SCSS, LESS) debe ser convertido a CSS puro antes de desplegar el sitio web.

SASS Características

En definitiva, Sass incluye las siguientes características:

• Es compatible con CSS3 en su totalidad.
• Brinda el uso de elementos básicos de programación como las directivas de control y las librerías.
• Genera archivos CSS bien formateados y permite configurar su formato.
• Brinda el uso de variables, anidamiento de estilos y mixins.
• Incluye múltiples funciones para controlar fácilmente los colores y otros valores.
• Incorporación con Firebug gracias a la extensión FireSass.

Ventajas y Desventajas

Ventajas:

• El tiempo para crear y mantener el CSS es menor.

• Se puede tener una organización modular de los estilos, esencial para proyectos grandes.
• Proporciona estructuras avanzadas propias de los lenguajes de programación.

• Nos da la opción de generar distintos tipos de salida, comprimida, normal o minimizada, trabajando tanto en desarrollo como en producción.

• Depende de pocas cosas, sobre todo la nueva versión, que es dart-sass.

• Existen muchas herramientas asociadas y librerías hechas con Sass con una comunidad bastante amplia.

• Permite vigilar los ficheros, por lo que, si ha habido un cambio en la hoja de estilos, se regenera automáticamente (modo watch).

Desventajas:

• Necesitaremos aprender a utilizar esta herramienta, lo cual puede ser tedioso.

• Hay un tiempo de consumo en el proceso de generación o compilación del CSS, principalmente si el archivo SCSS es muy grande, sin embargo, no es mucho.

• Su sintaxis es más compleja que CSS.

OPCIONES DIFERENTES A CSS

• Variables: La información con SAS se almacena en variables para su reutilización. Un ejemplo es posible almacenar un valor de color de forma centralizada bajo una variable más práctica.

• Funciones matemáticas: Se utilizan operadores matemáticos como +, -, *, / o %.

• Funciones: Facilitan el trabajo en el diseño. Por ejemplo, para ajustar valores de color o analizar listas.

• Bucles: Es una ventaja de SASS, ya que utilizar bucles nos permite que se repita hasta alcanzar un estatus definido.

• Distinción de casos: Como son las sentencias condicionales “si” (if) y “de lo contrario” (else) funcionan de manera similar.

• Mixins: Los “mixins” son plantillas. Se pueden crear uno mismo o simplemente integrarlas en el código cuando se utilice un marco de trabajo.

• Huecos: En el SASS original (a diferencia del SCSS) utiliza sangrías y saltos de línea para estructurar el código. No necesita paréntesis para mostrar los anidamientos, ni punto y coma para marcar los extremos de las líneas.

...