I'm creating a theming system in SCSS. Since I want it to be incredibly flexible and easy to tweak, I'm working with a lot of variables (speed is not an issue). After defining theme-specific variables in another file, I import my _default.scss file to fill in the remaining variables. This is quite tedious to maintain with definitions like the following (especially since I plan on doing this for pretty much every native HTML5 element):
(...)
$h1-font: $font-2 !default;
$h1-style: normal !default;
$h1-weight: bold !default;
$h1-variant: normal !default;
$h1-transform: none !default;
$h1-decoration: none !default;
$h2-font: $h1-font !default;
$h2-style: $h1-style !default;
$h2-weight: $h1-weight !default;
$h2-variant: $h1-variant !default;
$h2-transform: $h1-transform !default;
$h2-decoration: $h1-decoration !default;
(...)
Is there a more dynamic way of doing this? Otherwise I'm thinking of generating this from a JSON file, somehow. Which I also don't know how to do yet.
EDIT: Actually, this is even more relevant for the main.scss file, where I turn all variables into actual css properties:
(...)
h1{
@include font-size($h1-font,$h1-size);
@include font-family($h1-font);
font-style: $h1-style;
font-weight: $h1-weight;
font-variant: $h1-variant;
text-transform: $h1-transform;
text-decoration: $h1-decoration;
}
h2{
@include font-size($h2-font,$h2-size);
@include font-family($h2-font);
font-style: $h2-style;
font-weight: $h2-weight;
font-variant: $h2-variant;
text-transform: $h2-transform;
text-decoration: $h2-decoration;
}
(...)
As you can see, all the declarations are very similar. If I ever needed to add another property to all elements, that would be quite tedious to do manually.