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