CODEWITHSUNDEEP
csssass
ewitkows
ewitkows

Reputation: 3618

Compile SASS for different themes

I have a website with 2 themes, let's call them "A" and "B". There's about 98% CSS overlap between the CSS for both themes, so I'm converting everything to use SASS, that way I can pull in variables for only the data that'll need to be different between both themes. For example, here's a snippet of my "main.scss"

@import '_colors.scss';
body {
    font-family: $font-name;
    background-color: $secondary-color;
}

H1, H2, H3, H4, H5, H6 {
    color: $primary-color;
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height: 32px;
    text-transform: none;
    letter-spacing: 0px;
}

So in looking at the styling above, you can see I have variables $font-name, $primary-color and $secondary-color.

My issue is, how can I have the sample SASS sit in only one file, but import the appropriate theme scss file to define $font-name, $primary-color and $secondary-color?

My directory structure is:

/Content/Themes
     ThemeA
         /main.scss 
         /_colors.scss <-- specific colors to this theme
     ThemeB
         /main.scss 
         /_colors.scss  <-- specific colors to this theme

And this works fine, my problem is that both main.scss files are identical, it's only the _colors.scss file that is different, so the good news is I'm getting the transpiling into CSS, but I want only one main.scss file where right now it's requiring each to sit within their appropriate branding directory.

How can I simplify this so I only have one main.scss?

Upvotes: 1

Views: 1703

Answers (1)

Artur Noetzel
Artur Noetzel

Reputation: 453

If you want to separate colors or anything concerning themes from your main style you basically have two options:

  1. First build a basic main.css with default colors, default fonts etc. Second create a separate file for each theme where you override all the rules with default colors by rules including your theme colors. At the end you will have one main.css and a theme-a.css, a theme-b.css and so on... You will then have to load the appropriate theme css file whenever you switch themes.

  2. You can use css custom properties instead also known as css variables. See this page for further information. The upside is you will be able to change the values of these custom properties at run-time, while your main.css can stay untouched. The downside however is that not all browsers support them right now. This would look something like this:

In your main.css:

body {
    font-family: var(--font-name);
    background-color: var(--secondary-color);
}

H1, H2, H3, H4, H5, H6 {
    color: var(--primary-color);
}

In your theme file e.g. for theme A:

:root {
    --font-name: Arial, Helvetica, sans-serif;
    --primary-color: #bada55;
    --secondary-color: deeppink;
}

In your theme file e.g. for theme B:

:root {
    --font-name: Courier, monospace;
    --primary-color: skyblue;
    --secondary-color: maroon;
}

Upvotes: 2

Related Questions