Вёрстка сайта с использованием LESS

Вёрстка сайта с использованием LESS

LESS — CSS-препроцессор с JavaScript-рантаймом, работающий как в Node.js (сборка), так и в браузере (устаревший подход). Переменные, миксины, функции, условия, операции с цветами. Синтаксис ближе к CSS, чем SCSS. Применяется в Bootstrap 3/4, Ant Design (до v5), в ряде старых проектов. Новые проекты чаще выбирают SCSS, но LESS актуален при поддержке legacy.

Установка и настройка

npm install -D less

Vite поддерживает .less из коробки:

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        math: 'always',
        relativeUrls: true,
        // Автоматический импорт globals в каждый файл
        additionalData: `@import "@/styles/variables.less";`,
      },
    },
  },
});

Переменные

В LESS переменные объявляются через @ — тот же символ, что и в директивах CSS, но в другом контексте:

// styles/variables.less

// Цвета
@color-primary: #2563eb;
@color-primary-dark: #1d4ed8;
@color-primary-light: #eff6ff;
@color-secondary: #7c3aed;
@color-success: #16a34a;
@color-danger: #dc2626;
@color-warning: #d97706;

@color-bg: #f9fafb;
@color-surface: #ffffff;
@color-text-primary: #111827;
@color-text-secondary: #6b7280;
@color-text-muted: #9ca3af;
@color-border: #e5e7eb;

// Типографика
@font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@font-size-base: 1rem;
@font-size-sm: 0.875rem;
@font-size-lg: 1.125rem;
@font-size-xl: 1.25rem;
@font-size-2xl: 1.5rem;
@font-size-3xl: 1.875rem;
@font-size-4xl: 2.25rem;
@line-height-base: 1.6;

// Отступы
@space-1: 0.25rem;
@space-2: 0.5rem;
@space-3: 0.75rem;
@space-4: 1rem;
@space-6: 1.5rem;
@space-8: 2rem;
@space-12: 3rem;
@space-16: 4rem;

// Граница и скругление
@border-radius-sm: 4px;
@border-radius-md: 8px;
@border-radius-lg: 12px;
@border-radius-full: 9999px;

// Breakpoints
@breakpoint-sm: 576px;
@breakpoint-md: 768px;
@breakpoint-lg: 992px;
@breakpoint-xl: 1280px;

Миксины

// styles/mixins.less

// Flex центрирование
.flex-center(@direction: row) {
  display: flex;
  flex-direction: @direction;
  align-items: center;
  justify-content: center;
}

// Обрезание текста
.truncate(@lines: 1) when (@lines = 1) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

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

// Медиа-запросы
.respond-to-sm(@rules) {
  @media (min-width: @breakpoint-sm) { @rules(); }
}
.respond-to-md(@rules) {
  @media (min-width: @breakpoint-md) { @rules(); }
}
.respond-to-lg(@rules) {
  @media (min-width: @breakpoint-lg) { @rules(); }
}
.respond-to-xl(@rules) {
  @media (min-width: @breakpoint-xl) { @rules(); }
}

// Сброс кнопки
.reset-button() {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
}

Компоненты

// components/button.less
@import (reference) "../variables.less";
@import (reference) "../mixins.less";

.btn {
  .flex-center();
  gap: @space-2;
  font-family: @font-family;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    transform 100ms ease;

  &:focus-visible {
    outline: 2px solid @color-primary;
    outline-offset: 2px;
  }

  &:active { transform: scale(0.98); }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  // Размеры
  &.btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: @font-size-sm;
    border-radius: @border-radius-sm;
  }

  &.btn-md {
    height: 40px;
    padding: 0 16px;
    font-size: @font-size-base;
    border-radius: @border-radius-md;
  }

  &.btn-lg {
    height: 48px;
    padding: 0 24px;
    font-size: @font-size-lg;
    border-radius: @border-radius-md;
  }

  // Варианты
  &.btn-primary {
    background: @color-primary;
    color: #fff;
    &:hover:not(:disabled) {
      background: @color-primary-dark;
    }
  }

  &.btn-ghost {
    background: transparent;
    color: @color-primary;
    border-color: @color-primary;
    &:hover:not(:disabled) {
      background: @color-primary-light;
    }
  }

  &.btn-danger {
    background: @color-danger;
    color: #fff;
    &:hover:not(:disabled) {
      background: darken(@color-danger, 10%);
    }
  }

  &.btn-full { width: 100%; }
}

Операции с цветами

LESS имеет встроенные функции для работы с цветами:

@base-color: #2563eb;

.palette-example {
  color: lighten(@base-color, 20%);          // Осветлить
  background: darken(@base-color, 10%);       // Затемнить
  border-color: saturate(@base-color, 20%);   // Насытить
  outline: desaturate(@base-color, 50%);      // Обесцветить
  box-shadow: fade(@base-color, 30%);         // Прозрачность
  fill: mix(@base-color, #ff0000, 70%);       // Смешать цвета
}

Вложенность и &-амперсанд

.card {
  background: @color-surface;
  border: 1px solid @color-border;
  border-radius: @border-radius-lg;
  padding: @space-6;
  transition: box-shadow 200ms ease;

  // Hover на сам элемент
  &:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }

  // Вложенные элементы
  &__header {
    margin-bottom: @space-4;
    padding-bottom: @space-4;
    border-bottom: 1px solid @color-border;
  }

  &__title {
    font-size: @font-size-xl;
    font-weight: 600;
    color: @color-text-primary;
  }

  &__body {
    font-size: @font-size-base;
    color: @color-text-secondary;
    line-height: @line-height-base;
  }

  // Модификатор
  &--featured {
    border-color: @color-primary;
    box-shadow: 0 0 0 1px @color-primary;
  }
}

LESS в контексте поддержки Ant Design v4

Ant Design 4.x использует LESS-переменные для кастомизации. Это основной кейс применения LESS в новых проектах:

// src/antd-custom.less
@primary-color: #2563eb;
@link-color: #2563eb;
@success-color: #16a34a;
@warning-color: #d97706;
@error-color: #dc2626;
@font-size-base: 14px;
@font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@border-radius-base: 8px;
@btn-border-radius-base: 8px;
@layout-body-background: #f9fafb;
@layout-header-background: #ffffff;
@layout-header-height: 64px;

// vite.config.ts с modifyVars для Ant Design 4
import { defineConfig } from 'vite';
import { theme } from './src/antd-custom';

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          '@primary-color': '#2563eb',
          '@border-radius-base': '8px',
        },
        javascriptEnabled: true, // Требуется для Ant Design
      },
    },
  },
});

Сроки

Настройка LESS-конфигурации и базовых переменных: 1–2 часа. Миграция с SCSS на LESS или наоборот: 0.5–1 день для среднего проекта. Вёрстка новой страницы: сопоставима с SCSS. LESS актуален прежде всего в legacy-проектах и при интеграции с Ant Design 4.