Cual procesador usar SASS ó LESS
Creo que el mundo actualmente se divide entre los que usan preprocesadores y los que no (cada día son menos los que no los usan). Dentro de los que los usan la torta se divide entre LESS, SASS y Stylus como los más populares.
POR QUE SASS ES MEJOR QUE LESS
- Sass te permite escribir métodos reusables e instrucciones lógicas (condiciones y ciclos). LESS te permite hacer esto pero de una manera ineficiente y que no es nada intuitiva.
- Los usuarios de Sass pueden usar la poderosa libreria Compass y aunque existen librerias para LESS, ningún es tan poderosa como Compass, la cual tiene una gran comunidad que aporta a su mejoramiento. Paralelamente COMPASS tiene alguna funcionalidades sorprendentes como la generacion dinamica de sprite maps, el legacy browser hack, y el soporte de estructura css3 para diferentes browsers.
- Compass tambien permite vincular diferentes frameworks como Blueprint, Foundation, ó Bootstrap al inicio. Con lo cual puedes realizar una mejor manipulación de tu proyecto.
La existencia de COMPASS hace aun más fácil nuestro trabajo con SASS, dado que COMPASS es un cumulo de mixins y funciones de gran utilidad que nos evitan repetir código como border-radius, box-shadow y gradientes.
El siguiente ejemplo hace uso de compass para manejar el tema del radio del border
1 2 3 4 5 6 |
box{ border:1px solid black; height:100px; width:100px; @include border-radius(5px); } |
1 2 3 4 5 6 7 8 |
box{ border:1px solid black; height:100px; width:100px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } |
1 2 3 4 5 6 |
box{ width:100px; height:100px; @include boder-radius(5px); @include box-shadow($shadow-1); } |
1 2 3 4 5 6 7 8 9 10 11 |
box{ border:1px solid black; height:100px; width:100px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; box-shadow:0px 1px 0px 1px black; -webkit-box-shadow:0px 1px 0px 1px black; -moz-box-shadow:0px 1px 0px 1px black; } |
Etiquetas:CSS, LESS, preprocesadores, SASS, stylus
"Trackback" Enlace desde tu web.