SASS - @IF and @ELSE not working

[n_merciano]

Hi there,

Can somebody please help… i am almost done here… but i have a problem the @IF and @ELSE IF are not working for me… it’s showing the same result from the first @IF statement.

//Card scheme names
$theme_one: "ncrv";
$theme_two: "avrobode";

$card_bg_color:         null;
$card_title_color:      null;
$card_title_font_size:  null;
$card_text_color:       null;
$card_text_font_weight: null;
$card_text_font_size:   null;
$card_link_color:       null;

$current_theme: $theme_one;

  @if $current_theme == $theme_one {
    $card_bg_color:         #FFF;
    $card_title_color:      #000;
    $card_title_font_size:  25px;
    $card_text_color:       #000;
    $card_text_font_weight: bold;
    $card_text_font_size:   1em;
    $card_link_color:       #FF0;
  } 
  @else if $current_theme == $theme_two {
    $card_bg_color:         #111;
    $card_title_color:      #222;
    $card_title_font_size:  40px;
    $card_text_color:       #333;
    $card_text_font_weight: regular;
    $card_text_font_size:   1.2em;
    $card_link_color:       #AAA; 
  } 

// Card schemes
$schemes: (
  $theme_one: (
      card_bg_color:          $card_bg_color,
      card_title_color:       $card_title_color,
      card_title_font_size:   $card_title_font_size,
      card_text_color:        $card_text_color,
      card_text_font_weight:  $card_text_font_weight,
      card_text_font_size:    $card_text_font_size,
      card_link_color:        $card_link_color, 
  ),
  $theme_two: (
      card_bg_color:          $card_bg_color,
      card_title_color:       $card_title_color,
      card_title_font_size:   $card_title_font_size,
      card_text_color:        $card_text_color,
      card_text_font_weight:  $card_text_font_weight,
      card_text_font_size:    $card_text_font_size,
      card_link_color:        $card_link_color,  
  )
);

.card-theme {
  position: relative;
  @each $themes, $nested in $schemes {
     &-#{$themes} {
       .card {
          &-bg {
            background-color: map-get(map-get($schemes, $themes), card_bg_color);
          }
          &-title {
            color: map-get(map-get($schemes, $themes), card_title_color);
            font-size: map-get(map-get($schemes, $themes), card_title_font_size);
          }
          &-text {
            color: map-get(map-get($schemes, $themes), card_text_color);
            font-size: map-get(map-get($schemes, $themes), card_text_font_size);
            font-weight: map-get(map-get($schemes, $themes), card_text_font_weight);
          }
          &-link {
            color: map-get(map-get($schemes, $themes), card_link_color);
          }        
       }
    }   
  }
}

results in:

.card-theme {
  position: relative;
}
.card-theme-ncrv .card-bg {
  background-color: #FFF;
}
.card-theme-ncrv .card-title {
  color: #000;
  font-size: 25px;
}
.card-theme-ncrv .card-text {
  color: #000;
  font-size: 1em;
  font-weight: bold;
}
.card-theme-ncrv .card-link {
  color: #FF0;
}
.card-theme-avrobode .card-bg {
  background-color: #FFF;
}
.card-theme-avrobode .card-title {
  color: #000;
  font-size: 25px;
}
.card-theme-avrobode .card-text {
  color: #000;
  font-size: 1em;
  font-weight: bold;
}
.card-theme-avrobode .card-link {
  color: #FF0;
}

Can somebody please help?

What am i doing wrong here?

Actually i want to create THEMES with the same variables but different values.

Thanks!