sass - Change color on window resize with css

[ad_1]

I use the following formula for fluid fonts:

font-size: calc(30px + (60-30)*(100vw - 400px)/(2500-400));

I would like to change a color based on how the window gets resized, i.e. something looking like this:

 .container 
 color: #FF0000;

 @media screen and (min-width: 700px) 
 color: #FF00FF;
 

 @media screen and (min-width: 1000px) 
 color: #00FF00;
 

 @media screen and (min-width: 1200px) 
 color: #FFFFFF;
 
 

Would there be any smarter way of doing it with css only, i.e. recalculating the color value with calc, taking into consideration the vw?

Pseudocode example:

color: #FFFF + calc(00 + XXX) 

[ad_2]

لینک منبع