Preprocesadores CSS

El uso de procesadores CSS surge por un problema muy común en las hojas de estilo, muchos valores se repiten constantemente

.do-container {
    margin: 2em 1em;
    background-color: #E1E1E1;
    padding: 1em;
    border-radius: 15px;
    border-color: #C0392B;
    border-width: 1px;
}

#tableOfContents {
    list-sytle: none;
    border-left: 2px solid #C0392B;
}

a {
    color: #C0392B;
}

Como podemos ver en el ejemplo anterior, el color #C0392B se repite constantemente en el código porque es nuestro color principal en este diseño

¿Pero, y si necesitamos cambiarlo? Esa situación nos obligaria a cambiar todas sus apariciones en la hoja de estilo

@colorPrincipal = #C0392B;

.do-container {
    margin: 2em 1em;
    background-color: #E1E1E1;
    padding: 1em;
    border-radius: 15px;
    border-color: @colorPrincipal;
    border-width: 1px;
}

#tableOfContents {
    list-sytle: none;
    border-left: 2px solid @colorPrincipal;
}

a {
    color: @colorPrincipal;
}

En el ejemplo anterior se ha solucionado el problema con la variable colorPrincipal, sin embargo, esta solución no es permitida por el CSS estándar

Por eso surge la necesidad del uso de procesadores CSS, que son aplicaciones que permiten dotar al CSS de las ventajas de un lenguaje de programación, como el uso de variables, funciones, condiciones e incluso cálculos matemáticos, los cuales serán traducidos posteriomente a un CSS válido

No existe un estándar claro para este tipo de procesadores, pero tenemos las siguientes alternativas:

• Sass funciona con Ruby, el cual viene preinstalado en Mac; si eres usuario de Windows necesitaras instalar previamente Ruby
  Funciona mediante línea de comandos en un terminal, ya que no tiene entorno gráfico
  Si quieres usarlo en modo visual, existen varias herramientas de pago que podrian interesarte
• LESS está escrito en javascript, por lo que su instalación es tan sencilla como su importación directamente a nuestro documento HTML
  Existen herramientas gratuitas que ayudan a compilar tus archivos escritos en LESS a un CSS válido
  Aunque puede configurarse LESS para que haga el proceso de compilación ‘al vuelo‘, aunque no es recomendable porque consume tiempo de carga cada vez que recompila
• Stylus necesitaremos instalar previamente Node.js, el cuál tiene su propio conjunto de repositorios que permite tener siempre la última versión estable del programa
  Funciona mediante línea de comandos en un terminal, ya que no tiene entorno gráfico
  Si quieres usarlo en modo visual, existen varias herramientas de pago que podrian interesarte

La sintaxis de estas herramientas es similar aunque hay pequeñas diferencias entre ellas, ya que como se ha dicho, no hay un estándar para preprocesadores CSS

LESS

Instalación

Con esta herramienta crearemos archivos .less donde se guardarán nuestras reglas CSS mejoradas

Incluiremos LESS en nuestro HTML mediante la importación de Javascript y se encargará de traducir el archivo .less en un .css válido que será cargado en la página HTML

Este tipo de instalación usada sólo en desarrollo es considerada ‘al vuelo‘ y llamada compilación, por motivos de eficiencia, en la página de producción, se añadirá el .css válido y ya traducido

Para poder realizar esta traducción ‘al vuelo‘ añadiremos las siguientes líneas en el head de nuestro HTML:

<link rel='stylesheet/less' type='text/css' href='mystyle.less' />
<script src='less.js' type='text/javascript'></script>

En el ejemplo nuestro fichero LESS se llama mystyle.less y le hemos indicado al navegador que es una hoja de estilos LESS con la referencia ‘stylesheet/less’

Despues hemos cargado la libreria Javascrip de LESS llamada less.js, que será la encargada de traducir el archivo mystyle.less al CSS válido y lo cargará en el HTML

Variables

Antes hemos visto un ejemplo para definir una variable para el color, en LESS se definen las variables con el símbolo @

@colorPrincipal = #ABABAB;
@anchoSitio = 1024px;
@estiloBorde: dotted;

body {
    color: @colorPrincipal;
    border: 1px @estiloBorde @colorPrincipal;
    max-width: @anchoSitio;
}

button {
    background-color: @colorPrincipal;
}

Mixins

Los mixins permiten que una regla CSS herede todas las declaraciones de otra

.bloque{
    margin: 10px 5px;
    padding: 2px;
}

p {
    .bloque; /* Hereda todos los estilos de .bloque */
    border: 1px solid #EEE;
}

ul ol {
    .bloque; /* Hereda todos los estilos de .bloque */
    color: #333;
    text-transform: uppercase;
}

En el ejemplo anterior hemos hecho que los elementos p, ul y ol incluyan todas las declaraciones de .bloque y así nos ahorramos el tener que volver a escribirlas en cada aparición

Los mixins también permiten la utilización de parámetros para configurarlos

@mixin error(@anchoBorde: 2px) {
    border: @anchoBorde solid #F00;
    color: #F00;
}

.error-generico {
   padding: 20px;
   margin: 4px;
   .error(); /* Se aplican los estilos de error */
}

.error-login {
   left: 12px;
   position: absolute;
   top: 20px;
   .error(5px); /* Se aplican los estilos de error pero con el parámetro @anchoBorde con el valor 5px */

En el ejemplo anterior hemos definido el mixin error donde el ancho de borde es configurable con la variable @anchoBorde

Si no hay parámetros, su valor por defecto será 2px, como se ha indicado en su definición

.error-generico llama al mixin para heredar todas las declaraciones y, como no tiene parámetros toma su valor por defecto

.error-login llama al mixin pero esta vez, como tiene un parámetro toma el valor del mismo

Código heredado

A veces surge el problema de tener varios elementos con el mismo padre, con lo que nos vemos obligados a repetir en cada aparición referencias al padre

section {
   margin: px;
}

section nav {
    height: px;
}

section nav a {
   color: #0982C1;
}

section nav a:hover {
    text-decoration: underline;
}

En el ejemplo anterior tenemos el problema comentado, section es el padre en la mayoría de los elementos de la hoja de estilo, a su vez nav es padre de varios de ellos, al igual que a

section {
   margin: px;
   nav {
      height: px;
      a {
         color: #0982C1;
         &:hover { /* En este caso, & representa el selector a */
             text-decoration: underline;
      }
   }
}

En el ejemplo anterior lo hemos solucionado escribiendo anidaciones de los hijos dentro de los elementos padre, así nos ahorramos repetir las referencias

Además permite usar el símbolo & para referirse al elemento padre inmediato dentro del elemento hijo

Funciones para el color

Las funciones para el color permiten modificar el color en tiempo de compilación

Son bastante útiles para crear degradados, oscurecer botones al pasar el ratón, etc

lighten(@color, 10%); /* Devuelve un color al 10% más claro que @color */
darken(@color, 10%); /* Devuelve un color al 10% más oscuro que @color */

saturate(@color, 10%); /* Devuelve un color al 10% más saturado que @color */
desaturate(@color, 10%); /* Devuelve un color al 10% menos saturado que @color */

spin(@color, 10%); /* Devuelve un color al 10% un tono mayor que @color */
spin(@color, -10%); /* Devuelve un color al 10% un tono menor que @color */

mix(@color1, @color2); /* Devuelve el color resultante de mezclar los colores @color1 y @color2 */

Operaciones

LESS permite operaciones matemáticas

@operacion: 100px * 2em; /* El resultado será 102px */

body {
    margin: (14px / 2);
    top: 50px + 100px;
    right: 100px - 50 px;
    left: 10 * 10;
}

Como se puede ver en el ejemplo, no tiene muchas restricciones, ya que permite hacer cosas sin sentido como mezclar distintas unidades

Media queries

Uno de los problemas de los media queries es que podemos tener distintas definiciones de la misma clase en disintos puntos del archivo CSS

.contenedor {
    width: 75%;
}

@media (max-width: 80px) {
   .contenedor {
       width: 100%;
   }
}

Podemos anidar los media queries dentro de la misma clase, solucionando el problema del ejemplo anterior

.contenedor {
    width: 75%;
    @media (max-width: 80px) {
       width: 100%;
   }
}