Псевдоклассы и псевдоэлементы
Для создания эффектов при наведении на элемент, например, ссылку, используются псевдоклассы. Рассмотрим пример изменения цвета ссылки при наведении. Можно напрямую прописать стиль внутри элемента <a>:
a:hover {
color: red;
}
Предпочтительнее использовать псевдоклассы внутри самого элемента:
a {
&:hover {
color: red;
}
}
Символ & указывает на родительский элемент, в данном случае — <a>. Это улучшает читаемость и структуру кода. Все псевдоклассы и псевдоэлементы (например, :before, :after, :first-line, :focus) прописываются через амперсанд (&).
Миксины
Создадим миксин link, принимающий параметры цвета ссылки в разных состояниях:
@mixin link($default, $hover, $active, $visited) {
color: $default;
&:hover {
color: $hover;
}
&:active {
color: $active;
}
&:visited {
color: $visited;
}
}
Использование миксина для стилизации ссылки:
a {
@include link(black, red, blue, green);
}
Передаются цвета в формате слов, но возможны другие форматы, например, RGB или переменные. Миксины могут содержать не только стили. Пример:
@mixin link-block {
a {
// стили для ссылок внутри блока
}
}
Вызов:
@include link-block;
Это удобно для создания блоков со ссылками, избегая повторения кода.
Импорт файлов
SASS позволяет разделить большой файл на несколько меньших для лучшей организации проекта. Создадим файлы variables.scss для переменных и mixins.scss для миксинов.
Переместим переменные и миксины из основного файла style.scss в новые файлы. В настройках компилятора SASS отключим автоматическую компиляцию для variables.scss и mixins.scss. В style.scss импортируем эти файлы:
@import "variables";
@import "mixins";
style.scss содержит основной код, а переменные и миксины хранятся в отдельных файлах, что улучшает читаемость и поддержку проекта. Изменения в импортированных файлах автоматически обновляются в главном файле style.scss при компиляции.
Использование псевдоклассов, псевдоэлементов и импорта файлов в SASS улучшает структуру и поддерживаемость проекта, делая код чище и понятнее. Это позволяет эффективно управлять стилями и упрощает разработку.