Splitting up theme SCSS into multiple files

themes
(David Taylor) #1

Themes and theme components are becoming steadily more powerful, and developers are getting more and more ambitious. To make things easier for developers, themes can now split their SCSS into multiple files.

When creating a new theme with the theme CLI, or sharing a theme on github, simply create a new folder called scss. Fill it with your .scss files, following any folder structure, and all the files will be available for you to import in the common / desktop / mobile SCSS sections of your theme.

For example, if you want to have a common variable available to both mobile and desktop SCSS, you could do something like this:

scss/myfolder/variables.scss

$favourite-color = red;

desktop/desktop.scss

@import "myfolder/variables";
body {
  background-color: $favourite-color;
}

mobile/mobile.scss

@import "myfolder/variables";
body {
  color: $favourite-color;
}

This feature was added in v2.3.0.beta8, so do not use these features quite yet if you need to maintain backwards compatibility with older versions of Discourse. You can use the minimum_discourse_version parameter of about.json to ensure your component doesn’t get used on an earlier version.

12 Likes
Discourse 2.3.0.beta9 Release Notes
Breaking up common.scss into multiple files in components?
(Justin DiRose) #2

This is amazing @david! Nice work!

I can’t wait to give this a whirl.

7 Likes
(Jon Gallion) #3

This is a great! I can now remove my hack for getting around not being able to do this.

4 Likes