¿Cuáles son las diferencias entre LESS y SASS?

Este artículo tiene como objetivo enfatizar las características clave y las diferencias entre los dos preprocesadores de CSS, LESS y SASS. Antes de sumergirnos directamente en la sección de diferencias, primero, hablemos de estos dos preprocesadores. Si no conoce los conceptos básicos de este preprocesador, consulte LESS & SASS .

LESS: es una hoja de estilo más eficiente que es de naturaleza dinámica y permite la personalización y la reutilización de manera eficiente. LESS es compatible con varios navegadores. Está basado en JavaScript y tiene informes de error muy precisos además de indicar la ubicación exacta del error. Ayuda en la legibilidad y la reutilización al permitir que los usuarios creen propiedades como variables y mixins para crear valores dinámicos y reutilizables en todo el proyecto. Utiliza Preboot.less para implementar mixins.

Ejemplo:

@selector: box; //using variables
  
.@{selector} {
  font-weight: semi-bold;
  line-weight: 20px;
}

Salida CSS:

.box {
 font-weight: semi-bold;
 line-weight: 20px;
}

SASS: es una hoja de estilo sintácticamente impresionante que admite todas las extensiones compatibles con la versión de CSS que aumenta la reutilización del código. Se implementa usando Ruby y reporta activamente los errores cometidos en la sintaxis. Utiliza la extensión de brújula para implementar mixins y también permite que un usuario implemente sus propias funciones. Permite a los usuarios crear reutilizaciones de código como variables y mixins también.

Ejemplo:

a {
  color: white;
  
  // Nesting
  &:hover {
    text-decoration: none;
  }
  
  :not(&) {
    text-decoration: underline;
  }
}

Salida CSS:

a {
  color: white;
}
a:hover {
  text-decoration: none;
}
:not(a) {
  text-decoration: underline;
}

 
similitudes

1. Son similares cuando se trata de sintaxis.

   • MENOS:

      @color: white; /*@color is a LESS variable*/
     #header {
       color: @color;
     }

   • HABLAR CON DESCARO A:

      $color: white; /* $color is a SASS variable */
     #header {
       color: $color;
     }

2. Podemos usar propiedades como mixins y variables en SASS y LESS ambos.

Diferencias entre SASS y LESS:

Ejemplo: Para mixins

MENOS:

.margined {
  margin-bottom: 1rem;
  margin-top: 2rem;
}
#box h1 {
  font: Roboto, sans-serif;
  .margined;
}
.cont a {
  color: blue;
  .margined;
}

Salida CSS:

#box h1 {
  font: Roboto, sans-serif;
  margin-bottom: 1rem;
  margin-top: 2rem;
}
.cont a {
  color: blue;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

HABLAR CON DESCARO A:

@mixin margined {
  margin-bottom: 1rem;
  margin-top: 2rem;
}
#box h1 {
  @include margined;
  font: Roboto, sans-serif;
}
.cont a {
  @include margined;
  color: blue;
}

Salida CSS:

#box h1 {
  margin-bottom: 1rem;
  margin-top: 2rem;
  font: Roboto, sans-serif;
}
.cont a {
  margin-bottom: 1rem;
  margin-top: 2rem;
  color: blue;
}