0

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.

Squis
  • 921
  • 2
  • 8
  • 14
  • I don't get the purpose of this.. – user2864740 Jun 24 '15 at 04:11
  • I want to create a variable for every single property of every element. This way, I can selectively tweak certain properties in my theme_A.scss file. – Squis Jun 24 '15 at 04:16
  • I admit, it's very well possible, that this is complete overkill, the way I'm doing it. – Squis Jun 24 '15 at 04:21
  • It seems a bit counter to CSS. These base 'tweaks' would only be setup once, no need for variables - just edit the base CSS/SCSS. All the other stylesheets just apply on top with more applicable selectors. – user2864740 Jun 24 '15 at 04:51

0 Answers0