CSS, Stylus: conditional "else" is ignored


I’m trying to create Mixins in Stylus that would allow me to define in one line two different colors of an element for .theme-bright and .theme-dark. Base on this, here’s my current simplified code:

insert-Variable(Name, Value-bright, Value-dark)
  if theme-is-bright
    --color-{Name}: Value-bright
  else if theme-is-dark
    --color-{Name}: Value-dark

Variables()
  insert-Variable(Element1, black, white)
  insert-Variable(Element2, black, white)
  insert-Variable(Element3, black, white)

.theme-bright
  theme-is-dark = false
  theme-is-bright = true
  Variables()

.theme-dark
  theme-is-bright = false
  theme-is-dark = true
  Variables()

I would expect it to yield this:

.theme-bright
  --color-Element1: black;
  --color-Element2: black;
  --color-Element3: black;
.theme-dark
  --color-Element1: white;
  --color-Element2: white;
  --color-Element3: white;

Instead, I’m getting this:

.theme-bright
  --color-Element1: black;
  --color-Element2: black;
  --color-Element3: black;
.theme-dark
  --color-Element1: black;
  --color-Element2: black;
  --color-Element3: black;

Switching --color-{Name}: Value-bright with --color-{Name}: Value-dark also switches this unintended result: the values under both .theme-bright and .theme-dark now become white. So, apparently, whatever value defined under else if is ignored or overridden by the one under if.

Changing else if ... to just else doesn’t fix this: it still picks up only the value defined under if.

What am I doing wrong?

Source: CSS – Stack Overflow

November 6, 2021
Category : News
Tags: conditional-statements | css | stylus

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.