Задача. Описать изменение значения CSS-свойства как функцию от ширины вьюпорта без использования медиа-запросов. Результатом работы миксина должна быть единственная строка вида <свойство>: <функция от ширины вьюпорта >. В качестве входных данных имеются заданные (табулированные) точки (ширина вьюпорта, значение свойства). Поведение CSS-свойства от точки к точке аппроксимируется прямой линией.
В сети достаточно много разных способов решений для частных случаев (см., например, https://habr.com/ru/post/501392/). Здесь же предлагается общее решение задачи.
Например, нужно описать такое «мифическое» поведение свойства margin-left, как приведено на рисунке:
Как видно, имеется несколько диапазонов, где значение может то линейно увеличиваться, то уменьшаться, то изменяться скачкообразно или оставаться постоянным. Для описания такого сложного поведения вызывается SCSS-миксин (код приведен ниже) такой строкой:
@include adaptiveValueModified("margin-left", 320, 5, 575, 10, 576, -10, 767, -10, 768, 20, 992, 40,
1199, 30, 1200, 50, 1920, 60);а в файле стилей «на выходе» будет всего одна (хоть и длинная) строка:
margin-left: calc(min(0.625rem, -0.07966rem + 1.96078vw)
+ clamp(-0.625rem, 719.375rem + -2000vw, 0.625rem)
+ clamp(-0.625rem, -1438.75rem + 3000vw, 1.25rem)
+ clamp(1.25rem, -3.03571rem + 8.92857vw, 2.5rem)
+ clamp(1.875rem, 5.49517rem + -4.83092vw, 2.5rem)
+ clamp(1.875rem, -1496.875rem + 2000vw, 3.125rem)
+ max(3.125rem, 2.08333rem + 1.38889vw) - 8.75rem);Очевидно, что чем сложнее (больше диапазонов) поведение свойства, тем длиннее будет и функция-результат, и наоборот.
Ограничения. Таким образом (на данный момент) можно адаптировать только те свойства, значения которых задаются в единицах длины. Приведенная реализация миксина «принимает» на входе значения, заданные в пикселях (без указания “px”), а результат выводит в относительных единицах rem.
Ниже приведен код миксина и вспомогательных функций.
// Вспомогательная функция для миксина adaptiveValueModified
@function defineLineParameters($breakPoints, $i) {
// Определяет параметры линии, заданной парой точек {x1, y1} и {x2, y2}
// Точки берутся из списка $breakPoints, который имеет вид (x1, y1, x2, y2, ..., xN, yN)
// Индекс $i задает выбор начальной точки - $x1
// Результат - список параметров (наклон, точка пересечения оси Y, формула прямой)
$x1: nth($breakPoints, 2 * $i - 1);
$x2: nth($breakPoints, 2 * $i + 1);
$y1: nth($breakPoints, 2 * $i);
$y2: nth($breakPoints, 2 * ($i + 1));
$slope: ($y2 - $y1) / ($x2 - $x1);
$yIntersection: -($x1 * $slope) + $y1;
$flyValue: 0; // Оптимизация $flyValue - избавление от члена вида 0 * vw
@if ($slope == 0) {
$flyValue: #{rem($yIntersection)};
} @else {
@if ($yIntersection != 0) {
$flyValue: #{rem($yIntersection)} + #{$slope * 100}vw;
} @else {
$flyValue: #{$slope * 100}vw;
}
}
$lineParameters: ();
$lineParameters: append($lineParameters, $slope);
$lineParameters: append($lineParameters, $yIntersection);
$lineParameters: append($lineParameters, $flyValue);
@return $lineParameters;
}
@function rem($px) {
$result: $px / 16 + rem;
@return $result;
}
// Миксин, основной блок
@mixin adaptiveValueModified($property, $breakPoints...) {
// Миксин, который воспроизводит произвольное заданное пользователем поведение (изменение) значения свойства.
//
// Поведение задается (табулируется) контрольными точками ($breakpoints).
// Вывод в CSS -- в относительных единицах rem.
//
// Параметры:
// $property - свойство, которое нужно адаптировать ("font-size", "margin-top", "padding", ...)
//
// $breakPoints -- список точек определяющих поведение свойства $property в формате
// $значениеШириныВьюпорта1, $значениеСвойства1, ..., $значениеШириныВьюпортаN, $значениеСвойстваN.
// Величины задаются в пикселях без указания единицы измерения.
// $значениеШириныВьюпорта задаются строго в возрастающем порядке (положительные числа),
// равных значений быть не должно:
// $значениеШириныВьюпорта1 < $значениеШириныВьюпорта2 < ... < $значениеШириныВьюпортаN
// Ограничений на $значениеСвойства нет -- любое положительное или отрицательное число, и ноль.
//
// Примеры:
// adaptiveValueModified("font-size", 320, 20, 900, 30, 1600, 40) --
// на 320px значение "font-size" равно 20px, на 900px - увеличивается до 30px, на 1600px - до 40px,
// больше 1600px - продолжает расти (как и на участке от 900 до 1600px), меньше 320px -- продолжает падать
// (как и на участке от 900 до 320px).
//
// adaptiveValueModified("margin-top", 320, 5, 991, 5, 992, 20, 1600, 40, 1700, 40) --
// на 320px значение "margin-top" равно 5px, до 991px - остается равным 5px, при 992px - скачкообразно возрастает
// до 20px, на 1600px - увеличивается до 40px, больше 1600px - остается постоянным и равно 40px.
//
// Если ширина вьюпорта меньше, чем $значениеШириныВьюпорта1, то поведение свойства аппроксимируется
// линией с отрезка [$значениеШириныВьюпорта1, $значениеШириныВьюпорта2]; если больше, чем $значениеШириныВьюпортаN,
// то линией с отрезка [$значениеШириныВьюпорта(N-1), $значениеШириныВьюпортаN].
$breakPointsLength: length($breakPoints); // Длина аргумента $breakPoints (должна быть парным числом)
$breakPointsPair: $breakPointsLength / 2; // Количество точек, задающих поведение свойства $property
$breakPointsEven: $breakPointsPair - round($breakPointsPair);
@if ($breakPointsEven != 0) {
// Проверка на парность длины аргумента $breakPoints
@error "Список параметров слишком краток -- возможно задано непарное количество точек.";
}
@if ($breakPointsLength < 4) {
// Проверяем, чтоб имелось минимальное количество аргументов при вызове миксина. Если нет --
// выводим ошибку
@error "Список параметров слишком краток, не хватает точек для определения поведения свойства!";
} @else {
@if ($breakPointsPair == 2) {
// Если заданы только две пары точек - моментальный вывод в CSS
$slope: (nth($breakPoints, 4) - nth($breakPoints, 2)) / (nth($breakPoints, 3) - nth($breakPoints, 1));
$yIntersection: -(nth($breakPoints, 1) * $slope) + nth($breakPoints, 2);
$flyValue: #{rem($yIntersection)} + #{$slope * 100}vw;
$propertyValue: "";
@if ($slope == 0) {
$propertyValue: rem($yIntersection);
} @else {
@if ($yIntersection == 0) {
$propertyValue: #{$slope * 100}vw;
} @else {
$propertyValue: #{"calc(" + $flyValue + ")"};
}
}
#{$property}: $propertyValue;
} @else if ($breakPointsPair == 3) {
// Если заданы только три пары точек - оптимизируем результат, вывод в CSS
$slopeList: ();
$flyValueList: ();
@for $i from 1 through 2 {
$lineParameters: defineLineParameters($breakPoints, $i);
$slope: nth($lineParameters, 1);
$yIntersectionList: nth($lineParameters, 2);
$flyValue: nth($lineParameters, 3);
$slopeList: append($slopeList, $slope);
$flyValueList: append($flyValueList, $flyValue);
}
$propertyValue: #{nth($flyValueList, 1)};
@if (nth($slopeList, 2) > nth($slopeList, 1)) {
$propertyValue: #{"max(" + $propertyValue + ", " + nth($flyValueList, 2) + ")"};
} @else {
$propertyValue: #{"min(" + $propertyValue + ", " + nth($flyValueList, 2) + ")"};
}
#{$property}: $propertyValue;
} @else {
// Количество пар данных больше трех
// Вычисление константы
$cumul: 0;
@for $i from 2 through ($breakPointsPair - 1) {
$cumul: $cumul + nth($breakPoints, 2 * $i);
}
// Основной блок
$propertyValue: "";
$propertyValueList: ();
@for $i from 1 through ($breakPointsPair - 1) {
$lineParameters: defineLineParameters($breakPoints, $i);
$y1: nth($breakPoints, 2 * $i);
$y2: nth($breakPoints, 2 * ($i + 1));
$slope: nth($lineParameters, 1);
$yIntersection: nth($lineParameters, 2);
$flyValue: nth($lineParameters, 3);
@if ($slope == 0) {
// Значение свойства НЕ изменяется на участке $x1, $x2
$cumul: $cumul - $yIntersection;
} @else {
// Значение свойства изменяется на участке $x1, $x2
@if ($i == 1) {
// Обработка первой записи в результат
@if ($slope > 0) {
$propertyValue: #{"min(" + rem($y2) + ", " + $flyValue + ")"};
} @else {
$propertyValue: #{"max(" + rem($y2) + ", " + $flyValue + ")"};
}
$propertyValueList: append($propertyValueList, $propertyValue);
} @else if ($i == ($breakPointsPair - 1)) {
// Обработка последней записи в результат
@if ($slope > 0) {
$propertyValue: #{"max(" + rem($y1) + ", " + $flyValue + ")"};
} @else {
$propertyValue: #{"min(" + rem($y1) + ", " + $flyValue + ")"};
}
$propertyValueList: append($propertyValueList, $propertyValue);
} @else {
// Последующие записи в результат
$propertyValue: #{"clamp(" + rem(min($y1, $y2)) + ", " + $flyValue + ", " + rem(max($y1, $y2)) + ")"};
$propertyValueList: append($propertyValueList, $propertyValue);
}
}
}
// Формирование результата работы
$propertyValue: nth($propertyValueList, 1);
@if (length($propertyValueList) != 1) {
@for $i from 2 through length($propertyValueList) {
$propertyValue: #{$propertyValue + " + " + nth($propertyValueList, $i)};
}
}
@if ($cumul > 0) {
$propertyValue: #{"calc(" + $propertyValue + " - " + rem(max($cumul, -$cumul)) + ")"};
} @else if($cumul < 0) {
$propertyValue: #{"calc(" + $propertyValue + " + " + rem(max($cumul, -$cumul)) + ")"};
}
#{$property}: $propertyValue;
}
}
}
Из очевидных минусов данного подхода выделю один - код становится менее читабельным, из плюсов - медиа-запросы остаются исключительно для описания логики адаптива, структурных изменений, а не засоряются "техническими" строками изменения размеров шрифтов, отступов, и т.д.
Всем удачи и успехов.