Preprocesadores CSS: Less y Sass

Preprocesadores CSS

La simplicidad de CSS hace que sea muy limitado. Por ejemplo, en el caso de necesitar cambiar el valor de una propiedad para que sea igual en muchos documentos se hace muy costoso. Además, tampoco se pueden utilizar condicionales, variables o estructuras anidadas. Para facilitar estas tareas, y muchas otras, nacen los preprocesadores CSS.

Mediante los preprocesadores CSS se desarrollan estilos más mantenibles y con una sintaxis más rica. Los ficheros de los preprocesadores son parecidos a los de CSS y deben compilarse para traducirse a hojas de estilo CSS reconocibles por los diferentes navegadores.

Ver las diferentes opciones para compilar un fichero de un preprocesador.

Preprocesadores Less y Sass

Los preprocesadores más utilizados son Less y Sass. Less es muy sencillo de instalar en caso de trabajar con Node.js y Saas requiere soporte para lenguaje Ruby.

Ejemplos Sass:

Variables:

$font-stack: Helvetica, sans-serif; 
$primary-color: #333; 

body {   
     font:  $font-stack;   
     color: $primary-color; 
}

Nesting:

nav { 
    ul { 
        margin: 0; 
        padding: 0; 
        list-style: none; 
    } 
    li { 
        display: inline-block; 
    } 
}

Operators:

article { 
    float: left; 
    width: 600px / 960px * 100%; 
} 
aside { 
    float: right; 
    width: 300px / 960px * 100%; 
}

Mixins:

@mixin transform($property) { 
    -webkit-transform: $property; 
    -ms-transform: $property; 
    transform: $property;
} 
.box { 
    @include transform(rotate(30deg)); 
}

Conoce más acerca de los preprocesadores Sass y Less en los siguientes enlaces: