Адаптивное свойство одной строкой

Задача. Описать изменение значения 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;       }    } }  

Из очевидных минусов данного подхода выделю один — код становится менее читабельным, из плюсов — медиа-запросы остаются исключительно для описания логики адаптива, структурных изменений, а не засоряются «техническими» строками изменения размеров шрифтов, отступов, и т.д.

Всем удачи и успехов.