Procesadores de estilos
Las hojas de estilos en cascada (CSS) son las herramientas que utilizamos para mejorar la apariencia de nuestro portal web, e incluso se pueden hacer cosas sorprendentes desde la llegada de CSS3. Usarlas no es complicado pero hay herramientas que nos permiten optimizar este trabajo, como los preprocesadores de CSS de los que hablaremos a lo largo de este punto.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<ul class="menu">
<li><a href="#">Elemento 1</a></li>
<li><a href="#">Elemento 2</a></li>
<li><a href="#">Elemento 3</a></li>
</ul>
</body>
</html>
style.css
ul.menu {
width: 180px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #3A3A3A;
}
ul.menu li {
border-bottom: 1px solid #3A3A3A;
border-top: 1px solid #BBB;
background: #F4F4F4;
}
ul.menu li a {
padding: 0.2em 0 0.2em 0.5em;
display: block;
text-decoration: none;
color: #222;
}
驴Qu茅 es un preprocesador de CSS?
Un preprocesador de CSS se puede definir como una herramienta que nos permite escribir pseudoc贸digo CSS que luego ser谩 compilado para convertir en CSS tal y como lo conocemos de forma habitual. Este pseudoc贸digo est谩 formado por variables, condiciones, bucles o funciones, elementos habituales de cualquier lenguaje de programaci贸n. Por este motivo, podr铆amos decir que tenemos un lenguaje de programaci贸n cuya misi贸n es la de generar el c贸digo CSS.
Podemos afirmar que el uso de un preprocesador es un proceso de dos pasos. Durante el primero de ellos se crear铆an los estilos utilizando la sintaxis preprocesador, mientras que en el segundo paso se compilar铆a el archivo en tiempo de ejecuci贸n para generar el CSS definitivo.
El objetivo final de los procesadores de CSS es el de disponer de un c贸digo m谩s limpio que luego poder utilizar en las p谩ginas webs que colocaremos en nuestros servidores, un c贸digo m谩s sencillo de mantener y editar.
Principales beneficios de utilizar preprocesadores de CSS
El uso de preprocesadores en nuestros proyectos aporta una serie de beneficios entre los que podemos destacar:
- Posibilidad de a帽adir funcionalidades adicionales que no son posible de utilizar en archivos CSS tradicionales, como son el uso de variables y l贸gica condicional
- Dispondremos de una hoja de estilos m谩s limpia, consiguiendo a la vez que sea m谩s eficiente y f谩cil de mantener
- Ofrece la posibilidad de reutilizar mucho c贸digo, lo que se traduce en un ahorro de tiempo y trabajo
- Los cambios ser谩n mucho m谩s r谩pidos, ya que 煤nicamente deberemos cambiar el valor de alguna variable
- Ayuda a crear c贸digo compatible con todos los navegadores, lo que supone una gran ayuda para los dise帽adores de sitios web
- Se crea una capa de abstracci贸n, donde no trabajaremos directamente sobre nuestro archivo CSS, ofreciendo una mayor seguridad
- Posibilidad de separaci贸n absoluta del proceso de desarrollo y producci贸n
Nota:
Un preprocesador de CSS se puede definir como una herramienta que nos permite escribir pseudoc贸digo CSS que luego ser谩 compilado para ser convertido en CSS
Variables
Una de las principales caracter铆sticas de los preprocesadores es que permiten el uso de variables. Dentro de estas variables, podremos almacenar valores que luego reutilizar en cualquier parte del c贸digo. Gracias a esta reutilizaci贸n ahorraremos mucho trabajo cuando tengamos que modificar un valor que se repite a lo largo de nuestro c贸digo. Por ejemplo, podr铆amos tener declaradas las siguientes variables:
$color_principal: #fff;
$color_secundario: #2BA47D;
$tamano_texto: 30px;
body {
color: $color_principal;
background: $color_secundario;
font-size: $tamano_texto;
}
Como vemos, luego esas variables pueden ser utilizadas dentro de bloques de estilos. El c贸digo anterior una vez compilado dar铆a como resultado lo siguiente:
body {
color: #fff;
background: #2BA47D;
font-size: 30px;
}
Funciones, mixins y prefixing
Como ocurre con cualquier lenguaje de programaci贸n, el uso de funciones permite evitar la escritura de c贸digo repetido. Esto mismo ocurre con los preprocesadores de CSS donde podemos crear una funci贸n que contenga una serie de caracter铆sticas que se utilizan en varias partes de la hoja de estilos.
Mediante la palabra mixins, podemos definir una funci贸n haciendo uso de un procesador CSS, un ejemplo de esto que estamos diciendo ser铆a el siguiente:
mixin box-sizing(valor) {
-webkit-box-sizing: valor;
-moz-box-sizing: valor;
box-sizing: valor;
}
Ahora, si debemos utilizar de nuevo esta serie de propiedades, lo que deber铆amos hacer ser铆a la llamada a esa funci贸n, tal y como se muestra en el siguiente ejemplo:
div {
box-sizing(border-box);
}
El c贸digo anterior ser铆a lo mismo que escribir en CSS tradicional lo siguiente:
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Aunque pueda parecer cosa de poco, en un proyecto con un elevado n煤mero de l铆neas de c贸digo puede significar el ahorro de muchas de ellas.
Principales preprocesadores CSS
Aunque en la actualidad nos podemos encontrar muchos preprocesadores, hay algunos de ellos que destacan sobre el resto.聽 A continuaci贸n hablaremos de los m谩s populares.
Less聽
Se trata del preprocesador m谩s com煤n y m谩s f谩cil de utilizar. Fue creado en el a帽o 2009 por Alexis Sellier y est谩 escrito completamente utilizando el lenguaje JavaScript. Se caracteriza por contar con una sintaxis muy parecida a CSS regular, adem谩s de contar con una comunidad de usuarios muy grande y activa. Una de sus ventajas es que tiene una curva de aprendizaje muy r谩pida, gracias sobre todo a la gran cantidad de material que nos podemos encontrar. Less es utilizado en algunos proyectos como Twitter, Boostrap y Joomla 3.
Sass聽
Se trata de otro de los preprocesadores m谩s utilizados hoy en d铆a. Fue creado en el a帽o 2007 por Hampton Carlin y est谩 escrito mediante Ruby. Dentro de Sass nos encontramos con dos versiones de sintaxis diferente: .SCSS y .SASS. Cuenta con una gran comunidad tras su espalda y muchos recursos de aprendizaje web.
Stylus聽
Este preprocesador fue creado por Learn Boost en el a帽o 2010. Est谩 escrito en JavaScript y tiene las mayor铆as de caracter铆sticas contenidas en Sass y Less, pero con una sintaxis m谩s sencilla y flexible. Stylus es el menos utilizado de los tres.
A lo largo de este punto hemos hablado de lo que son los preprocesadores y de sus principales caracter铆sticas, y c贸mo su uso puede facilitar el desarrollo de un proyecto web. Puede que al principio sea m谩s complicado al tener que aprender a utilizarlo, pero cuando lo conozc谩is os dar茅is cuenta c贸mo su uso nos agiliza el desarrollo de los proyectos.