select-sass-theme
Built-time Sass theme switcher.
This tiny addon lets you define multiple Sass files and include only one of them into your app's build, via an env var.
Define default values of your theme variables in app/styles/config/themes/_default.scss
.
Define as many theme files as you need. In those files, override any of the theme variables:
app/styles/config/themes/client2.scss
app/styles/config/themes/client3.scss
When you build your app, a app/styles/config/_theme.scss
file will be created.
If you run your build without the EMBER_THEME
env var, then _theme.scss
will simply reexport variables from the themes/_default.scss
file.
If you run your build with EMBER_THEME=client2 ember build
, _theme.scss
will contain the content of client2.scss
file.
Compatibility
Should support really old versions of Ember.
Relies on Broccoli.
Requires sass v1.23.0+. If you use ember-cli-sass v10+, then you're good to go.
Is not compatible with ember-component-css.
Is not compatible with ember-css-modules, unless you use this opinionated [workaround](#ember-css-modules workaround).
Installation
ember install select-sass-theme
Most likely, you need ember-cli-sass as well.
File structure
This addon's blueprint will create the following files in your app:
Filename | Usage |
---|---|
app/styles/config/themes/_current-theme.scss |
Does not exist. Gets created during build by renaming a theme file. |
app/styles/config/themes/_default.scss |
Must define default values of all theme variables. |
app/styles/config/themes/_[theme-name].scss |
Reexports the defaults, may override any of the theme variables. |
When the app builds without EBMER_THEME
env var, the app/styles/config/themes/_current-theme.scss
file will be created by renaming _default.scss
.
When the app builds with an EBMER_THEME
env var, the app/styles/config/themes/_current-theme.scss
file will be created by renaming one of the theme files.
For example, if you have app/styles/config/themes/_client2.scss
and you build with EMBER_THEME=client2 ember s
, then app/styles/config/themes/_current-theme.scss
will be overwritten with the content of _client2.scss
.
Usage
Since DartSass v1.23.0
, Sass supports the @use
directive. It lets you import variables, mixins and functions locally, without polluting the global scope and causing potential collisions. @use
if very similar to JS's import
. See documentation and this article for more info.
Whenever you need to reference a theme variable in your Sass code, @use
the theme file at the top of your Sass file, then use the namespaced variable:
@use "app/styles/config/themes/current-theme" as theme;
a {
color: theme.$link-text-normal;
text-decoration: theme.$link-decoration-normal;
&:hover {
color: theme.$link-text-hover;
text-decoration: theme.$link-decoration-hover;
}
}
ember-css-modules workaround
ember-css-modules aggressively concatenates all Sass files in your app into a single file, causing Sass to crash with:
Error: @use rules must be written before any other rules.
Unfortunately, ember-css-modules
does not provide a way to opt out of concatenating certain Sass files.
You can switch to opt-in with the following configuration in you ember-cli-build.js
:
cssModules: {
extension: 'module.scss'
}
Now you need to rename your CSS modules (i. e. stylesheets that belong to compnents ant controllers) from *.scss
to *.module.scss
. You may think this is too radical, but if you import Sass partials, then ember-css-modules
may produce duplicate code in the generated CSS without you even realizing.
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.