¿Qué es Less?

Less (Leaner Style Sheets) es un preprocesador CSS que añade variables, anidamiento, mixins y funciones al CSS estándar. Como Sass, el código Less se compila a CSS normal antes de llegar al navegador.

Fue lanzado en 2009 y alcanzó su popularidad máxima cuando Bootstrap 3 lo adoptó como su preprocesador oficial. Bootstrap 4 migró a Sass, lo que redujo el uso de Less considerablemente, pero sigue siendo una opción válida y con base de usuarios activa.

A diferencia de Sass, Less puede ejecutarse directamente en el navegador (aunque en producción siempre se compila) y su sintaxis es deliberadamente cercana al CSS estándar, con una curva de aprendizaje más baja.

---

Sintaxis

Less usa la misma sintaxis que CSS con extensiones. Los archivos tienen extensión .less:

// Variables — con @ en lugar de $ (a diferencia de Sass)
@color-primary: #3d5a80;
@font-sans: 'Inter', system-ui, sans-serif;
@space-4: 1rem;

body {
  font-family: @font-sans;
  color: @color-primary;
}

---

Características principales

Variables

@color-primary: #3d5a80;
@color-accent:  #ee6c4d;
@border-radius: 8px;

.btn {
  background: @color-primary;
  border-radius: @border-radius;
  
  &:hover {
    background: darken(@color-primary, 10%);
  }
}

Anidamiento

Igual que en Sass. El & referencia al selector padre:

.nav {
  display: flex;
  gap: 1rem;

  a {
    color: inherit;
    text-decoration: none;

    &:hover {
      color: @color-primary;
    }
  }

  &.is-sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
}

Mixins

En Less, cualquier clase o selector puede usarse como mixin — no necesitas una declaración especial:

// Definir el mixin como una "clase"
.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

// Mixin con parámetros
.border-radius(@radius: 4px) {
  border-radius: @radius;
}

.truncate(@lines: 1) {
  display: -webkit-box;
  -webkit-line-clamp: @lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// Uso
.hero {
  .flex-center();
  min-height: 400px;
}

.card {
  .border-radius(12px);
  
  &__description {
    .truncate(3);
  }
}

Los paréntesis vacíos () en la definición evitan que el mixin se incluya directamente en el CSS compilado.

Funciones de color

darken(@color-primary, 10%)     // oscurece
lighten(@color-primary, 15%)    // aclara
mix(@color-a, @color-b, 50%)    // mezcla
rgba(@color-primary, 0.8)       // añade transparencia
spin(@color-primary, 30)        // rota el hue en el círculo de color

Operaciones matemáticas

@base: 16px;

h1 { font-size: @base * 2.5; }   // 40px
h2 { font-size: @base * 2; }     // 32px
.container { width: 100% / 3; }  // 33.333%

Importar parciales

// main.less
@import 'variables';    // busca _variables.less o variables.less
@import 'reset';
@import 'components/button';
@import 'components/card';

---

Less vs Sass

	Less	Sass (SCSS)
Variable	@variable	$variable
Mixin básico	.mixin()	@mixin / @include
Herencia	:extend(.clase)	@extend %placeholder
Funciones propias	Limitado	@function completo
Puede correr en browser	Sí (via less.js)	No
Popularidad actual	Media	Alta
Asociado a	Bootstrap 3	Bootstrap 4+, proyectos modernos

---

Less vs Variables CSS nativas

Al igual que con Sass, la tendencia moderna es usar variables CSS nativas (--var) para los tokens de diseño. Less sigue siendo útil si trabajas en un proyecto que ya lo usa o si mantienes código legacy de Bootstrap 3.

---

Instalación

npm install -D less

Vite y webpack soportan Less de forma nativa una vez instalado.

Sass CSS Vite Bundler

---

---