0

I basically have a css variable --my-variable that contains something like 250px (with the unit px). I want to apply style based on the size contained in that variable.

For example:

background-color: if( var(--my-variable) > 200px , green, red );

Seems that I can't compare this way... What am I doing wrong ? Any idea ?

I am using SCSS.

Thanks in advance

Marina
  • 11
  • css cannot do this, you need javascript for that. – G-Cyrillus Oct 03 '19 at 14:23
  • you are using SCSS, Sass? if yes, take a look here, maybe it can help: https://sass-lang.com/documentation/at-rules/control/if – Calvin Nunes Oct 03 '19 at 14:24
  • 1
    I think you have to use mixins. Try look at this answer : https://stackoverflow.com/questions/5456467/syntax-for-if-else-condition-in-scss-mixin – Desnoxav Oct 03 '19 at 14:24
  • Yeah I already looked these pages, doesn't help because I want to compare with ">", not an "==" – Marina Oct 03 '19 at 14:27

1 Answers1

0

I think you might be able to colour your content in a media query. CSS calcs doesn't have an if statement.

ianhobbs
  • 43
  • 5