SCSS / SASS条件化变量

Question

I am trying to see if there is a way to conditionals a variable in my scss. The scenario being for a fallback font loader throwing a class on my body when all fonts are loaded - so I could switch out fonts.

So the idea is I have my _variables.scss file set up, and inside it has all my site fonts looking something like this -

$primary-font-family: 'Font1', sans-serif;
$primary-font-normal: 400;
$primary-font-bold: 700;

$secondary-font-family: 'Font2', serif;
$secondary-font-normal: normal;
$secondary-font-bold: normal;

This has been working great for me, but I am looking for an easy way to swap them out without added class listeners in the css to every instance where I am consuming these fonts. So I was wondering if there might be a way to conditionalize these variables -

 // if .fonts-loaded class is on body, use loaded font
 $primary-font-family: 'Font1', sans-serif;
 // else use system default font
 $primary-font-family: 'defaultSystemFont', sans-serif;

Unsure if something like this would be possible, does anyone know of a way to achieve this. Thanks for reading!

Answer 1

Sass would never know if something was loaded on the page like JS would.

Once it compiles, Sass becomes static CSS and doesn't necessarily communicate according to changes made on the page (beyond knowing it should style things a certain way according to a pre-defined pseudo-class.)

Also, the more we keep telling a page to "think more" - the less it benefits in terms of loading time.

Since CSS is "cascading", you can always set a default font stack such as:

.stuff {color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 1em;}

...and then, lower in the CSS (possibly within a partial that's imported after the global layout, as part of the theme):

.stuff {font-family: "SuperSpecialFont";}

It will then load, as it's read, setting the default foundation and then progressively enhancing it. Sass won't ever be aware of a page's loading status, however, it will deliver style based on what's available and when - which allows you to have a fallback until everything it's supposed to present is in place.

===

According to your comment, there doesn't seem to be a reason for a conditional in this case.

Fundamental CSS would handle it with .thisClass .thatClass or .thisClass > .thatClass - depending on how strict you want to be. So, for example, in Sass:

.thatClass {
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
}

.thisClass {
    .thatClass {
        font-family: 'SuperSpecialFont';
    }
}

If it's nested inside of .thisClass , then it will apply those properties. If not, it will stay as it was originally defined.