¿Por que usar un preprocesador css?

imagen / 1llustr4t0r .com
  
18 de Mayo de 2017   0  

El mundo frontend ha cambiado radicalmente estos últimos años, tal es el grado que vemos casi a diario el nacimiento de tecnologías basadas en frontend tanto en JS,HTML y CSS que facilitan el desarrollo de tecnología Front.

Lo que quiero platicar hoy va ligado al mundo del CSS y de cómo pudieramos facilitar /optimizar el desarrollo de frontend, les puedo decir que sin un preprocesador css mi vida sería mas complicada, quiero compartirles algunos puntos por los cuales pudieran decidir utilizarlos y dejar casi por completo la sintaxis básica de css. Los ejemplos presentados estan basados en LESS.

 

1. Variables.

Uno de los puntos más sobresalientes son las variables, recuerdo que en algun punto de mi vida como frontend pensé en que utilizar variables haría mucho mas ágil escribir css, tiempo despues aparecen los preprocesadores que lo permiten ¡Yeah!, esto ahora nos permite definir un template basado en variables donde podemos utilizarlos para definir la paleta principal de colores, el tamaño de los bordes redondeados de los elementos, etc. Veremos un ejemplo.


@nice-blue: #5B83AD; 
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }

Esto hace que podamos generar un código mas legible y mas mantenible.

 

2. Mixins.

Los famosos y aclamados mixins, imagínense que puedan definir una clase con sus reglas de diseño y despues que ésta la puedas utilizar dentro de otra clase para que así estes reutilizando clases y ahorrando código, genial! pues se puede hacer hoy en día con prácticamente cualquier preprocesador. Ejemplo.

.bordered { 
   border-top: dotted 1px black; 
   border-bottom: solid 2px black; 
}

#menu a { 
color: #111; 
.bordered; 
} 
.post a { 
color: red; 
.bordered; 
}

Tambien existen los mixins con parametros :O

.border-radius(@radius) {
  -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;
}

3. Reglas anidadas.

Esto es fabuloso para los que siempre tuvimos problema de entender al 100% los selectores complejos, ahora podemos indicar la regla de diseño de los selectores mas intuitivamente anidando clases o id's o cualquier selector para indicar el nivel gerarquico que deseamos obtener, por ejemplo:


#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

4. Operaciones

Podemos realizar operaciones para modificar el valor de variables o modificar el valor de cantidades de px o de lo que consideremos, las operaciones que podemos manejar son +,-,*,/ por ejemplo:

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

 

 

En fin, los 4 puntos que les presento son sólo uno de los tantos que podemos explotar de cualquier preprocesador css , en la actualidad los ams famosos son LESS, SASS,  Stylus, Myth, entre otros que puedes ir leyendo, al final el que elijas deberá ser por que te acomode y por que se acople mas a tu estilo de trabajo en css. Por ejemplo Bootstrap 4 utiliza Sass como precompilador.



Gaspar Dzul

Desarrollador Front End y Móvil.

Temas relacionados