CSS SASS if else if statement

Question

Is it possible to use an else if in SASS?

Like this:

if(1+1 = 1) {

} else if(2+1=4) {

} else {

}

I have the following and it doesn't work:

$color: "blue", "green", "orange", "red", "pink", "grey", "black"

@for $i from 1 through length($color)
  .color-#{ nth($color, $i) }
    @if nth($color, $i) == "pink" or "grey"
      color: #f00
    @else if nth($color, $i) == "black"
      color: #0f0
    @else if nth($color, $i) == "orange"
      color: #000
    @else
      color: #fff

DNReNTi · Answer 1 · 2015-02-26T18:43:59.753

4

According to the SASS reference: Yes, is it possible.

Even multiple times too:

SASS:

p 
  @if $type == ocean 
    color: blue
  @else if $type == matador
    color: red
  @else if $type == monster
    color: green
  @else
    color: black

SCSS:

p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }

edited Feb 26 '15 at 18:43

answered Feb 26 '15 at 18:35

DNReNTi

521
4
18

I've updated the question, can you please check my problem? – gespinha Feb 26 '15 at 18:44
I just edited the original answer. ;) – DNReNTi Feb 26 '15 at 18:44
Because it isn't working on my case – gespinha Feb 26 '15 at 18:44
Oh, I see now. I think you have a syntax error, but Im not sure. Please ty this: `.color-#{nth($color, $i)}`. Whitout the spaces the IDE (JetBrains WebStorm) is not highlights any problems, it should work. – DNReNTi Feb 26 '15 at 18:48
It stays the same, I don't understand the difference – gespinha Feb 26 '15 at 18:49
Try remove the quotation marks in the whole if statement. ;) I hope that will solve it for you. I have to admint I never used a statment like this. – DNReNTi Feb 26 '15 at 18:52
It doesn't change even if I remove the quotation marks – gespinha Feb 26 '15 at 18:54
Check this: http://stackoverflow.com/questions/14794220/use-array-value-as-variable – DNReNTi Feb 26 '15 at 19:02

CSS SASS if else if statement

1 Answers1