OmbuShop Crea Tu Tienda Online

SASS y otros preprocesadores de CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Los preprocesadores de CSS han llegado para quedarse. Son tecnologías que nos permiten escribir código CSS de forma optimizada, agregando funcinalidades tales como variables, mixins y cálculos al universo de las hojas de estilo!

Como sabemos, el desarrollo web front-end utiliza tres tecnologías básicas a saber:

  • HTML para el marcado semántico del contenido.
  • CSS para la presentación de dichos contenidos (el diseño).
  • JavaScript para la programación del comportamiento de dicho contenido diseñado.

Si bien CSS siempre fue una tecnología elegante, que basa parte de su belleza en el minimalismo de sus features y sintaxis, es evidente que el agregado de algunas funcionalidades no vendría mal.

Por ejemplo: todo diseñador sabe que trabajar con una paleta cromática controlada es clave. Consecuentemente, muchos elementos de un sitio web comparten los mismos colores. Es muy probable que el diseñador haya elegido 5 colores básicos, y que luego cientos de elementos en un sitio web se construyan combinando dichos colores.

Ahora bien, el resultado técnico de esta situación es la repetición en tantísimas ocasiones del mismo código de color en la hoja de estilos. Si el diseño es sistemático, lo mismo ocurrirá con medidas y otros valores en el código CSS.

Bondades de los preprocesadores

Sass and Less

Sass – Less

Los preprocesadores como SASS o Less, vienen a solucionar este tipo de problemas, agregando funcionalidad al código CSS. Daremos ejemplos utilizando SASS, pero Less tiene características similares.

Variables

El concepto de variables es el mismo que conocemos para JavaScript y otros lenguajes de programación. Permite guardar momentáneamente cierto valor, para ser utilizado luego.

En el caso de CSS, nos permite por un lado evitar la repetición de valores (por ejemplo un color, una familia tipográfica o una medida), y por otro centralizar dicho dato de forma tal que para su modificación haya que cambiar el valor una sola vez.

Aquí un ejemplo:


$color_principal: #fff;
$color_secundario: #2BA47D;
$tamano_texto: 30px;

body {
color: $color_principal;
background: $color_secundario;
font-size: $tamano_texto;
}

See the Pen gIehC by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Cálculos

La posibilidad de realizar cálculos también agiliza el trabajo. Podemos sumar (+), restar (-), multiplicar (+) y dividir (/).

Los cálculos pueden realizarse entre números o entre variables que contengan información numérica.


$ancho_total: 600px;
$ancho_principal: 400px;
$calle: 20px;
#contenedor {
width: $ancho_total;
background: #000;
padding: $calle;
font-family: Helvetica, Arial, sans-serif;
overflow: auto;
}
#principal {
float: left;
width: $ancho_principal;
background: #2BA47D;
}
#secundario {
float: right;
width: $ancho_total – $ancho_principal – $calle;
background: #ffffdf;
}

See the Pen cAwrd by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Nesting

Teniendo en cuenta la naturaleza de un elemento dentro de otro en el HTML, es muy común que los selectores de CSS se vuelvan algo así muy pronto:


ul {
font-family: sans-serif;
background: #000;
color: #fff;
margin: 20px 0;
padding: 5px;
}
ul li {
margin: 5px;
padding: 10px;
background: #444;
}
ul li a {
display: block;
color: inherit;
text-decoration: none;
}

See the Pen ordcJ by Lucas Mourelle (@lucasmourelle) on CodePen.
0

SASS permite introducir un elemento dentro de otro tal como hacemos en el código HTML. Esto facilita el trabajo generando una situación análoga a la que tenemos en el marcado semántico:


ul {
font-family: sans-serif;
background: #000;
color: #fff;
margin: 20px 0;
padding: 5px;
li {
margin: 5px;
padding: 10px;
background: #444;
a {
display: block;
color: inherit;
text-decoration: none;
}
}
}

See the Pen qBjcb by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Mixins

En ciertas ocasiones el código a repetir en un archivo CSS es más que simplemente un valor. Los mixins nos permiten centralizar la escritura de varios renglones de CSS, para luego insertarlo donde queramos.


@mixin lato_light {
font-family: 'Lato', sans-serif;
font-weight: 300;
}
p {
@include lato_light;
}

See the Pen Dsjhw by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Los mixins también permiten la inclusión de parámetros, de forma que no siempre el código generado es idéntico.


@mixin open_sans_light($size){
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: $size;
}
p {
@include open_sans_light(20px);
}

See the Pen CLKHF by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Herencia

SASS también permite que ciertos elementos “hereden” el estilo de otros, la sintaxis es la siguiente:


.boton {
font-family: sans-serif;
border-radius: 3px;
padding: 8px;
display: inline-block;
text-decoration: none;
padding: 10px;
color: #000;
}
.boton-importante {
@extend .boton;
background: #f00;
}

See the Pen hsajq by Lucas Mourelle (@lucasmourelle) on CodePen.
0

De esta manera, la clase boton-importante recibe todas las características de la clase boton.

Import

Otra posibilidad es la de dividir en diferentes archivos para organizar el código. Podemos tener un archivo estilos.scss, y luego otro llamado _reset.scss; el guión bajo al principio del nombre indica que se trata de un “partial”, un archivo parcial que luego será importado dentro de otro.

_reset.scss


/* Archivo: _reset.scss */
* {
margin: 0;
padding: 0;
}

See the Pen oLlEu by Lucas Mourelle (@lucasmourelle) on CodePen.
0

estilos.scss


/* Archivo: estilos.scss */
@import 'reset';

p {
font-family: 'Lato', sans-serif;
}

See the Pen GDlvu by Lucas Mourelle (@lucasmourelle) on CodePen.
0

El archivo resultante estilos.css, tendrá el código de estilos.scss, con el código de _reset.scss importado en el lugar indicado.

Pero ¿cómo funciona en los navegadores?

El código SASS, aunque muy parecido al de CSS nativo, no puede ser interpretado por los navegadores.

El código sirve para el desarrollo, pero luego debe ser compilado por estos pre-procesadores, transformándolo en CSS estándar.

Con cada cambio que hace el diseñador/desarrollador al código SASS, los preprocesadores generan automáticamente la versión CSS. Por lo general ocurre en tiempo real y de forma automática en el entorno de desarrollo.

Para más información al respecto, no dejen de visitar el sitio web oficial de SASS.

¡A continuar diseñando tiendas increíbles!