Creating a theming system in SCSS - Alternative to doing it manually?

71 views Asked by At

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.

0

There are 0 answers