CODEWITHSUNDEEP
csssass
wharfdale
wharfdale

Reputation: 752

SCSS - Check variable for font-family

I need to check if my $primary_font_family variable contains a specific font-family.

My question is, is this the correct method of checking the font-family inside the variable? I am curious if the single quotes etc would cause issues.

Even when $primary_font_family is empty it's currently still returning a red background. My scss compiler is not returning any error, but as I know during my test, the variable was empty and it still compiled with the red background.

Code and conditional:

$primary_font_family: 'Whitney-Bold', sans-serif;

@if ($primary_font_family == 'Whitney-Bold', sans-serif) {
  .primary-header__brand-wrap {
    background-color: red !important;
  }
}

Tests:

As you can see, the second $primary_font_family check looks for a value Whitney-Example which doesn't even exist, yet it still compiles.

enter image description here

Upvotes: 5

Views: 20412

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

You can surround the fonts on @if with ( and ):

$primary_font_family: 'Whitney-Bold', sans-serif;

@if ($primary_font_family == ('Whitney-Bold', sans-serif)) {
  .primary-header__brand-wrap {
     background-color: red !important;
  }
}

demo: https://jsfiddle.net/ow5cLsxy/7/

You can also look for different variables whether one of these is matching the specified value:

$a: 'Whitney-Bold', sans-serif;
$b: 'Whitney-Bold', sans-serif;
$c: 'Whitney-Example', sans-serif;

//a or b or c = specified value
@if (index(($a, $b, $c), ('Whitney-Bold', sans-serif)) != null) {
  .test {
    color: red;
  }
}

Upvotes: 8

Related Questions