# ember-cli-sass-variables

> Access your SASS variables from your Ember app to keep things like style guides up to date.

Latest version **1.0.1** (published 2017-01-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-cli-sass-variables
pnpm add ember-cli-sass-variables
yarn add ember-cli-sass-variables
bun add ember-cli-sass-variables
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-01-03 |
| First published | 2016-11-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.12.0 |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | David Pett |
| Maintainers | davidpett |
| Keywords | ember-addon, ember-cli, sass, sass-variables |

## Links

- npm: https://www.npmjs.com/package/ember-cli-sass-variables
- Repository: https://github.com/davidpett/ember-cli-sass-variables
- Homepage: http://davidpett.github.io/ember-cli-sass-variables/
- Issues: https://github.com/davidpett/ember-cli-sass-variables/issues
- npm.io page: https://npm.io/package/ember-cli-sass-variables

## Dependencies (4)

- [filendir](https://npm.io/package/filendir.md) ^1.0.0
- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^5.1.7
- [lodash.camelcase](https://npm.io/package/lodash.camelcase.md) ^4.3.0
- [strip-json-comments](https://npm.io/package/strip-json-comments.md) ^2.0.1

## Recent versions

- 1.0.1 (latest) — 2017-01-03
- 1.0.0 — 2016-12-24
- 0.1.5 — 2016-11-24
- 0.1.4 — 2016-11-24
- 0.1.3 — 2016-11-24
- 0.1.2 — 2016-11-24
- 0.1.1 — 2016-11-22
- 0.1.0 — 2016-11-22

## README

[![Build Status](https://travis-ci.org/davidpett/ember-cli-sass-variables.svg?branch=master)](https://travis-ci.org/davidpett/ember-cli-sass-variables)
[![npm version](https://badge.fury.io/js/ember-cli-sass-variables.svg)](https://badge.fury.io/js/ember-cli-sass-variables)
[![Ember Observer Score](http://emberobserver.com/badges/ember-cli-sass-variables.svg)](http://emberobserver.com/addons/ember-cli-sass-variables)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)
# 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:
```javascript
var app = new EmberApp(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:
```javascript
import Ember from 'ember';
import sassVariables from '../utils/sass-variables';

export default Ember.Component.extend({
  sassVariables
});
```

The Array contains objects with key/value pairs. In your SASS file, you might have:
```scss
$color-red: #FF4136;
$color-blue: #357EDD;
$font-serif: 'Scope One', serif;
```

And the Equivalent in javascript would be:
```javascript
[
  {
    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

---
_Source: https://npm.io/package/ember-cli-sass-variables · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._