Diferencia entre Sass y Less

La principal diferencia entre Sass (Syntactically Awesome Stylesheet) y Less (Leaner Style Sheets) es que Sass esta basado en Ruby y Less esta basado en JavaScript aunque esto no supone una ventaja de uno sobre otro.

Otra de las diferencias es la sintaxis entre ambos aunque en esencia ambos soportan prácticamente las mismas características o al menos las mas importantes o usuales.

Tabla de contenido

1. Definición de Variables entre Sass(Scss) y Less
2. Nesting entre Sass(Scss) y Less
3. Mixins entre Sass(Scss) y Less
4. Operadores entre Sass(Scss) y Less
5. Uso de @Extend en Sass
6. Módulos en Sass(Scss)
7. Conclusiones

Veremos algunas de las características para formar nuestro propio criterio, en realidad hasta que no lo utilicemos en alguno de nuestros proyectos o sitios web podremos decidirnos por cual utilizar, en lo personal prefiero Sass pero su versión Scss (Sassy Cascading Style Sheets).

¿Conoces lo que es Scss? Te dejo este artículo para que disipes tus dudas Diferencia entre SCSS y CSS

Definición de Variables entre Sass(Scss) y Less

Para definir una variable en Sass o Scss se utiliza el símbolo $

Para definir una variable en Less se utiliza @

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

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

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

body {
  font: 100% @font-stack;
  color: @primary-color;
}

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting entre Sass(Scss) y Less

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

Como podemos ver en este caso no hay diferencia en la sintaxis, es la misma.

Mixins entre Sass(Scss) y Less

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

En este caso si podemos ver diferencia entre la llamada del mixin tanto en Scss(Sass) como en Less, en Sass la llamada para el mixin requiere la palabra @include mientras en Less se manda llamar como si fuera un función de JavaScript .bordered() y listo, por algo se basa en JavaScript.

Operadores entre Sass(Scss) y Less

Sass: Tiene los siguientes operadores matemáticos estándar como +, -, *, math.div() y %.

Less: Tiene los siguientes operadores aritméticos +, -, *, /

@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

// Los números son convertidos en la misma unidad
@conversion-1: 5cm + 10mm; // el resultado es 6cm
@conversion-2: 2 - 3cm - 5mm; // el resultado es -1.5cm

// La conversión es imposible
@incompatible-units: 2 + 5px - 3cm; // el resultado es 4px

// Ejemplo con variable
@base: 5%;
@filler: @base * 2; // el resultado es 10%
@other: @base + @filler; // el resultado es 15%

Uso de @Extend en Sass

El uso de @extend te permite compartir un conjunto de propiedades CSS de un selector a otro. En el ejemplo, vamos a crear una serie simple de mensajes para errores, advertencias y éxitos usando otra característica que va de la mano con clases extendidas de marcador de posición. Una clase de marcador de posición es un tipo especial de clase que solo se imprime cuando está extendida y puede ayudar a mantener limpio y ordenado el CSS compilado.

/* Este CSS será compilado %message-shared porque esta extendido. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

/* Este CSS nunca se compila por que %equal-heights nunca es extendido. */
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

/* Este CSS será impreso por que %message-shared esta extendido */
.warning, .error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

Si observamos bien esto también lo podemos lograr con un mixin tanto de Sass como de Less pero la compilación es diferente aunque el resultado sea el mismo.

Módulos en Sass(Scss)

No es necesario que escribas todo tu Sass en un solo archivo. Puedes dividirlo como quieras con la regla @use. Esta regla carga otro archivo Sass como módulo, lo que significa que puede hacer referencia a sus variables, mixins y funciones en su archivo Sass con un espacio de nombres basado en el nombre del archivo. ¡El uso de un archivo también incluirá el CSS que genera en su salida compilada!

// archivo _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

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

// archivo styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

Aquí pudimos ver algunas de las diferencias entre ambos preprocesadores, si deseas profundizar aun mas sobre las sintaxis de cada uno de ellos te recomiendo visitar sus sitios oficiales:

https://sass-lang.com

https://lesscss.org

Conclusiones

En lo personal prefiero usar Sass en su versión de Scss en lugar de Less para ambos preprocesadores existe una gran cantidad de información en internet y una comunidad de apoyo para cada uno de ellos.

¿Ya sabes cuales son nuestros servicios?

¿Conoces alguna otra diferencia entre ambos preprocesadores de CSS? coméntanoslo

¿Necesitas ayuda con tu desarrollo web o con el marketing de tu negocio? contáctanos

---

Jesús Serrano

Desarrollador web con amplia experiencia en diferentes lenguajes de programación, Servidores de Bases de datos y servidores web.

El que no vive para servir no sirve para vivir

• Instagram
• Author's Facebook
• Author LinkedIn
• WhatsApp

Contactar

Si necesitas ayuda con tu desarrollo de software o el marketing de tu negocio no dudes en ponerte en contacto con nosotros.

Teléfono: 4772288223

Email: atencionacliente@markits.com.mx

• Instagram
• Author's Facebook
• Author LinkedIn
• WhatsApp

Pide un presupuesto