Переменные CSS - мощное средство, вы можете это знать. Вы можете использовать его для простых задач, чтобы легко хранить глобальные переменные, такие как цвета или шрифты, или включить темный режим на своем веб-сайте, просто переключив простой класс на своем теле 🤯.
После многих лет использования переменных CSS я все еще поражаюсь их мощи, и я хочу показать это вам, давайте перейдем к написанию кода с его помощью.
К сожалению, в CSS долгое время не было поддержки переменных, поэтому многие использовали препроцессоры CSS, чтобы иметь переменные, но это не настоящие переменные! Вы можете изменить их только перед компиляцией, а не во время выполнения.
Итак, давайте погрузимся в мощь переменных времени выполнения 🙌
Какая классика! Настенные часы 😅
Что, если бы я сказал вам, что это единственный JS, который вам нужен:
Я использовал препроцессор HTML, PUG, чтобы быстро создать HTML, обратите внимание на использование переменной индекса, она будет полезна в следующих шагах.
Первый этап завершен, так просто, что здесь особо нечего сказать, просто настраиваем HTML и переменные часы / минуты / секунды, давайте перейдем к CSS 🎯
Здесь начинается самое интересное, мы начинаем с часов / минут / секунд равными нулю, я устанавливаю переменную размера, которая использует функцию CSS min, поэтому часы всегда будут соответствовать экрану, потому что это size - минимальное значение между 24rem, 75vh 75% высоты области просмотра и 75vw 75% ширины области просмотра.
Кроме того, размер шрифта зависит от переменной размера, что позволяет мне позже использовать размеры em, чтобы часы всегда сохраняли свои пропорции 👌
Добавив немного CSS, мы получим фрейм часов.
Теперь нам нужно разместить часовые метки на часах, давайте воспользуемся --index.
Главный li будет иметь начало в центре часов и вращение переменной --rotation, таким образом, вместо того, чтобы всегда устанавливать преобразование для каждого дочернего элемента, мы просто устанавливаем переменную 🤷♂️
Часы имеют 12 секций, поэтому 360/12 = 30 градусов, каждый маркер будет расположен на index * 30deg. И мы закончили с маркерами.
Теперь о указателях. Мы будем использовать ту же логику, что и основной li для обработки переменной поворота. Часы будут умножены на 30 градусов, 360/12 = 30, минуты и секунды будут умножены на 6 градусов, 360/60 = 6.
И мы закончили, это основная идея использования переменных CSS для создания настенных часов, избегая использования Javascript, делегируя все стили CSS.
Код находится на https://codepen.io/promatik/pen/gOLWzKK.
Посмотри и возьми переменные 🙌
Это была моя первая статья, дайте мне знать, если вас интересуют другие статьи, похожие на эту, просто оставьте несколько аплодисментов 👏 ниже, и я буду публиковать новые материалы.
