Cual procesador usar SASS ó LESS

Escrito por smartadmin el . Posteado en CSS, html, Programacion, web 2.0

Share on FacebookShare on LinkedInTweet about this on TwitterShare on Google+Email this to someone
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.     preprocesadores SASS LESS STYLUS   Dentro de este universo una de las preguntas más comunes es cual usar. Para mi la verdad es fácil analizando los tres la verdad me es indiferente y veo muchas similitudes por lo tanto no es difícil adaptarme a trabajar con cualquier, aunque si en mi esta la decision prefiero escoger SASS por que de los tres es el más popular y tiene una extension con funcionalidades interesantes llamada COMPASS. En esta presentación de slider podemos ver un comparativo entre los tres, donde el autor se decanta en ultimas entre SASS y Stylus.
 

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
CSS
1
2
3
4
5
6
box{
border:1px solid black;
height:100px;
width:100px;
@include border-radius(5px);
}
El codigo css resultante es:
CSS
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;
}
Este otro ejemplo combina el radio del borde con sombra
CSS
1
2
3
4
5
6
box{
width:100px;
height:100px;
@include boder-radius(5px);
@include box-shadow($shadow-1);
}
El codigo css quedaria:
CSS
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;
}
Las bondades del uso de preprocesadores no estan en discusión y seguramente si trabajas con LESS ó Stylus lo deberías seguir haciendo, pero para los que aun no los usan seria un bueno que escogiesen SASS como su preprocesador de batalla.
   

Etiquetas:, , , ,

"Trackback" Enlace desde tu web.