Primeros pasos con SASS

SASS es un preprocesador css que mediante una sintaxis diferente a lo habitual se puede acelerar el desarrollo considerablemente, utilizando variables, mixins y muchos más beneficios. Al final se seguirá trabajando con hojas de estilos pero ahora a través de esta muy popular herramienta.

Para comenzar, primero es necesario instalar ruby para ello se utiliza el siguiente comando:

sudo su -c "gem install sass"

 

Instalar sass es muy sencillo se usa el siguiente comando:

sudo gem install sass

Verificar la información del SASS instalado satisfactoriamente con el siguiente comando:

sass -v

 

Lo siguiente es un comando para compilar manualmente de manera muy sencilla un archivo scss a css:

sass --style expanded --watch sass:css

El significado de cada elemento dentro del comando es el siguiente:

 

--style es solo para formatear las reglas css que se generarán, además de expanded hay nested, compact, compressed.

 

• Expanded: Las reglas y propiedades ocupan una línea por cada una.
• Nested: La configuración por defecto, mantiene la indentación que sass aplica.
• Compact: Cada regla es una línea y no importa cuantos selectores y propiedades tenga, siempre será una regla.
• Compressed: Generará todas las reglas del archivo css en una sola línea.

 

Definición de variables

Permitirán tener más flexibilidad con valores dentro del archivo css permitiendo usarlo en múltiples lugares y el manejo podría ser global.

Ejemplos de declaraciones de variables.

$font-stack: Helvetica, sans-serif;

$helvetica: “helvetica neue”, arial. Helvetica, freesans, sans-serif (Construcción de una librería de fuentes)

$primary-color: #333;

Estas variables pueden usar operaciones matemáticas comunes ( + , - , / , * )

 

Mixins

Son como funciones que te agrupan colecciones de propiedades que usualmente van juntas, también puedes optar por pasar un parámetro

 

Este es un ejemplo muy claro de cómo se aplica:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

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