Make SCSS themes

2020

3 minCSS

This is mostly investigation I did for making themes and brands in a work related situation. I thought that maybe someone else could benefit from this.

I have investigated making SCSS themes based on using $variables. I will quickly run through the main topics on the approach I used

File structure

This is the file structure of the proof of concept. I have used a similar structure in this proof of concept from our current file structure. I have not included files and folders that don't make sense to include in a proof of concept. That is the reason I haven't included all ITCSS folders.

├── index.html
    ├── styles // Main SCSS
    │   ├── components // ITCSS components
    │   │   └── _components.scss
    │   ├── settings // ITCSS settings
    │   │   ├── _settings.scss
    │   │   └── themes // Theme settings
    │   │       ├── _theme-1.scss
    │   │       └── _theme-2.scss
    │   ├── theme-1.scss // SCSS main file
    │   └── theme-2.scss // SCSS main file
    └── views // Component library
        └── components
            ├── component.html
            └── _components.scss

bash

Main theme files

We will in the files theme-1.scss and theme-2.scss @import SCSS only relevant for the specific theme/brand. We will first load in basic settings, then theme settings and then everything else in the ITCSS order.

// Basic settings first
@import "settings/settings";
// Then write theme settings
@import "settings/themes/theme-1";
// Then everything else
@import "components/components";
@import "../views/components/components";

css

// Basic settings first
@import "settings/settings";
// Then write theme settings
@import "settings/themes/theme-2";
// Then everything else
@import "components/components";
@import "../views/components/components";

css

This is the output for the theme files. As you can see, we don't load unnecessary CSS. I have at the bottom of this document an example for not using theme specific files with variables.

.c-section {
  max-width: 500px;
  margin: 0 auto;
}

.c-section__heading {
  color: green;
  border: 2px solid green;
  padding: 5px;
}

.c-section__paragraph {
  color: darkgrey;
}

.c-marquee {
  color: green;
}

css

.c-section {
  max-width: 500px;
  margin: 0 auto;
}

.c-section__heading {
  color: blue;
}

.c-section__paragraph {
  color: darkgrey;
}

.c-marquee {
  color: blue;
}

css

Settings

In the settings folder we will include basic settings. This could be colors, fonts and dimensions.

$theme-1: false !default;
$theme-2: false !default;

$color-brand-1: grey !default;
$color-brand-2: darkgrey !default;

css

We will also include theme settings in the settings folder. Here we will overwrite the basic settings. The variable $theme-1 is something we’re going to use in the component example.

$theme-1: true;
$color-brand-1: green;

css

Components

This is an example of a component. The color for .c-section__heading will be green for theme 1 and blue for theme 2. The color for .c-section__paragraph will always be darkgrey in both themes. I have also included an example with an @if statement for theme specific CSS properties.

.c-section {
    max-width: 500px;
    margin: 0 auto;

    &__heading {
        color: $color-brand-1;
        
        @if $theme-1 {
            border: 2px solid $color-brand-1;
            padding: 5px;
        }
    }

    &__paragraph {
        color: $color-brand-2;
    }
}

css

Example for not using theme bundle files

As the example shows below, we will load too much unnecessary CSS, if we are not using theme specific files. The line number for theme-2.css is 13. The line number for the example below is 33. Now imagine multiple brands and real production CSS.

.c-section {
  max-width: 500px;
  margin: 0 auto;
}

.c-section__heading {
  color: grey;
}

.c-section__paragraph {
  color: grey;
}

.theme-1.c-section__heading {
  color: green;
  border: 2px solid green;
  padding: 5px;
}

.theme-1.c-section__heading {
  color: green;
}

.theme-2.c-section__heading {
  color: blue;
}

.theme-2.c-section__heading {
  color: blue;
}

.c-marquee {
  color: grey;
}

.theme-1.c-marquee {
  color: green;
}

.theme-2.c-marquee {
  color: blue;
}

css