postcss-advanced-variables icon indicating copy to clipboard operation
postcss-advanced-variables copied to clipboard

@elseif is supported?

Open kono-paku opened this issue 6 years ago • 3 comments

Hi, I found out the similar issue below. https://github.com/jonathantneal/postcss-advanced-variables/issues/8

But it appears that @if and @else works fine, not @elseif. Is there anyone to checkout this issue.

$theme-type: test1;

@if $theme-type == test1 {
  background: #000000;
} @else if $theme-type == test2 {
  background: #DDDDDD;
}  @else {
  background: #FAFAFA;
}

By the way, this plugin is so great. Thanks for providing the great plugin!

kono-paku avatar Dec 20 '18 08:12 kono-paku

There's no mention of @elseif in the docs or tests, so no, it's not supported. You can of course use nested @if conditionals:

@if $theme-type == test1 {
  background: #000000;
} @else {
  @if $theme-type == test2 {
    background: #DDDDDD;
  }  @else {
    background: #FAFAFA;
  }
}

maxmilton avatar Dec 21 '18 21:12 maxmilton

A nested clause deteriorates legibility of source code. I wrote down the souce below which is a bit weird but easy to understand.

@if $theme-type == test1 {
  background: #000000;
}

@if $theme-type == test2 {
  background: #DDDDDD;
}

@if $theme-type == test3 {
  background: #FAFAFA;
}

kono-paku avatar Dec 22 '18 01:12 kono-paku

I would be nice if there is @elseif keyword.

kono-paku avatar Dec 22 '18 01:12 kono-paku