Всем привет! Я приступила к изучению нового материала и мне есть чем поделиться. Недавно я освоила препроцессор SASS на диалекте SCSS и, как говорила ранее, готовилась к написанию проекта стримингового приложения. Во время подготовки файловой структуры и создания общих файлов для проекта, в файле, содержащем Sass-функции для дальнейшего использования в коде, была определена следующая логика: // functions.scss @use 'constants' as ; @use 'sass:math'; @function fluid($max, $min, $isEndOfLaptop: false) { $maxViewportWidth: $container-desktop-width; $minViewportWidth: 390; @if($isEndOfLaptop) { $minViewportWidth: $container-laptop-width; } $maxSize: math.div($max, 16); $minSize: math.div($min, 16); $maxWidth: math.div($maxViewportWidth, 16); $minWidth: math.div($minViewportWidth, 16); $slope: math.div(($maxSize - $minSize), ($maxWidth - $minWidth)); $yAxisIntersections: -$minWidth $slope + $minSize; @return clamp( #{$minSize 1rem}, #{$yAxisIntersections 1rem} + #{$slope 100vw}, #{$maxSize 1rem} ); } @function fluid-to-laptop($max, $min) { @return fluid($max, $min, true) } Функция fluid позволяет плавно изменять значения в зависимости от текущей ширины вьюпорта. Насколько я знаю, эта идея принадлежит фронтенд-разработчику Brecht De Ruyte, и была адаптирована под данный проект. Сначала мне этот набор показался сложным и запутанным, поэтому я решила разобраться в нём подробнее. С моими размышлениями на эту тему можно ознакомиться в комментарии, который я оставила на платформе. К сожалению, без ссылки, так как курс платный и чтобы просмотреть, нужно сначала его купить 😅 Захотелось поделиться чем-то полезным и интересным. Если качество изображений будет недостаточным, могу продублировать текст лично! Всем хорошего дня 🤍