Вложенность переменных и частичные файлы
Используйте переменные Sass для повторно используемых значений, вкладывайте селекторы для удобства чтения и разделяйте код на частичные файлы.
«Вложенность переменных и частичные файлы» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое Sass
Sass (Syntactically Awesome Stylesheets) — это препроцессор CSS, расширяющий CSS переменными, вложенностью, примесями, функциями и другими возможностями. Файлы Sass компилируются в стандартный CSS.
Два синтаксиса Sass
У Sass есть два формата файлов:
.scss— совместимый с CSS надмножественный синтаксис (самый популярный).sass— синтаксис на основе отступов (без фигурных скобок и точек с запятой)
В этом курсе рассматривается SCSS.
Переменные Sass
В переменных Sass используется префикс $. Они вычисляются во время компиляции — в отличие от пользовательских свойств CSS, они не остаются динамическими в браузере.
<button class="button">Sass Variables</button>
Переменные Sass и пользовательские свойства CSS
Основные различия:
- Переменные Sass: вычисляются во время компиляции, отсутствуют в браузере, не могут изменяться во время выполнения
- Пользовательские свойства CSS: остаются динамическими в браузере, могут изменяться с помощью JS и участвуют в каскаде
Современная практика: используйте оба варианта. Переменные Sass — для логики на этапе сборки, а пользовательские свойства CSS — для настройки темы во время выполнения.
Вложенность
Sass позволяет вкладывать селекторы друг в друга, отражая структуру HTML. В скомпилированном результате используются селекторы потомков.
<div class="card">
<div class="card-title">Card title</div>
<div class="card-body">Card body text</div>
</div>
Родительский селектор &
& обозначает родительский селектор и позволяет создавать шаблоны, похожие на BEM, а также селекторы состояний:
<button class="button">Button</button>
<button class="button active">Active state (font-weight: bold)</button>
<button class="button--primary">BEM modifier: button--primary</button>
<span class="button__icon">🔗</span> BEM element: button__icon
Предупреждение о глубине вложенности
Избегайте вложенности глубже трёх уровней. Глубокая вложенность создаёт селекторы с избыточной специфичностью и делает CSS хрупким. Если вам приходится глубоко вкладывать правила, вероятно, архитектуру CSS нужно переработать.
Частичные файлы Sass
Частичный файл — это файл Sass, имя которого начинается с символа подчёркивания (_card.scss). Частичные файлы не компилируются независимо — их необходимо импортировать в другой файл. Это позволяет не создавать ненужные выходные файлы CSS.
@use для импорта
В современном Sass для импорта частичных файлов используется @use. Эта директива предоставляет пространства имён и предотвращает конфликты переменных:
<h2 class="heading">Namespaced heading (t.$primary-color)</h2>
@forward для библиотек
@forward повторно экспортирует элементы модуля, чтобы их могли использовать файлы, импортирующие вашу библиотеку:
<span class="badge">Forwarded token (lib.$primary-color)</span>
Устаревший @import
Старая директива @import объявлена устаревшей в Dart Sass. Перейдите на @use и @forward, чтобы улучшить работу с пространствами имён и производительность.
Быстрая проверка
Какой селектор CSS создаёт Sass при вложении .nav { .link { color: white; } }?
Итоги
Переменные Sass ($name) вычисляются во время компиляции. Вложенность отражает структуру HTML, но не следует углубляться более чем на 3 уровня. & ссылается на родительский селектор для псевдоклассов, состояний и модификаторов BEM. Частичные файлы (_file.scss) импортируются, а не компилируются напрямую. Для загрузки модулей в современном Sass используйте @use, а не @import.
Часто задаваемые вопросы
Урок «Вложенность переменных и частичные файлы» бесплатный?
Да — полный текст урока «Вложенность переменных и частичные файлы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Вложенность переменных и частичные файлы»?
Используйте переменные Sass для повторно используемых значений, вкладывайте селекторы для удобства чтения и разделяйте код на частичные файлы. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Вложенность переменных и частичные файлы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Вложенность переменных и частичные файлы
- Миксины и включения
- Расширение и селекторы-заполнители
- Функции Sass и поток управления