How to handle non configured variables in Sass - css

Question

In the following Sass file i'm creating a simple css structure where I can set up all the fonts in the first rows.
$global-font-family: 'Open Sans', sans-serif;
/*h1*/
$h1-font-family: inherit;
$h1-font-size: 4em;
$h1-letter-spacing: inherit;
$h1-line-height: inherit;
$h1-text-transform: inherit;
/*h2*/
$h2-font-family: inherit;
$h2-font-size: 3em;
$h2-letter-spacing: inherit;
$h2-line-height: inherit;
$h2-text-transform: inherit;
h3,h4,h5,ecc.
h1, h2, h3, h4, h5, h6, p {
font-family: $global-font-family;
}
h1 {
font-family: $h1-font-family;
font-size: $h1-font-size;
letter-spacing: $h1-letter-spacing;
line-height: $h1-line-height;
text-transform: $h1-text-transform;
}
h2 {
font-family: $h2-font-family;
font-size: $h2-font-size;
letter-spacing: $h2-letter-spacing;
line-height: $h2-line-height;
text-transform: $h2-text-transform;
}
h3,h4,h5 ecc.
Firstly a font-family is applied to h1,h2,h3,p. Then, you can change every single tag, but is not necessary. For example, if you set a global font-family Open Sans to all, and h1 has to be Open Sans, you leave h1 blank.
But... how I leave h1 to Open Sans without removing this
h1 { font-family: $h1-font-family }
is "inherit" the correct way? What would be the cleanest solution?
Thanks

Answer 1

Generally if you are creating a template, I think it would be better to write just the global rules and let the users customize whatever they need in whichever model they prefer to do it. What I mean to say is that you should leave out all the h1, h2 specific rules and let them write the selectors if they need. They can always override your CSS by appending custom rules.
But if you want to follow your model of defining the variable names that they should be using, setting the properties only if the expected variable is defined by the user then the #if directive or the if() function along with variable-exists, global-variable-exists could be useful for you like in below snippet (its a reduced sample). I think this makes it really complex but its your choice.
$global-font-family: 'Open Sans', sans-serif;
$global-font-size: 3em;
/*h1*/
$h1-font-family: 'Roboto Sans', sans-serif;
/*h2*/
$h2-font-size: 1em;
h1, h2, h3, h4, h5, h6, p {
font-family: $global-font-family;
}
h1 {
#if (global-variable-exists(h1-font-family) or variable-exists(h1-font-family)){
font-family: $h1-font-family;
}
font-size: if((global-variable-exists(h1-font-size) or variable-exists(h1-font-size)),
$h1-font-size,
$global-font-size);
}
h2 {
#if (global-variable-exists(h2-font-family) or variable-exists(h2-font-family)){
font-family: $h2-font-family;
}
font-size: if((global-variable-exists(h2-font-size) or variable-exists(h2-font-size)),
$h2-font-size,
$global-font-size);
}
variable-exists function checks if the variable is defined in the local scope whereas the global-variable-exists checks if it is defined in global scope. If it is defined then we use the value provided by the user. If else we do nothing or use the global font settings.
In the snippet, I've also demonstrated both the #if directive and the if function. They have subtle differences. The #if directive prints the property (font-family here) only if the variable exists while in the case of if function, as you can see, the property is printed irrespective of whether the variable exists or not. If the variable is present, it uses th user defined value else it uses the global setting. The choice on which one to use is upto you.
Below is the compiled CSS:
h1, h2, h3, h4, h5, h6, p {
font-family: "Open Sans", sans-serif;
}
h1 {
font-family: "Roboto Sans", sans-serif;
font-size: 3em;
}
h2 {
font-size: 1em;
}
Here since the $h2-font-family is not defined separately, it doesn't print the font-family here and so the global one defined in h1, h2, h3, h4, h5, h6, p would get used.
Note: inherit doesn't mean inherit the value from the previous matching selector. It means inherit the value from the parent. So, for example if you need body to have Arial font, global setting is for h1, h2, h3 to have Verdana then if you set $h1-font-family to inherit, it would apply Arial font to h2 instead of applying Verdana (if user didn't define anything). This might not be what you're after.
body {
font-family: Arial;
}
h1, h2, h3 {
font-family: Verdana;
}
h2 {
font-family: inherit;
}
<h1>Some Heading 1</h1>
<h2>Some Heading 2</h2>
<h3>Some Heading 3</h3>

Answer 2

The reason you make variables in the first place is to make changes quicker and be able to be consistent. If you want to apply your h1 font to all headings or to primary headings name the variable after that. Or simply inherit. ex:
$font-heading-primary: 'Open Sans', sans-serif;
$font-heading-secondary: 'Halfway Sans', sans-serif;
$font-family-paragraph: 'Closed Sans', sans-serif;
$font-size-lg: 3rem;
$font-size-md: 2rem;
$font-size-sm: 1rem;
h1 {
font-family: $font-heading-primary;
font-size: $font-size-lg;
}
h2 {
font-family: $font-heading-primary;
font-size: $font-size-md;
}
h3 {
font-family: $font-heading-secondary;
font-size: $font-size-sm;
}
p {
font-family: $font-paragraph;
}

Answer 3

There a lot of ways to about architecting your SCSS, but it's easy to get in a situation of overkill like your example. I would try to harness the power of the cascade if I were you; set the font family on the body or a base set of elements so you're not redeclaring it hundreds of times.
body,
button,
input,
select,
textarea,
address,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: $global-font-family;
}