Функция calc() — приведение типов в CSS

#css #css3

Хочу реализовать следующую задумку: в зависимости от ширины экрана генерировать цвет
в rgb(). В данный момент есть идея использовать для этого единицы измерения vw, но
не знаю как приводить эти единицы к пикселям, а потом получать из пикселей значения
без единиц измерения.
Как это можно реализовать на чистом CSS?



:root {
  --r: 100;
  --g: 150;
  --b: 200;
}
* {
  box-sizing: border-box;
}
.block {
  background-color: rgb(calc(var(--r) + 2vw), calc(var(--r) + 1vw), calc(var(--r)
+ 0.5vw));
  width: 100px;
  height: 100px;
  border: 1px solid;
  display: inline-block;
  padding: 20px;
  /* doesn't work */
}
.block2 {
  background-color: rgb(calc(var(--r) + 50), calc(var(--g) + 50), calc(var(--b) + 50));
}
calc() not OK
calc() OK



    

Ответы

Ответ 1

Путем чтения документации стало понятно, что приведение типов в функции calc() возможно,
но результат неизбежно приводится к каким-либо единицам измерения и получить просто
 из, например,  нельзя, а значит заполнить rgb() динамически исходя
из ширины экрана в vw-юнитах тоже нельзя.

Следующее предположение было генерировать цвет при помощи hsl(), ведь там в двух
значениях из трех используется тип , может можно как-то динамически получать
проценты? Нет, проблема осталась той же, потому что математические выражения внутри
calc() с типами  и  
вначале приводятся к  и результат обязательно будет в пикселях.


  the second and third arguments of the hsl() function can only be expressed as s.
Although calc() productions are allowed in their place, they can only combine percentages
with themselves, as in calc(10% + 20%).


То есть, использовать calc() внутри hsl() можно, но только если внутри неё будут
производиться операции с процентами, что никак не приближает нас к динамической генерации
цвета в зависимости от ширины экрана.


Ответ 2

Градиентный костыль: на больших экранах синий, а на маленьких - красный. Пример:
https://jsfiddle.net/ywzd1L70/1/



div {
  height: 3em;
  background: linear-gradient(to right, red -10000vw, blue calc(102400px - 10000vw));
}



Ответ 3

Идея в том, чтобы определять изменения ширины на CSS можно лишь через @media. Я завязался
только на популярные разрешения, но суть кажется ясна - на каждый пиксель создавать
свой правило и определять переменную. Это единственное возможное решение на CSS. Хотя
и бредовое:



:root {
--pix: 100;
}

@media (max-width: 1680px) {
:root {
    --pix: 110;
}
}

@media (max-width: 1280px) {
:root {
    --pix: 120;
}
}

@media (max-width: 1170px) {
:root {
    --pix: 130;
}
}

@media (max-width: 1024px) {
:root {
    --pix: 140;
}
}

@media (max-width: 960px) {
:root {
    --pix: 150;
}
}

@media (max-width: 800px) {
:root {
    --pix: 160;
}
}

@media (max-width: 720px) {
:root {
    --pix: 170;
}
}

@media (max-width: 640px) {
:root {
    --pix: 180;
}
}

@media (max-width: 480px) {
:root {
    --pix: 190;
}
}

@media (max-width: 320px) {
:root {
    --pix: 200;
}
}

:root {
--r: 100;
--g: 150;
--b: 200;
}

.block {
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
padding: 20px;
}

.block1 {
background: rgb(var(--pix), var(--pix), var(--pix));
}

.block2 {
background: rgb(var(--r), var(--g), var(--b));
}
calc() not OK
calc() OK