SASS lo nuevo en CSS

¿Eres de l@s que acostumbran a escribir líneas y líneas de CSS?

Te aseguro que has escrito suficiente CSS como para haber visto todas las posibles combinaciones de los selectores y propiedades, pero también para haber odiado mas de una ocasión las limitaciones que tiene cuando las cosas se vuelven complejas….Si te has sentido identificad@, Permíteme presentarte a ¡SASS!

SASS: Syntactically Awesome Style Sheets

Sass, es un metalenguaje basado en CSS, que provee una sintaxis más simple, más elegante para escribir CSS y que además implementa varias funciones como el uso de variables, anidamiento, herencia etc. útiles para crear hojas de estilo administrables y eficientes.

Cuando llegué al sitio web de SASS, por recomendación de un colega, y comencé a explorar, ahí estaba: La solución a todas mis frustraciones con CSS.

Repentinamente, descubrí que es posible almacenar los códigos de color en variables y reutilizarlos, que es posible armar funciones llamadas “Mixins” que asignen valores dinámicos a una propiedad con solo invocarlas, que es posible reutilizar bloques de códigos y anidar estilos en el mismo orden lógico que escribes HTML.

SASS te permite escribir CSS a través de un enfoque llamado DRY (“Don´t Repeat Yourself” o” No te repitas a ti mismo”) Lo cual significa que, así como sucede en otros lenguajes de programación, el reutilizar bloques de código y hacer uso de funciones con parámetros variables, es una excelente forma de optimizar el trabajo y reducir las líneas que tienen que escribirse.

Como su nombre lo dice, SASS permite escribir hojas de Estilo Asombrosas, de forma limpia, eficiente y divertida. Visto desde la perspectiva más básica, escribir SASS es exactamente lo mismo que escribir CSS, en cuanto a selectores y propiedades, pero cuándo comienzas a usar la sintaxis SCSS (Sass Cascade Style Sheet) tienes acceso a todas las funcionalidades y beneficios disponibles que SASS ofrece y que no existen como tal en CSS.

Aquí tenemos una muestra de la sintaxis SCSS, propia de SASS:

En este ejemplo asignaremos un color a un elemento, nótese lo similar que es a escribir CSS, solamente estamos agregando una variable y utilizándola.

$blue: #3bbfce; 

.content-navigation { 

 border-color: $blue; 

}

Compilado a CSS

.content-navigation { border-color: #3bbfce; color: #2b9eab; }

Una vez que escribes con la sintaxis SCSS, puedes sentirte tranquilo, compilar y guardar tu archivo como CSS normal, listo para usarse.

SASS es asombroso por muchas razones, no solamente nos permite optimizar la forma de escribir y mantener nuestro código CSS, sino que además, posee integración con numerosos Frameworks, su instalación es sencilla y el flujo de trabajo es fácil e intuitivo, he aquí una descripción más amplia de sus funciones:

Variables

El uso de variables es una funcionalidad tan simple y poderosa, que es casi criminal que no exista aún en CSS por si solo, al principio emociona mucho ya no tener que recordar los códigos Hexadecimales de nuestros colores:

$mi-rojo: #b80000 

$mi-rojo-oscuro: darken($red, 10%) // se renderiza como #410101 

$mi-rojo-transparente: transparentize($red, 0.5)// se renderiza como rgba(115, 2, 2, 0.5)

aunque, por supuesto, pueden ser usadas para almacenar cualquier valor que se necesite reutilizar:

$margen-vertical: 24px 
$margen-horizontal: $margen-vertical * 0.5 
div.container margin: $vertical-margin $horizontal-margin
// Se renderiza como: div.container{ margin: 24px 12px; }

Mixins

Las variables son una excelente opción para almacenar, reutilizar y manipular valores, pero los Mixins son un tipo especial de objeto que permite reutilizar un bloque completo de código, lo que proporciona formas flexibles de asignar estilos complejos, aquí un pequeño ejemplo del uso de Mixins para aplicar un estilo de borde redondeado con sus respectivos prefijos para cada navegador:

@mixin border-radius($radius) {

  -webkit-border-radius: $radius;

     -moz-border-radius: $radius;

      -ms-border-radius: $radius;

          border-radius: $radius;

}

 

.box { @include border-radius(10px); }

Se compila en CSS de la siguiente forma:

.box {

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  -ms-border-radius: 10px;

  border-radius: 10px;

}

Extend o Herencia de propiedades

@extend es un concepto algo complejo, pero una vez que se pone en uso es más fácil de comprender: la idea es la siguiente: Escribes un estilo para un elemento, pero después quieres aplicar el mismo estilo para otro elemento, agregando alguna otra regla. En este pequeño ejemplo vemos @extend en los estilos para una serie de mensajes:

.mensaje {

  border: 1px solid #ccc;

  padding: 10px;

  color: #333;

}

 

.exito {

  @extend .message;

  border-color: green;

}

 

.error {

  @extend .message;

  border-color: red;

}

Anidamiento

Cuando escribes HTML, todo está en una jerarquía anidada de manera bastante lógica y visualmente clara (Por ejemplo una lista, dentro de un bloque de texto, dentro a su vez de un contenedor), la sintaxis SCSS permite escribir los estilos de los elementos de manera que siga la misma jerarquía visual del código HTML, compilando después los estilos de forma separada y ordenada, Aquí un ejemplo:

Código SCSS

nav {

  ul {

    margin: 0;

    padding: 0;

    list-style: none;

  }

 

  li { display: inline-block; }

 

  a {

    display: block;

    padding: 6px 12px;

    text-decoration: none;

  }

}

Compilado a CSS

nav ul {

  margin: 0;

  padding: 0;

  list-style: none;

}

 

nav li {

  display: inline-block;

}

 

nav a {

  display: block;

  padding: 6px 12px;

  text-decoration: none;

}

Parciales

Los parciales son pequeños bloques de código que pueden mandarse llamar desde adentro de otros archivos SCSS , se identifican porque se guardan con un guion bajo al inicio de su nombre , por ejemplo, el nombre _partial.scss le hace saber a SASS que ese archivo es un parcial y que no debe ser compilado a CSS a menos que sea llamado dentro de otro archivo .scss

@Import

Hablando de reutilización de código y eficiencia, la función @import permite integrar varios archivos .scss o parciales dentro de otros, lo cuál es muy útil para crear hojas de estilo administrables, Aquí un ejemplo donde se importa un parcial llamado _reset.scss dentro de otro archivo llamado base.scss, aqui vemos la estructura de _reset.css:

// _reset.scss

 

html,

body,

ul,

ol {

   margin: 0;

  padding: 0;

}

y a continuación se usa el comando @import dentro de base.scss:

/* base.scss */

 

@import 'reset';

 

body {

  font-size: 100% Helvetica, sans-serif;

  background-color: #efefef;

}

El CSS compilado quedará de la siguiente forma:

html, body, ul, ol {

  margin: 0;

  padding: 0;

}

 

body {

  background-color: #efefef;

  font-size: 100% Helvetica, sans-serif;

}

A estas alturas, seguro estarás pensando: Es genial todo eso de archivos .scss alegremente escritos que se convierten en archivos .css listos para usarse, pero cómo sucede la magia?

La respuesta es sencilla, una vez instalado SASS , tiene que ser configurada la ruta de la carpeta dónde estás trabajando tu proyecto y las ubicaciones donde SASS leerá los archivos .scss y creará los archivos .css, esto puede hacerse de dos formas:

Una es la forma manual, por medio de la línea de comandos, se ejecuta el comando que compilará todo lo que escribas y en tiempo real irá creado, y modificando tus estilos en una salida a .css

Y si eres de l@s que odian la línea de comandos, no te preocupes, existen programas especialmente diseñados para funcionar como interfaz gráfica para llevar a cabo este proceso, sólo por mencionar algunos están:

SCOUT (Windows y Mac)