Организация проекта

Предыдущие уроки показывали возможности по одной. Здесь они собираются в структуру небольшого сайта-блога: переменные и миксины отдельно, компоненты в своих файлах, а один main.less только подключает остальные. Так устроены и большие проекты на Less, например исходники Bootstrap 3.

Дерево папок

styles/
├── variables.less       ← цвета, размеры, шрифты
├── mixins.less          ← миксины без вывода в CSS
├── theme.less           ← переопределения переменных
├── base.less            ← стили body, ссылок, заголовков
├── components/
│   ├── buttons.less
│   └── cards.less
├── utilities.less       ← служебные классы
└── main.less            ← только @import

Компилируется один файл: lessc styles/main.less css/main.css.

Переменные и миксины

Чтобы пример был коротким, в каждом файле по одному-два значения:

// styles/variables.less
@primary: #2563eb;
@radius: 8px;
@gap: 16px;

// styles/mixins.less
.card-shadow() {
  box-shadow: 0 2px 8px fade(#111827, 15%);
}

Тема

Благодаря ленивому вычислению переменную можно переопределить в отдельном файле, подключённом после variables.less. Новое значение подхватят все компоненты:

// styles/theme.less
@primary: #7c3aed;

Компоненты

Компоненты используют переменные и миксины, не импортируя их, — всё подключено в main.less:

// styles/components/buttons.less
.btn {
  padding: (@gap / 2) @gap;
  color: white;
  background: @primary;
  border-radius: @radius;
}

// styles/components/cards.less
.card {
  padding: @gap;
  border-radius: @radius;
  .card-shadow();
}

Базовые стили и служебные классы

Базовые стили задают вид элементов без классов, служебные — короткие классы на один случай:

// styles/base.less
body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

// styles/utilities.less
.text-center {
  text-align: center;
}

Главный файл

Порядок важен: сначала то, что ничего не выводит, затем базовые стили, компоненты и служебные классы — последние должны побеждать при равной специфичности:

// styles/main.less
@import "variables";
@import "theme";
@import "mixins";
@import "base";
@import "components/buttons";
@import "components/cards";
@import "utilities";

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}
.btn {
  padding: 8px 16px;
  color: white;
  background: #7c3aed;
  border-radius: 8px;
}
.card {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.15);
}
.text-center {
  text-align: center;
}

<style>
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
  }
  .btn {
    padding: 8px 16px;
    color: white;
    background: #7c3aed;
    border-radius: 8px;
  }
  .card {
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.15);
  }
  .text-center {
    text-align: center;
  }
</style>
 
<div class="card text-center">
  <p>Пост сохранён как черновик.</p>
  <button class="btn">Опубликовать</button>
</div>

Кнопка фиолетовая: значение из theme.less заменило #2563eb во всём проекте. Удалите строку @import "theme"; — кнопка снова станет синей.

Правила, которые упрощают жизнь

Частая ошибка

Если подключить theme.less до variables.less, тема перестанет работать: последним окажется исходное значение @primary: #2563eb, и при ленивом вычислении победит оно. Переопределения всегда подключайте после файла, который они меняют.