С помощью SCSS-миксина “Чувственное (адаптивное) свойство” можно чувствительно (в зависимости от ширины экрана) изменять значения того или иного CSS-свойства от начального значения, на определенной ширине экрана, до конечного значения на другой ширине экрана. Можно указывать произвольные промежутки ширины. Также существует несколько режимов поведения миксина вне указанных промежутков.
Миксин представлен в двух реализациях – clamp() и calc(). Сlamp работает быстрее, но если возникают проблемы с поддержкой браузеров, миксин автоматически переключится на calc().
Принудительно использовать calc() можно изменив код миксина в файле scss/base/mixins.scss
Использование миксина
Чтобы работать с миксином, нужно в SCSS селекторе вызвать снипет av :
Базовый режим работы миксина:
@include adaptiveValue("свойство", начальное значение, конечное значение);Где:
- Свойство – CSS-свойство, значение которого необходимо адаптировать. Можно указать любое свойство, значение которого указывается в цифрах.
- Начальное значение – стартовое значение свойства в пикселях, пишем число без px. Обычно указывается по макету.
- Конечное значение – финальное значение свойства в пикселях, пишем число без px. Значение, к которому мы хотим прийти на меньших ширинах экрана.
Примеры:
@include adaptiveValue("font-size", 50, 20);
@include adaptiveValue("padding-top", 80, 10);
...Алгоритм работы миксина
Миксин работает на основе значений переменных $minWidth , $maxWidth , $maxWidthContainer , $containerPadding и $containerWidth расположенных в блоке «Настройка адаптивной сетки» файла scss/style.scss
В итоге, по умолчанию, миксин будет работать следующим образом:
Если $maxWidthContainer больше нуля, то значения свойства будут изменяться в промежутке ширины от $containerWidth до $minWidth . То есть, по всей ширине ограничивающего контейнера.
При этом, если ширина экрана больше $containerWidth , то значение свойства будет равно начальному значению. Если ширина экрана меньше $minWidth , то значение свойства будет равно конечному значению .
Если $maxWidthContainer равно нулю, значения свойства будут изменяться в промежутке ширин от $maxWidth до $minWidth .
Дополнительные настройки и режимы работы
Режимы работы
Поведение миксина мы можем настроить, указав режим работы.
@include adaptiveValue("свойство", начальное значение, конечное значение, режим работы); Режим работы – может принимать числовые значения 0 / не указано , 1 , 2 или 3 :
- 0 / не указано – Если ширина экрана больше ширины от , то значение свойства равно начальному значению . Если ширина экрана меньше ширины до , то значение свойства будет равно конечному значению .
- 1 – Миксин будет работать только между минимальной и максимальной шириной экрана, или только в указанных промежутках , если они заданы (о промежутках смотри далее). При этих ширинах значения свойства будут по умолчанию или наследоваться от предков.
- 2 – Если ширина экрана больше ширины от , то значение свойства равно начальному значению . Если ширина экрана меньше ширины до , значение свойства будет по умолчанию или наследоваться от предков.
- 3 – Если ширина экрана больше ширины от , то значение свойства будет по умолчанию или наследоваться от предков. Если ширина экрана меньше ширины до , то значение свойства будет равно конечному значению .
Пример:
@include adaptiveValue("font-size", 50, 20, 1);Собственные промежутки
Миксин позволяет указать свой промежуток ширины, внутри которого будет адаптироваться значение свойства.
@include adaptiveValue("свойство", начальное значение, конечное значение, режим работы, ширина от, ширина до); - ширина от – стартовая ширина меньше которой начнется адаптация, пишем число без px.
- ширина до – конечная ширина к которой будет адаптироваться значение свойства, пишем число без px.
Внимание!
При указании промежутков необходимо обязательно указать режим работы
Пример:
@include adaptiveValue("font-size", 50, 20, 0, 800, 480);Также мы можем использовать несколько миксиновых вызовов с разными промежутками:
@include adaptiveValue("font-size", 50, 20, 2, 800, 480);
@include adaptiveValue("font-size", 20, 10, 3, 480);В примере произойдет следующее: в промежутке ширин экрана от 800px до 480px значение свойства font-size будет чутко адаптироваться от 50px до 20px, а в промежутке от 480px до 320px чутко адаптироваться от 20px до 10px. Шире 800px значение свойства будет 50px, уже 320px значение свойства будет 20px.
Внимание! Не используйте дополнительные медиа-запросы для работы с отзывчивым свойством.
Все, что нужно, можно настроить с помощью комбинаций количества адаптивных свойств, режимов и промежутков.
Расположение
Миксин adaptiveValue находится в файле scss/base/mixins.scss