Sass y Less son los pre-procesadores de CSS más conocidos en la actualidad, son fáciles de usar, mantener y actualizar, además de ofrecer múltiples ventajas frente al uso de CSS convencional, sin embargo hay cosas que podemos hacer para hacer mucho más rápida la tarea de escribir estilos con estas herramientas por eso quiero mostrarles este par de mixin que harán tu vida más fácil.

Bourbon

Esta librería para Sass te añade funciones que te permiten hacer tu trabajo más fácil y rápido que de manera convencional. Hay muchas funciones incluidas por lo que nombrarlas todas sería imposible por lo que solo vamos a dar un pequeño ejemplo.

Sass / Bourbon

@include border-color(red green null blue);

CSS generado

border-top-color: red;
border-right-color: green;
border-left-color: blue;

Como pueden ver es mucho más simple escribir el CSS y como este hay muchas funciones más, así que si quieren aprender más pueden visitar su sitio web. Adicionalmente también pueden encontrar un grid framework desarrollado con esta librería y Sass, también en su sitio web.

Sitio web: http://bourbon.io/

Less Hat

Esta librería es similar a la anterior solo que desarrollada para Less, al igual que con bourbon puedes encontrar muchas funciones para hacer más rápido el trabajo pero además de eso también tiene integración con CSS HAT – de ahí el nombre – un plugin para Photoshop que te permite crear estilos CSS a partir de las formas creadas con la aplicación de Adobe.

Less Hat

div {
    .transform(scale(.5) translate(10, 20));
}

 CSS generado

div {
    -webkit-transform: scale(.5) translate(10, 20);
    -moz-transform: scale(.5) translate(10, 20);
    -ms-transform: scale(.5) translate(10, 20);
    -o-transform: scale(.5) translate(10, 20);
    transform: scale(.5) translate(10, 20);
}

Sitio Web: http://lesshat.madebysource.com/