ember-cli-sass-variables
Access your SASS variables from your Ember app to keep things like style guides up to date.
Install
Simply run ember install ember-cli-sass-variables
. If you don't already have ember-cli-sass
installed, this will do it for you.
Configure
Once installed, add a .scss
file that only contains variables such as app/styles/_variables.scss
.
Configure the addon in your ember-cli-build.js
file by adding the path to your variables file:
var app = defaults sassVariables: 'app/styles/_variables.scss';
Options
appDir
- (defaults to app
) Directory of your app code
sassVariables
- path to a .scss
file containing variables
Usage
Once configured you can access the Array containing the variables like so:
;; Component;
The Array contains objects with key/value pairs. In your SASS file, you might have:
;;;
And the Equivalent in javascript would be:
key: 'colorRed' value: '#FF4136' key: 'colorBlue' value: '#357EDD' key: 'fontSerif' value: '"Scope One", serif'
The addon will watch to see if the variables file has changed and automatically update the javascript file with the correct information.
Inspiration and some code from https://github.com/nordnet/sass-variable-loader