Creating Themes using SASS (maps)

Question

I'm new to SASS and I'm trying to give users the ability to pick different themes for a website. I created a map that looks like this:

$theme-map: ( 
   main-theme: (
      primary: #007991,
      secondary: #55D3AE,
      tertiary: #D35555,
      gradientFirstColour: #007991,
      gradientSecondColour: #34EBE9
), 
   test-theme: (
      primary: #1abc9c,
      secondary: #e67e22,
      tertiary: #c0392b,
      gradientFirstColour: #2c3e50,
      gradientSecondColour: #f1c40f
   )
)

Now I'm not sure how to loop through these and then apply them to specific elements. Example: I want to choose the main theme and then use the primary color for the background of a button, the secondary color for the background of a div, and the same thing when I chose the test theme. Can someone please help me?

Thanks in advance!

pentzzsolt pentzzsolt · Accepted Answer · 2017-12-29T22:44:25

I believe there are many ways to implement this, I have experience with doing something similar in the past, so here is my implementation.

Step 1

Create multiple CSS output files for the different themes you have, in your case main.css and test.css. You could prefix the names as well to make them more understandable, theme-main.css and theme-test.css for example.

I would advice keeping general styles – like reset, margins, typography – in one file, something like global.css and add your themes on top of that in separate files. Load these CSS files on top of each other in your HTML.

Main theme:

<link href="global.css" rel="stylesheet" type="text/css">
<link href="theme-main.css" rel="stylesheet" type="text/css">

And test theme:

<link href="global.css" rel="stylesheet" type="text/css">
<link href="theme-test.css" rel="stylesheet" type="text/css">

In your project's Sass folder, create theme-main.scss and theme-test.scss, along global.scss.

Step 2

Move your theme colors into different partial Sass files and make sure the name of the variables is the same. I would personally create folders within the project's Sass folder with names that match my CSS output files and put these files there.

In your case, create a _theme-main and _theme-test folder within the Sass folder. Create a file in each folder, name them both _variables.scss with the following content:

In _theme-main/_variables.scss:

$colors: (
    primary: #007991,
    secondary: #55D3AE,
    tertiary: #D35555,
    gradientFirstColour: #007991,
    gradientSecondColour: #34EBE9
);

And in _theme-test/_variables.scss:

$colors: (
    primary: #1abc9c,
    secondary: #e67e22,
    tertiary: #c0392b,
    gradientFirstColour: #2c3e50,
    gradientSecondColour: #f1c40f
);

Step 3

Load the necessary variables in the files where you need them.

In your file theme-main.scss, put:

@import '_theme-main/variables';

And in your file theme-test.scss, put:

@import '_theme-test/variables';

So far, this ensures that the different theme files can work with different values of the same variables. In truth, the variable $colors is just called the same in these two theme files, in reality, they are not the same.

Step 4

Create a partial Sass file with the styles you want to apply the themes on.

Because we already put the dependencies of theme-main.scss in the _theme-main folder and the dependencies of theme-test.scss in the _theme-test folder, I personally would not want to break this pattern, so I would create a shared folder or something similar and put partial Sass files that are imported in multiple Sass files there. You could skip this of course, but I believe this helps keep your project more maintainable.

Staying at your example, create a partial Sass file called _styles.scss and put it in your shared folder. Put the following code in it:

button {
    background-color: map-get($colors, primary);
}

div {
    background-color: map-get($colors, secondary);
}

And now all you need to do is import this partial file in your theme files.

In your file theme-main.scss, put:

@import '_theme-main/variables';
@import 'shared/styles';

And in your file theme-test.scss, put:

@import '_theme-test/variables';
@import 'shared/styles';

If I did not make any mistakes, your output CSS files should look like this:

theme-main.css:

button {
    background-color: #007991;
}

div {
    background-color: #55D3AE;
}

theme-test.css:

button {
    background-color: #1abc9c;
}

div {
    background-color: #e67e22;
}

Let me know if you find this useful or if you have any further questions or concerns.

Creating Themes using SASS (maps)

1 Answers