Переход с Less на Sass или CSS

Многие проекты, начатые на Less, со временем переходят на Sass или на обычный CSS: у Sass больше пользователей и библиотек, а современный CSS сам умеет переменные и вложенность. Миграция — это перевод стилей на новый инструмент без изменения того, как выглядит сайт. Главная проверка: скомпилированный CSS до и после должен совпадать.

Соответствие Less и Sass

Less	Sass (SCSS)
`@primary: #2563eb;`	`$primary: #2563eb;`
`.button-variant(@bg) { }`	`@mixin button-variant($bg) { }`
`.button-variant(#2563eb);`	`@include button-variant(#2563eb);`
`when (@a > 0)`	`@if $a > 0 { }`
`.btn-primary:extend(.btn) { }`	`@extend .btn;` внутри правила
`(@gap / 2)`	`math.div($gap, 2)`
`.@{prefix}-btn`	`.#{$prefix}-btn`
`@media @phone` с `~"..."`	`@media #{$phone}`
`fade(@c, 50%)`	`rgba($c, 0.5)`
`each(@list, { })`	`@each $item in $list { }`
`@import "buttons";`	`@use "buttons";`

Пример перевода

Файл кнопки на Less:

// styles/components/buttons.less
@primary: #2563eb;
 
.button-variant(@bg; @color: white) {
  color: @color;
  background: @bg;
}
 
.btn-primary {
  padding: (16px / 2) 16px;
  .button-variant(@primary);
 
  &:hover {
    background: darken(@primary, 10%);
  }
}

.btn-primary {
  padding: 8px 16px;
  color: white;
  background: #2563eb;
}
.btn-primary:hover {
  background: #134cca;
}

Тот же файл на Sass:

// styles/components/_buttons.scss
@use "sass:color";
@use "sass:math";
 
$primary: #2563eb;
 
@mixin button-variant($bg, $color: white) {
  color: $color;
  background: $bg;
}
 
.btn-primary {
  padding: math.div(16px, 2) 16px;
  @include button-variant($primary);
 
  &:hover {
    background: color.adjust($primary, $lightness: -10%);
  }
}

Скомпилируйте обе версии и сравните CSS. Отступы и основной цвет совпадут. darken() и color.adjust() уменьшают светлоту одинаково, но Sass записывает результат как rgb() с дробными процентами, а Less — как #134cca. Чтобы сравнение было точным, на время перехода вынесите готовое значение в переменную: $primary-hover: #134cca;.

Переход на обычный CSS

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

/* css/buttons.css */
:root {
  --primary: #2563eb;
  --primary-hover: #134cca;
}
 
.btn-primary {
  padding: 8px 16px;
  color: white;
  background: var(--primary);
 
  &:hover {
    background: var(--primary-hover);
  }
}

Значение #134cca взято из скомпилированного CSS выше: так переход не меняет ни одного цвета на сайте.

Порядок работы

Скомпилируйте текущий Less и сохраните результат как эталон.
Переводите по одному файлу: сначала переменные и миксины, потом компоненты.
После каждого файла собирайте новый CSS и сравнивайте с эталоном командой diff или в редакторе.
Удалите Less и пакет less, когда расхождений не осталось.

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

Замена всех @ на $ поиском по файлам ломает директивы CSS: получаются $media, $import и $font-face. Меняйте только переменные — например, регулярным выражением, которое пропускает @media, @import, @font-face, @keyframes и @supports, — и проверяйте результат компиляцией.