Математические операции в SASS
Математические операции в SASS заключаются в круглые скобки. Например, можно добавлять и вычитать проценты: width: calc(100% + 30%); или width: calc(100% — 10%);. Результат вычисления отображается в инспекторе элементов браузера.
Нельзя смешивать единицы измерения в одном математическом выражении. Например, width: calc(100% — 10px); вызовет ошибку. Используйте одинаковые единицы измерения (проценты или пиксели).
Разделим ширину элемента на 4: width: calc(100% / 4);. Результат — ширина 25%.
Grid сетка с использованием математических операций
Создадим grid сетку из восьми блоков, используя математические операции для определения ширины каждого блока с учётом отступов. В HTML создадим родительский блок grid и восемь дочерних блоков div.
В файле styles.css напишем стили. Для родительского блока grid установим display: grid; и width: 100%;. Для дочерних блоков div установим float: left;. Используем селектор > div для выбора дочерних элементов внутри grid.
Создадим миксин grid, принимающий два параметра: количество колонок ($cols) и отступ между колонками ($margin). Миксин установит стили для блоков: float: left;, background-color: red;, height: 150px;.
Для правильного отображения отступов, воспользуемся псевдоклассом :not(:nth-child(-n + $cols)) для выбора всех элементов, кроме последнего в ряду. У последнего элемента margin-right будет равен 0. Используем шаблонную строку #{$cols}n.
Ширина каждого блока вычисляется по формуле:
width: calc((100% - (($cols - 1) * $margin)) / $cols);Формула вычисляет ширину с учетом отступов. Сначала вычитаем общую ширину отступов (($cols — 1) * $margin), затем делим оставшуюся ширину на количество блоков ($cols).
Подключив миксин @include grid(4, 2%); (4 колонки, отступ 2%), получим grid сетку с четырьмя блоками в ряду и отступом 2% между ними. Число колонок и отступ легко изменять, переопределяя параметры миксина.
Встроенные функции SASS
SASS предоставляет множество встроенных функций. Список функций см. в документации. Рассмотрим некоторые из них.
Функция darken($color, $amount) затемняет цвет на указанный процент. Функция lighten($color, $amount) делает цвет светлее.
В примере, для стилизации ссылки при наведении, используем функцию darken(). Указываем цвет ссылки и процент затемнения. Для демонстрации избегайте черного цвета, так как затемнение будет незаметно.
Функция round($number) округляет число до ближайшего целого в меньшую сторону. Существуют и другие функции для работы с числами и строками. Документация по каждой функции доступна в соответствующей справке.