Algunos Preprocesadores CSS que Debes Conocer

En nuestra actualidad contamos con preprocesadores para escribir nuestros estilos CSS de una manera mas extensiva y mucho más funcional.

En este artículo voy a dar a conocer los tres preprocesadores más utilizados hoy en día como son (LESS, SASS, STYLUS).

Primero quiero decirte que el nombre preprocesador CSS no te desanime a usarlas ya que estas herramientas han sido creadas para facilitarnos el desarrollo y por ende su sintaxis es lo más simple posible.

¿Porque Utilizar un Preprocesador CSS?

Utilizar preprocesadores CSS para desarrollar el diseño de nuestro proyecto web puede ayudarnos en múltiples situaciones que a continuación listare alguna de ellas.

  • Ahorrarnos tiempo
  • Fácil mantenimiento
  • Reutilizar código
  • Separa el desarrollo de la producción
  • Permite crear variables
  • Permite crear mixins
  • Permite crear funciones
  • Permite realizar operaciones matemáticas (+ - * /)
  • Permite crear reglas anidadas

A continuación vamos a crear tres secciones una de LESS, otra de SASS y la ultima de STYLUS. Para que puedan apreciar las diferencias y similitudes entre ellas.

Algo importante que hay que tener en cuenta es que nuestro código ya sea LESS, SASS o Stylus debe de ser compilado a ficheros CSS para su uso en producción.


LESS

LESS es un dinámico lenguaje de hojas de estilo que puede ser compilado en hojas de estilo en cascada (CSS) y ejecutarse en el lado del cliente o en el lado del servidor. Los archivos LESS tienen la extensión .less.

Código LESS

Ahora vamos a realizar algunos ejemplos de cada mecanismo que ofrece LESS.

Variables

Para declarar una variable en LESS antepone el simbolo @ seguido del nombre que se le asignara.

@color: #4D926F;
@background: #3d3d3d;

.header {
    color: @color;
    background:@background;
}
h2 {  
    color: @color;
}

Compilado a CSS

.header {
  color: #4D926F;
  background: #3d3d3d;
}
h2 {  
  color: #4D926F;
}

Mixins

Es una clase que contiene las propiedades que se reutilizara en diferentes selectores CSS.

//Mixin
.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

//Uso
.header {
  .rounded-corners;
}
footer {  
  .rounded-corners(10px);
}

Compilado a CSS

.header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
footer {  
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Reglas Anidadas

Son selectores CSS escritos dentro de otros selectores deforma anidada.

.header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 16px;
    a {
      text-decoration: none;
      color: red;
      &:hover {
        border-width: 1px;
        color: #fff;
      }
    }
  }
}

Compilado a CSS

.header h1 {
  font-size: 26px;
  font-weight: bold;
}
.header p {
  font-size: 16px;
}
.header p a {
  text-decoration: none;
  color: red;
}
.header p a:hover {
  border-width: 1px;
  color: #fff;
}

Operadores

Se pueden usar diferentes operadores matemáticos como veremos a continuación.

@the-border: 2px;
@base-color: #111;

.header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 3;
}
footer {  
  color: @base-color + #003300;
  padding-top: @the-border + 2; //Suma
  padding-right: @the-border - 2; //Resta
  padding-bottom: @the-border * 3; //Multiplicación
  padding-left: @the-border / 2; //División
}

Compilado a CSS

.header {
  color: #333333;
  border-left: 2px;
  border-right: 6px;
}
footer {  
  color: #114411;
  padding-top: 4px;
  padding-right: 0px;
  padding-bottom: 6px;
  padding-left: 1px;
}

Funciones

Estas son algunas funciones predefinidas, también puedes crear las tuyas.

@bg1: #FF7837;
@bg2: #5C5656;
@bg3: #0080FF;

.header{
    background: lighten(@bg1, 5%);
    border-color: desaturate(@bg2, 5%);
}
footer{  
    background: darken(@bg2 , 3%);
    a{
        color: lighten(@bg3, 5%);
    }
}

Compilado a CSS

.header {
  background: #ff8951;
  border-color: #595959;
}
footer {  
  background: #544f4f;
}
footer a {  
  color: #1a8dff;
}

Compilar Nuestros Ficheros LESS a CSS

Para esta tarea usaremos Gulp.js que es automatizador de tareas que consumen mucho tiempo, esta herramienta esta enfocado al front-end.

Antes de comenzar debes dominar Gulp.js, en este post puedes informarte mejor Instalación de Gulp.js para Automatizar Tareas Frontend.

Código package.json

Crea una carpeta con el nombre de gulpjs-less por ejemplo, esta carpeta pasara a ser tu proyecto Gulp.js.

Dentro de la carpeta crea un archivo package.json con el siguiente código.

{
  "name": "less",
  "version": "1.0.0",
  "description": "Compilar ficheros LESS a hojas de estilo en cascada (CSS)",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Luis Rene Mas Mas",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-less": "^3.3.0"
  }
}

Gulpfile.js

Dentro de la carpeta creada anteriormente añade el archivo gulpfile.js y agrega el siguiente código.

'use strict';  
var gulp = require('gulp');  
var less = require('gulp-less');

gulp.task('less', function () {  
  return gulp.src('./less/**/*.less')
      .pipe(less({
          paths: ['./less/']
        }))
    .pipe(gulp.dest('./public/css'));
});

gulp.task('watch', function(){  
    gulp.watch('./less/**/*', ['less']);
});

gulp.task('default', ['watch', 'less']);  

Nota: crea una subcarpeta con el nombre de less, el cual contendrá tus ficheros .less.

Estructura de Archivos

Así debe de quedar ordenados tus archivos y carpetas.

Estructura de archivos LESS

Poner en Marcha

Para poder compilar nuestros ficheros LESS a CSS con Gulp.js, accede a la carpeta principal desde el terminal o consola de comandos y ejecuta el siguiente comando.

npm install  

Este comando instalara los paquetes listados en la sección de devDependencies del archivo package.json.

Una vez instalado los paquetes, solo queda por ejecutar el siguiente comando.

gulp  

SASS

SASS (Syntactically Awesome Stylesheets) es un lenguaje de hoja de estilos en cascada (CSS). La sintaxis indentada y los ficheros SCSS tienen las extensiones .sass y .scss respectivamente.

Código SASS

Ahora vamos a realizar algunos ejemplos de cada mecanismo que ofrece SASS.

Variables

Para declarar una variable en SASS antepone el simbolo $ seguido del nombre que se le asignara.

$color: #4D926F;
$background: #3d3d3d;

.header {
 color: $color;
 background:$background;
}
h2 {  
 color: $color;
}

Compilado a CSS

.header {
  color: #4D926F;
  background: #3d3d3d;
}
h2 {  
  color: #4D926F;
}

Mixins

Es una clase que contiene las propiedades que se reutilizara en diferentes selectores CSS.

//Mixin
@mixin rounded-corners ($radius: 5px) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

//Uso
.header {
  @include rounded-corners;
}
footer {  
  @include rounded-corners(10px);
}

Compilado a CSS

.header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
footer {  
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Reglas Anidadas

Son selectores CSS escritos dentro de otros selectores deforma anidada.

.header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 16px;
    a {
      text-decoration: none;
      color: red;
      &:hover {
        border-width: 1px;
        color: #fff;
      }
    }
  }
}

Compilado a CSS

.header h1 {
  font-size: 26px;
  font-weight: bold;
}
.header p {
  font-size: 16px;
}
.header p a {
  text-decoration: none;
  color: red;
}
.header p a:hover {
  border-width: 1px;
  color: #fff;
}

Operadores

Se pueden usar diferentes operadores matemáticos como veremos a continuación.

$the-border: 2px;
$base-color: #111;

.header {
  color: $base-color * 3;
  border-left: $the-border;
  border-right: $the-border * 3;
}
footer {  
  color: $base-color + #003300;
  padding-top: $the-border + 2; //Suma
  padding-right: $the-border - 2; //Resta
  padding-bottom: $the-border * 3; //Multiplicación
  padding-left: $the-border / 2; //División
}

Compilado a CSS

.header {
  color: #333333;
  border-left: 2px;
  border-right: 6px;
}
footer {  
  color: #114411;
  padding-top: 4px;
  padding-right: 0px;
  padding-bottom: 6px;
  padding-left: 1px;
}

Funciones

Estas son algunas funciones predefinidas, también puedes crear las tuyas.

$bg1: #FF7837;
$bg2: #5C5656;
$bg3: #0080FF;

.header{
  background: lighten($bg1, 5%);
  border-color: desaturate($bg2, 5%);
}
footer{  
  background: darken($bg2 , 3%);
  a{
    color: lighten($bg3, 5%);
  }
}

Compilado a CSS

.header {
  background: #ff8951;
  border-color: #595959;
}
footer {  
  background: #544f4f;
}
footer a {  
  color: #1a8dff;
}

Compilar Nuestros Ficheros SASS a CSS

Para esta tarea usaremos Gulp.js que es automatizador de tareas que consumen mucho tiempo, esta herramienta esta enfocado al front-end.

Antes de comenzar debes dominar Gulp.js, en este post puedes informarte mejor Instalación de Gulp.js para Automatizar Tareas Frontend.

Código package.json

Crea una carpeta con el nombre de gulpjs-sass por ejemplo, esta carpeta pasara a ser tu proyecto Gulp.js.

Dentro de la carpeta crea un archivo package.json con el siguiente código.

{
  "name": "sass",
  "version": "1.0.0",
  "description": "Compilar ficheros SASS a hojas de estilo en cascada (CSS)",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Luis Rene Mas Mas",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^2.3.2"
  }
}

Gulpfile.js

Dentro de la carpeta creada anteriormente añade el archivo gulpfile.js y agrega el siguiente código.

'use strict';  
var gulp = require('gulp');  
var sass = require('gulp-sass');

gulp.task('sass', function () {  
  return gulp.src('./sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./public/css'));
});

gulp.task('watch', function(){  
  gulp.watch('./sass/**/*', ['sass']);
});

gulp.task('default', ['watch', 'sass']);  

Nota: crea una subcarpeta con el nombre de sass, el cual contendrá tus ficheros .scss.

Estructura de Archivos

Así debe de quedar ordenados tus archivos y carpetas.

Estructura de archivos SASS

Poner en Marcha

Para poder compilar nuestros ficheros SASS a CSS con Gulp.js, accede a la carpeta principal desde el terminal o consola de comandos y ejecuta el siguiente comando.

npm install  

Este comando instalara los paquetes listados en la sección de devDependencies del archivo package.json.

Una vez instalado los paquetes, solo queda por ejecutar el siguiente comando.

gulp  

STYLUS

STYLUS es un lenguaje de hoja de estilo dinámico que se compila en hojas de estilo en cascada (CSS). Su diseño está influenciado por Sass y LESS. Es considerado como la tercera sintaxis de preprocesador CSS más utilizado. Los ficheros STYLUS tienen la extensión .styl.

Código Stylus

Ahora vamos a realizar algunos ejemplos de cada mecanismo que ofrece Stylus.

Variables

Para declarar una variable en Stylus solo asignale el nombre con su respectivo valor o si deseas antepone el simbolo $ (opcional) seguido del nombre.

color = #4D926F  
background = #3d3d3d

.header 
 color: color
 background:background

h2  
 color: color

Compilado a CSS

.header {
  color: #4D926F;
  background: #3d3d3d;
}
h2 {  
  color: #4D926F;
}

Mixins

Es una clase que contiene las propiedades que se reutilizara en diferentes selectores CSS.

//Mixin
rounded-corners(radius = 5px)  
  -webkit-border-radius: radius
  -moz-border-radius: radius
  border-radius: radius

//Uso
.header 
  rounded-corners()

footer  
  rounded-corners(10px)

Compilado a CSS

.header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
footer {  
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

Reglas Anidadas

Son selectores CSS escritos dentro de otros selectores deforma anidada.

.header 
  h1 
    font-size: 26px
    font-weight: bold

  p 
    font-size: 16px
    a 
      text-decoration: none
      color: red
      &:hover 
        border-width: 1px
        color: #fff

Compilado a CSS

.header h1 {
  font-size: 26px;
  font-weight: bold;
}
.header p {
  font-size: 16px;
}
.header p a {
  text-decoration: none;
  color: red;
}
.header p a:hover {
  border-width: 1px;
  color: #fff;
}

Operadores

Se pueden usar diferentes operadores matemáticos como veremos a continuación.

the-border = 2px  
base-color = #111

.header 
  color: base-color * 3
  border-left: the-border
  border-right: the-border * 3

footer  
  color: base-color + #003300
  padding-top: the-border + 2px //Suma
  padding-right: the-border - 2px //Resta
  padding-bottom: the-border * 3px //Multiplicación
  padding-left: the-border / 2px  //División

Compilado a CSS

.header {
  color: #333333;
  border-left: 2px;
  border-right: 6px;
}
footer {  
  color: #114411;
  padding-top: 4px;
  padding-right: 0px;
  padding-bottom: 6px;
  padding-left: 1px;
}

Funciones

Estas son algunas funciones predefinidas, también puedes crear las tuyas.

bg1 = #FF7837  
bg2 = #5C5656  
bg3 = #0080FF

.header
  background: lighten(bg1, 5%)
  border-color: desaturate(bg2, 5%)

footer  
  background: darken(bg2 , 3%)
  a
    color: lighten(bg3, 5%)

Compilado a CSS

.header {
  background: #ff8951;
  border-color: #595959;
}
footer {  
  background: #544f4f;
}
footer a {  
  color: #1a8dff;
}

Compilar Nuestros Ficheros Stylus a CSS

Para esta tarea usaremos Gulp.js que es automatizador de tareas que consumen mucho tiempo, esta herramienta esta enfocado al front-end.

Antes de comenzar debes dominar Gulp.js, en este post puedes informarte mejor Instalación de Gulp.js para Automatizar Tareas Frontend.

Código package.json

Crea una carpeta con el nombre de gulpjs-stylus por ejemplo, esta carpeta pasara a ser tu proyecto Gulp.js.

Dentro de la carpeta crea un archivo package.json con el siguiente código.

{
  "name": "stylus",
  "version": "1.0.0",
  "description": "Compilar ficheros Stylus a hojas de estilo en cascada (CSS)",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Luis Rene Mas Mas",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-stylus": "^2.6.0"
  }
}

Gulpfile.js

Dentro de la carpeta creada anteriormente crea el archivo gulpfile.js y agrega el siguiente código.

'use strict';  
var gulp = require('gulp');  
var stylus = require('gulp-stylus');

gulp.task('stylus', function () {  
  return gulp.src('./stylus/**/*.styl')
    .pipe(stylus())
    .pipe(gulp.dest('./public/css'));
});

gulp.task('watch', function(){  
    gulp.watch('./stylus/**/*', ['stylus']);
});

gulp.task('default', ['watch', 'stylus']);  

Nota: crea una subcarpeta con el nombre de stylus, el cual contendrá tus ficheros .styl.

Estructura de Archivos

Así debe de quedar ordenados tus archivos y carpetas.


Estructura de archivos Stylus

Poner en Marcha

Para poder compilar nuestros ficheros Stylus a CSS con Gulp.js, accede a la carpeta principal desde el terminal o consola de comandos y ejecuta el siguiente comando.

npm install  

Este comando instalara los paquetes listados en la sección de devDependencies del archivo package.json.

Una vez instalado los paquetes, solo queda por ejecutar el siguiente comando.

gulp  

Elige el preprocesador que se acomode a tus necesidades, no hay un mejor o peor, tu código es lo que lo define.

Compártelo en tus redes sociales, para que tus amigos lo lean :)

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Desarrollador front-end & webmaster del blog 01luisrene.com

Trujillo - Perú @01luisrene

Únete al Blog

Obtén los últimos artículos publicados directamente en tu bandeja de entrada.

O suscríbase vía RSS con Feedly!

Comparte tu Opinión