Оглавление
Sass
Препроцессор CSS: переменные, вложенность, миксины, функции и модули.
1.Начало работы
- Что такое SassЧто такое препроцессор CSS, зачем Sass нужен рядом с современным CSS и чем SCSS отличается от синтаксиса с отступами.
- Установка и компиляцияКак установить Dart Sass через npm, скомпилировать файл командой sass, следить за изменениями и пользоваться картами исходников.
- Sass и ViteКак использовать SCSS в проекте на Vite: установка компилятора, импорт файла .scss и сборка для публикации.
2.Основы языка
- ПеременныеПеременные Sass со знаком $, их область видимости и отличие от пользовательских свойств CSS.
- Вложенность и селектор &Вложенные правила в Sass, родительский селектор & для состояний, модификаторов и суффиксов БЭМ, вложенные медиазапросы и отличие от встроенной вложенности CSS.
- Операторы и математикаАрифметика в Sass, единицы измерения, деление через math.div, округление и другие функции модуля sass:math и когда вместо них нужен calc().
3.Файлы и модули
- Частичные файлы и структураРазделение стилей на частичные файлы с подчёркиванием, сборка их в один CSS-файл и упрощённая структура папок 7-1.
- @use и пространства имёнКак @use загружает модуль, пространства имён и псевдонимы, приватные члены и настройка модуля через !default и with.
- @forward и индексные файлыКак @forward передаёт члены нескольких файлов через один модуль, как _index.scss позволяет подключить целую папку и как ограничить передаваемые члены.
4.Повторное использование
- МиксиныПовторно используемые группы объявлений через @mixin и @include, аргументы, значения по умолчанию и именованные аргументы.
- Блоки содержимого: @contentПередача целого блока стилей в миксин через @content на примере миксина точек перелома.
- @extend и заполнителиОбщие стили для нескольких селекторов через @extend, селекторы-заполнители со знаком % и почему с @extend нужна осторожность.
- ФункцииСобственные функции Sass через @function и @return, аргументы со значениями по умолчанию и отличие функции от миксина.
5.Встроенные модули
- Модуль sass:colorСветлые, тёмные и прозрачные оттенки цвета через color.adjust, color.scale, color.change и color.mix.
- Модули sass:string и sass:listРабота со строками и списками в Sass: кавычки, длина, срезы, элементы списка, добавление и объединение списков.
- Карты и модуль sass:mapИменованные значения в картах Sass, чтение через map.get, проверка ключей, слияние карт и миксин точек перелома на основе карты.
6.Условия и циклы
- Условия: @if и @elseВыбор стилей при компиляции через @if, @else if и @else, операторы сравнения и логические операторы и что Sass считает истиной.
- Циклы: @each и @forГенерация служебных классов циклом @each по спискам и картам, счёт циклом @for и вставка значений в селекторы через интерполяцию.
- @debug, @warn и @errorВывод значений при компиляции через @debug, предупреждения о сомнительных аргументах через @warn и остановка сборки с понятным сообщением через @error.
7.Sass в проекте
- Дизайн-токены в картахЦвета, отступы и скругления сайта как дизайн-токены в картах Sass, чтение их через небольшие функции и генерация классов из них.
- Структура настоящего проектаВсё вместе: папки, индексные файлы, порядок @use в main.scss и правила, с которыми проект на Sass легко поддерживать.
- Sass и пользовательские свойства для темКарты Sass вместе с пользовательскими свойствами CSS: генерация переменных темы циклом и переключение светлой и тёмной темы в браузере.
- Переход с @import на @useПочему @import в Sass устарел, чем старый код отличается от системы модулей и как перевести проект инструментом sass-migrator.
- Сборка для публикации и частые ошибкиКомпиляция сжатого CSS для публикации, скрипты npm для разработки и сборки и список самых частых ошибок в Sass.