Preprocessors 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;
}

In the example above, it has solved the problem with the variable colorPrincipal, sin embargo, esta solución no es permitida por el CSS estándar

Therefore arises the need for the use of processors 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
  There are free tools that help to compile your files written in LESS, a CSS valid
  Aunque puede configurarse LESS para que haga el proceso de compilación ‘the flight‘, 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

Installation

With this tool we will create files .less where you keep our CSS rules improved

We'll include LESS in our HTML using the import Javascript and it will translate the file .less in a .valid css that will be loaded in the HTML page

Este tipo de instalación usada sólo en desarrollo es considerada ‘the flight‘ 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 ‘the flight‘ 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;
@wideSite= 1024px;
@borderStyle: dotted;

body {
    color: @colorPrincipal;
    border: 1px @borderStyle @colorPrincipal;
    max-width: @wideSite;
}

button {
    background-color: @colorPrincipal;
}

Mixins

Mixins allow a CSS rule to inherit all the declarations of other

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

p {
    .block; /* Inherits all styles of .block */
    border: 1px solid #EEE;
}

ul ol {
    .block; /* Inherits all styles of .block */
    color: #333;
    text-transform: uppercase;
}

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

Mixins also allow the use of parameters to configure them

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

.error-generic {
   padding: 20px;
   margin: 4px;
   .error(); /* Error styles are applied */
}

.error-login {
   left: 12px;
   position: absolute;
   top: 20px;
   .error(5px); /* Error styles are applied but with the parameter @wideBorder with the value 5px */

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

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

.error-generic 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

Legacy code

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 { /* In this case, & represents the 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

Functions for the color

The functions for the color to change the color at compile time

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

lighten(@color, 10%); /* Returns a color 10% lighter than @color */
darken(@color, 10%); /* Returns a color 10% darker than @color */

saturate(@color, 10%); /* Returns a color 10% more saturated than @color */
desaturate(@color, 10%); /* Returns a color 10% less saturated than @color */

spin(@color, 10%); /* Returns a color 10% higher than @color */
spin(@color, -10%); /* Returns a color 10% lower saturated than @color */

mix(@color1, @color2); /* Returns the color resulting from mixing the colors @ color1 and @ color2 */

Operations

LESS allows mathematical operations

@operacion: 100px * 2em; /* The result will be 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

One of the problems of the media queries is that we can have different definitions of the same class in disintos points of the CSS file

.container {
    width: 75%;
}

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

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

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