Preprocesadores CSS Comparados Sass vs. LESS

Hay un número de CSS Preprocessor, LESS, Sass, Stylus y Swith CSS, solo por nombrar algunos. Preprocesador CSS, Como hemos dicho con frecuencia antes, el objetivo principal es hacer que la creación de CSS sea más dinámica, organizada y productiva. Pero, La pregunta es, ¿cuál de ellos hace mejor el trabajo??

Bueno, por supuesto, no miraríamos a cada uno de ellos, en cambio, solo compararemos dos de los más populares: Sass y LESS. Para decidir, compararemos los dos en siete factores: el que se desempeña mejor obtiene un punto; En caso de empate, ambos recibirán un punto..

Vamos a empezar.

Instalación

Empecemos por el paso muy fundamental., Instalación. Tanto Sass como LESS se basan en una plataforma diferente, Sass se ejecuta en Ruby, mientras que LESS es una biblioteca de JavaScript (que estaba en realidad también construido en Ruby primero).

Hablar con descaro a: Sass necesita a Ruby para que funcione, en Mac está preinstalado, pero en Windows es probable que necesites instalarlo antes de poder comenzar a jugar con Sass. Además, Sass debe instalarse a través de la Terminal o el Símbolo del sistema. Hay varias aplicaciones GUI que puedes usar en su lugar pero no son gratuitas.

MENOS: LESS se basa en JavaScript, por lo que instalar LESS es tan fácil como vincular la biblioteca de JavaScript a su documento HTML. También hay algunas aplicaciones GUI para ayudar a compilar LESS to CSS y la mayoría de ellas son gratuitas y tienen un muy buen rendimiento (por ejemplo, WinLess y LESS.app).

Conclusión: MENOS está claramente a la cabeza.

Extensiones

Tanto Sass como LESS tienen extensiones para un desarrollo web más rápido y sencillo.

Hablar con descaro a: En nuestro último post, hablamos sobre Compass, la extensión actual y popular basada en Sass. Compass tiene varios Mixins para escribir la sintaxis CSS3 en menos tiempo.

Pero Compass está más allá de solo CSS3 Mixins, ha agregado otras características muy útiles como Ayudantes, Diseño, Tipografía, Diseño de cuadrícula e incluso Imágenes de Sprite. También tiene config.rb Archivo donde podemos controlar la salida CSS y algunas otras preferencias. En resumen, Compass es un paquete todo en uno para realizar el desarrollo web con Sass..

MENOS: LESS también tiene varias extensiones, pero a diferencia de Compass que tiene todo lo que necesitamos en un solo lugar, están separadas y cada una de ellas está construida por diferentes desarrolladores. Esto no será un problema para los usuarios experimentados, pero para aquellos que recién comienzan con MENOS, deben tomarse un tiempo para elegir las extensiones adecuadas que se adapten a su flujo de trabajo..

Aquí hay algunas extensiones LESS que puede necesitar incluir en su proyecto:

CSS3 Mixins: LESS Elements, Preboot, LESS Mixins.
Cuadrícula: 960.gs, sin marco, semantic.gs
Diseño: Incluso menos
Misceláneo: Twitter Bootstrap

Conclusión: Creo que tenemos que estar de acuerdo en que Sass and Compass es un gran dúo y la función de imagen Sprite es realmente genial, así que un punto para Sass aquí..

Idiomas

Cada preprocesador CSS tiene su propio idioma y son en su mayoría comunes. Por ejemplo, tanto Sass como LESS tienen variables, pero no hay una diferencia significativa, excepto que Sass define variables con una PS firmar mientras menos lo hace con una @ firmar. Siguen haciendo lo mismo: almacenar un valor constante.

A continuación, examinaremos algunos de los idiomas más utilizados tanto en Sass como en LESS (según mi experiencia).

Anidamiento

La regla de anidamiento es una buena práctica para evitar escribir selectores repetidamente y tanto Sass como LESS tienen la misma forma en las reglas de anidamiento;

Sass / Scss y LESS

 nav margen: 50px auto 0; ancho: 788px; altura: 45px; ul relleno: 0; margen: 0;

Pero Sass / Scss lleva este método un paso más allá al permitirnos también anidar propiedades individuales, aquí hay un ejemplo:

 nav margen: 50px auto 0; ancho: 788px; altura: 45px; ul relleno: 0; margen: 0;  borde: estilo: sólido; izquierda: ancho: 4px; color: # 333333;  derecha: ancho: 2px; color: # 000000;

Este código generará la siguiente salida..

 nav margen: 50px auto 0; ancho: 788px; altura: 45px; estilo de borde: sólido; borde izquierdo-ancho: 4px; color de borde izquierdo: # 333333; borde derecho-ancho: 2px; color de borde derecho: # 000000;  nav ul padding: 0; margen: 0;

Conclusión: Anidar propiedades individuales es una buena adición y se considera mejores prácticas, especialmente si seguimos el principio DRY (Don't Repeat Yourself). Entonces, creo que está claro cuál está mejor en este caso.

Herencia de Mixins y Selector

Mixins en Sass y LESS se definen un poco diferente. En Sass utilizamos el@mixin directiva mientras que en MENOS lo definimos con selector de clase. Aquí hay un ejemplo:

Sass / Scss

 @mixin border-radius ($ valores) border-radius: $ valores;  nav margen: 50px auto 0; ancho: 788px; altura: 45px; @include radio-borde (10px);

MENOS

 .border (@radius) border-radius: @radius;  nav margen: 50px auto 0; ancho: 788px; altura: 45px; .border (10px);

Mixins, en Sass y LESS, se usa para incluir propiedades de un conjunto de reglas a otro conjunto de reglas. En Sass, este método es llevado más lejos con Herencia Selector. El concepto es idéntico, pero en lugar de copiar todas las propiedades, Sass ampliará o agrupará los selectores que tengan las mismas propiedades y valores utilizando la @ampliar directiva.

Echa un vistazo a este ejemplo a continuación:

 .circle border: 1px solid #ccc; radio del borde: 50px; desbordamiento: oculto;  .avatar @extender .circle;

Este código resultará como;

 .círculo, .avatar borde: 1px sólido #ccc; radio del borde: 50px; desbordamiento: oculto;

Conclusión: Sass está un paso por delante con distintas herencias de Mixins y selectores.

Operaciones

Tanto Sass como LESS pueden realizar operaciones matemáticas básicas, pero a veces devuelven resultados diferentes. Vea cómo realizan este cálculo aleatorio:

Sass / Scss

 margen de $: 10px; div margen: $ margen - 10%; / * Error de sintaxis: Unidades incompatibles: '%' y 'px' * /

MENOS

 @margin: 10px; div margen: @margin - 10%; / * = 0px * /

Conclusión: Sass, en este caso, lo está haciendo con mayor precisión; como% y px no son equivalentes, debería devolver un error. Aunque, en realidad espero que pueda ser algo así como 10px - 10% = 9px.

Notificaciones de error

La notificación de error es importante para ver lo que estamos haciendo mal. Imagina miles de líneas de código y un pequeño error en algún lugar del caos. Una limpieza notificación de error Será la mejor manera de resolver el problema rápidamente..

Hablar con descaro a: En este ejemplo, solo estoy usando el símbolo del sistema para ejecutar el compilador. Sass generará una notificación de error siempre que haya invalidez en el código. En este caso, eliminaremos un punto y coma en la línea 6, y esto debería convertirse en un error. Echa un vistazo a la captura de pantalla de abajo.

Cuando vi por primera vez esta notificación, apenas podía entenderla. Además, parece que Sass está ligeramente fuera de lugar con el error. Dijo que el error está en linea 7, en lugar de 6.

MENOS: Con el mismo escenario de error, la notificación MENOS está más bien presentada y también parece ser más precisa. Echa un vistazo a esta captura de pantalla:

Conclusión: LESS ofrece una mejor experiencia en este asunto, y gana incuestionablemente.

Documentación

La documentación es una parte muy importante para cada producto; Incluso a los desarrolladores experimentados les resultaría difícil hacer cosas sin Documentación.

Hablar con descaro a: Si examinamos la documentación en el sitio oficial, personalmente, siento que estoy en el centro de una biblioteca, la documentación es muy completa. Sin embargo, el aspecto y la sensación, si eso es importante para usted, no son motivadores para la lectura, además el fondo es completamente blanco..

La presentación es mucho más como la documentación de W3 o WikiPedia. No sé si este es el estándar para mostrar documentación en Internet, pero no es la única manera.

MENOS: Por otro lado, la documentación de LESS es más clara sin demasiadas explicaciones de texto, y se sumerge directamente en los ejemplos. También tiene buena tipografía y una mejor combinación de colores. Creo que esta fue la razón por la cual LESS atrajo mi atención en primer lugar y puedo aprender más rápido debido al diseño y la presentación de la documentación..

Conclusión: La presentación de la documentación de LESS es mejor, aunque Sass tiene una documentación más completa, por lo que creo que podemos llamar a esto un empate.

Pensamiento final

Creo que es una conclusión clara que Sass es mejor con una puntuación total de 5 contra 3 por menos. Sin embargo, no significa que MENOS sea malo; solo necesitan ser mejores Al final, aún depende de la decisión del usuario final elegir el preprocesador de su elección. Ya sea Sass o LESS, siempre que estén cómodos y sean más productivos, ese es el ganador en su lista..

Por último, si tiene algo en mente sobre este tema, no dude en compartirlo en el cuadro de comentarios a continuación..