fix: add block-inline tags

docs/html-css/07-preprocessors.md

@@ -0,0 +1,76 @@
+---
+sidebar_position: 7
+---
+
+# Препроцессоры
+
+**Препроцессоры CSS** — это инструменты, которые расширяют возможности стандартного CSS, добавляя такие функции, как переменные, вложенность, миксины, функции и многое другое. Они позволяют писать более структурированный, поддерживаемый и удобный код, который затем компилируется в стандартный CSS. Если вы работаете над большим проектом, использование препроцессора может сэкономить время и усилия. Наиболее популярные препроцессоры: **Sass**, **Less** и **Stylus**.
+
+## Зачем использовать препроцессоры?
+1. **Переменные:**
+   - Позволяют хранить значения (например, цвета, размеры шрифтов) для повторного использования.
+   - Упрощают поддержку и изменение стилей.
+2. **Вложенность:**
+   - Позволяют вкладывать селекторы, что делает код более читаемым и структурированным.
+3. **Миксины (Mixins):**
+   - Позволяют создавать переиспользуемые блоки кода с параметрами.
+4. **Функции:**
+   - Позволяют выполнять вычисления и возвращать значения.
+5. **Импорт:**
+   - Позволяют разбивать код на несколько файлов и подключать их в основной файл.
+6. **Наследование:**
+   - Позволяют наследовать стили от одного селектора другому.
+7. **Операции:**
+   - Позволяют выполнять математические операции с числами, цветами и другими значениями.
+
+## Популярные препроцессоры
+
+1. **Sass** (Syntactically Awesome Style Sheets)
+   - Самый популярный препроцессор.
+   - Поддерживает два синтаксиса:
+     - **SCSS** (Sassy CSS) — синтаксис, похожий на стандартный CSS.
+     - **Sass** — более лаконичный синтаксис без фигурных скобок и точек с запятой.
+   - Возможности:
+     - Переменные.
+     - Вложенность.
+     - Миксины.
+     - Наследование.
+     - Функции.
+     - Логические операторы и циклы.
+2. **Less**
+   - Похож на Sass, но использует синтаксис, более близкий к стандартному CSS.
+   - Легко интегрируется с JavaScript.
+   - Возможности:
+     - Переменные.
+     - Вложенность.
+     - Миксины.
+     - Функции.
+     - Операции.
+3. **Stylus**
+   - Более гибкий синтаксис, который позволяет писать код без фигурных скобок, точек с запятой и даже двоеточий.
+   - Возможности:
+     - Переменные.
+     - Вложенность.
+     - Миксины.
+     - Функции.
+     - Логические операторы и циклы.
+
+## Преимущества препроцессоров
+1. **Удобство:**
+   - Код становится более читаемым и структурированным.
+2. **Повторное использование:**
+   - Переменные, миксины и функции позволяют избежать дублирования кода.
+3. **Поддержка:**
+   - Упрощают поддержку и обновление стилей.
+4. **Расширяемость:**
+   - Добавляют мощные функции, недоступные в стандартном CSS.
+
+## Недостатки препроцессоров
+1. **Компиляция:**
+   - Требуется дополнительный шаг компиляции.
+2. **Кривая обучения:**
+   - Необходимо изучить новый синтаксис и возможности.
+3. **Сложность отладки:**
+   - Скомпилированный CSS может быть сложнее отлаживать.
+
+🚀 **_Источник: DeepSeek_**