программа, которая имеет свой собственный синтаксис, но может сгенерировать CSS-код перед его использованием в браузере.

Использование CSS-препроцессоров позволяет упростить процесс написания CSS-кода, улучшить его читаемость и уменьшить количество повторяющегося кода. Кроме того, препроцессоры предоставляют возможность работать с переменными, вложенными правилами и другими функциями, которые упрощают разработку стилей.

LESS

CSS-препроцессор, позволяющий расширять возможности CSS с помощью переменных, миксинов, операций с числами и других функций

Был создан в 2009 году и стал одним из самых популярных CSS-препроцессоров. LESS имеет простой и понятный синтаксис, схожий с синтаксисом CSS, но с некоторыми отличиями.

Необходимо создать файл с расширением .less

Getting started | Less.js

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;

  div {
    color: bisque;
  }
}

Особенности:

• Переменные обозначаются @;

• Присваивание переменной выполняется с помощью двоеточия (:);

• Пример миксинов:

  .bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
  }
  
  .post a {
    color: red;
    .bordered();
  }
  

• Импорт работает практически так, как ожидалось. Расширение необязательно указывается для файлов .less.

Преимущества:

• Более простой и понятный синтаксис;
• Позволяет использовать JavaScript в CSS, что может быть полезно для некоторых задач, например, для анимации;
• LESS-файлы, как правило, меньше по размеру.

SASS

мощный препроцессор CSS, позволяющий расширять возможности этого языка и делать код более структурированным и читаемым

Был создан в 2007 году. SASS обладает рядом дополнительных возможностей по сравнению с LESS, которые выходят за рамки стандартного CSS, позволяя автоматизировать некоторые процессы и ускоряя разработку сайта.

SASS также имеет два основных синтаксиса:

• классический SASS, который считается устаревшим, но все еще используется многими разработчиками;
• SCSS, который имеет более привычный для CSS синтаксис и требует использования фигурных скобок.

Необходимо создать файл с расширением .sass (.scss)

<aside> ⚠️ Sass имеет два синтаксиса! Чаще всего используется синтаксис SCSS (.scss). Это надмножество CSS, что означает, что все допустимые CSS также являются допустимыми SCSS. Синтаксис с отступом (.sass) более необычен: он использует отступ, а не фигурные скобки для вложения инструкций, и новые строки вместо точек с запятой для их разделения.

</aside>