ember-cli-sass-variables-export

Export Sass $variable values as JSON data to Ember Utilities, so they can be consumed from the rest of your app. The idea is to help you step closer to an SSoT for style-related data/documentation (e.g. populating styling documentation with Ember Freestyle).

This addon is meant to be used with ember-cli-sass. Works with both dart sass and node-sass implementations. Check ember-cli-sass docs for more information on how to provide your preferred implementation.

Installation

ember i ember-cli-sass-variables-export

Usage

1. Use The export Sass Function

This addon makes an export Sass function available in your app/addon. Use it to export the value of a $variable to an Ember Utility file (as JSON), like so:

/**
@function export
  @param  {string}  fileName  - Ember Utility file name for output
  @param  {*any*}   value     - $variable value to be exported
  @returns value              - Returns the untouched value you passed
*/
$my-sass-variable: export('util-file-name', $value);

The first argument is a string, used as the name for the utility file your variable value will be exported to.

The second argument is the value for the $variable. All Sass Data Types are [should be?] supported, (i.e. lists, [nested] maps, colors, etc.), since node-sass' native functions are used to parse the data.

IMPORTANT: Make sure all your map keys are 'quoted'. This is just good practice and will save you a ton of headaches.

2. Import Generated Ember Utility

Import the generated utility from your components, controllers, etc.

import mySassVar from 'ember-cli-sass-variables-export/utils/util-file-name';

3. Profit!

Examples

Simple example showing how to export color palettes defined in your Sass:

// app/styles/settings/colors.scss 
$color-palette: (
  'primary': (
    'base': $color-brand--primary,
    'light': mix($color-white, $color-brand--primary, 33%),
    'dark': mix($color-black, $color-brand--primary, 33%),
    'accent': $color-brand--primary--accent,
    'trans': transparentize($ivb-color-brand--primary, 0.50)
  ),
  'secondary': (
    'base': $color-brand--secondary,
    'light': mix($color-white, $color-brand--secondary, 33%),
    'dark': mix($color-black, $color-brand--secondary, 33%),
    'accent': $color-brand--secondary--accent 
  )
);
$color-palette-export: export('color-palette', $color-palette);

// /app/utils/color-palette.js
// Generated Ember Utility output
exports default = {
  "primary": {
    "base": "rgb(161, 148, 213)",
    "light": "rgb(191, 182, 226)",
    "dark": "rgb(113, 104, 148)",
    "accent": "rgb(161, 148, 213)",
    "trans": "rgba(161, 148, 213, 0.50)"
  },
  "secondary": {
    "base": "rgb(242, 135, 97)",
    "light": "rgb(245, 174, 148)",
    "dark": "rgb(168, 96, 70)",
    "accent": "rgb(242, 135, 97)"
  }
};

// app/components/my-component.js
import Component from '@ember/component';
import colorPalette from 'ember-cli-sass-variables-export/utils/color-palette';
 
export default Component.extend({
  colorPalette
});

<!-- app/templates/components/my-component.js  -->
{{#each-in colorPalette as |color shade|}}
  {{#each-in shade as |shadeKey shadeColor|}}
    <div style="background-color: {{shadeColor}}">
      {{color}}--{{shade}}
      ({{shadeColor}})
    </div>
  {{/each-in}}
{{/each-in}}

Bugs

Please report any bugs through issues.

Known Issues

• Double build initially triggered, believe caused by initial JS variables files generation after initial Sass parsing/project build, which makes the watch process trigger a new build. This hasn't caused a problem yet, but open to PRs to correct it.

Contributing

Installation

• git clone <repository-url>
• cd ember-cli-sass-variables-export
• yarn install

Linting

• yarn lint:js
• yarn lint:js --fix

Running tests

• yarn test – Runs the test suite on the current Ember version
• yarn test:all – Runs the test suite against multiple Ember versions

License

This project is licensed under the MIT License.

Credits

Forked from https://github.com/mikemunsie/ember-export-sass-variables (no longer maintained).

Original Project Credits:

• https://github.com/Punk-UnDeaD/node-sass-export
• https://github.com/davidpett/ember-cli-sass-variables