{"id":15015993,"url":"https://github.com/minusfive/ember-cli-sass-variables-export","last_synced_at":"2025-04-12T10:09:07.636Z","repository":{"id":48272372,"uuid":"136136439","full_name":"minusfive/ember-cli-sass-variables-export","owner":"minusfive","description":"Export Sass $variable values as JSON data to Ember Utilities, so they can be consumed from the rest of your app.","archived":false,"fork":false,"pushed_at":"2021-08-03T19:27:00.000Z","size":1987,"stargazers_count":4,"open_issues_count":35,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T05:02:43.496Z","etag":null,"topics":["ember","ember-addon","ember-cli","ember-cli-addon","ember-cli-sass","emberjs","emberjs-addon","emberjs-frontend","node-sass","sass","sass-functions"],"latest_commit_sha":null,"homepage":"https://minusfive.com/ember-cli-sass-variables-export/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/minusfive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-05T07:19:40.000Z","updated_at":"2025-03-03T16:57:56.000Z","dependencies_parsed_at":"2022-08-30T02:10:15.412Z","dependency_job_id":null,"html_url":"https://github.com/minusfive/ember-cli-sass-variables-export","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minusfive%2Fember-cli-sass-variables-export","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minusfive%2Fember-cli-sass-variables-export/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minusfive%2Fember-cli-sass-variables-export/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/minusfive%2Fember-cli-sass-variables-export/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/minusfive","download_url":"https://codeload.github.com/minusfive/ember-cli-sass-variables-export/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247767225,"owners_count":20992545,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","ember-addon","ember-cli","ember-cli-addon","ember-cli-sass","emberjs","emberjs-addon","emberjs-frontend","node-sass","sass","sass-functions"],"created_at":"2024-09-24T19:48:15.393Z","updated_at":"2025-04-12T10:09:07.615Z","avatar_url":"https://github.com/minusfive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# ember-cli-sass-variables-export\n\n\n[![GitHub license](https://img.shields.io/github/license/minusfive/ember-cli-sass-variables-export.svg)](https://github.com/minusfive/ember-cli-sass-variables-export/blob/master/LICENSE.md)\n[![Ember Observer Score](https://emberobserver.com/badges/ember-cli-sass-variables-export.svg)](https://emberobserver.com/addons/ember-cli-sass-variables-export)\n[![npm version](https://badge.fury.io/js/ember-cli-sass-variables-export.svg)](https://badge.fury.io/js/ember-cli-sass-variables-export)\n[![Build Status](https://travis-ci.org/minusfive/ember-cli-sass-variables-export.svg?branch=master)](https://travis-ci.org/minusfive/ember-cli-sass-variables-export)\n\nExport Sass `$variable` values as JSON data to [Ember Utilities](https://guides.emberjs.com/v3.1.0/tutorial/service/#toc_accessing-the-google-maps-api-with-a-utility), 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](http://ember-freestyle.com/)).\n\nThis addon is meant to be used with ember-cli-sass. Works with both dart sass and node-sass implementations. Check [ember-cli-sass docs](https://github.com/aexmachina/ember-cli-sass) for more information on how to provide your preferred implementation.\n\n## Installation\n`ember i ember-cli-sass-variables-export`\n\n## Usage\n\n### 1. Use The `export` Sass Function\n\nThis 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:\n\n```scss\n/**\n@function export\n  @param  {string}  fileName  - Ember Utility file name for output\n  @param  {*any*}   value     - $variable value to be exported\n  @returns value              - Returns the untouched value you passed\n*/\n$my-sass-variable: export('util-file-name', $value);\n```\n\nThe **first argument** is a `string`, used as the _name for the utility file_ your variable value will be exported to.\n\nThe **second argument** is the _value_ for the `$variable`. All [Sass Data Types](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#data_types) are [should be?] supported, (i.e. **lists**, [nested] **maps**, **colors**, etc.), since node-sass' native functions are used to parse the data.\n\n**IMPORTANT:** _Make sure all your **map keys** are **`'quoted'`**. This is just good practice and will save you a ton of headaches._\n\n### 2. Import Generated Ember Utility\n\nImport the generated utility from your components, controllers, etc.\n\n```js\nimport mySassVar from 'ember-cli-sass-variables-export/utils/util-file-name';\n```\n\n### 3. Profit!\n\n## Examples\n\nSimple example showing how to export color palettes defined in your Sass:\n\n```scss\n// app/styles/settings/colors.scss\n$color-palette: (\n  'primary': (\n    'base': $color-brand--primary,\n    'light': mix($color-white, $color-brand--primary, 33%),\n    'dark': mix($color-black, $color-brand--primary, 33%),\n    'accent': $color-brand--primary--accent,\n    'trans': transparentize($ivb-color-brand--primary, 0.50)\n  ),\n  'secondary': (\n    'base': $color-brand--secondary,\n    'light': mix($color-white, $color-brand--secondary, 33%),\n    'dark': mix($color-black, $color-brand--secondary, 33%),\n    'accent': $color-brand--secondary--accent\n  )\n);\n$color-palette-export: export('color-palette', $color-palette);\n```\n\n```js\n// /app/utils/color-palette.js\n// Generated Ember Utility output\nexports default = {\n  \"primary\": {\n    \"base\": \"rgb(161, 148, 213)\",\n    \"light\": \"rgb(191, 182, 226)\",\n    \"dark\": \"rgb(113, 104, 148)\",\n    \"accent\": \"rgb(161, 148, 213)\",\n    \"trans\": \"rgba(161, 148, 213, 0.50)\"\n  },\n  \"secondary\": {\n    \"base\": \"rgb(242, 135, 97)\",\n    \"light\": \"rgb(245, 174, 148)\",\n    \"dark\": \"rgb(168, 96, 70)\",\n    \"accent\": \"rgb(242, 135, 97)\"\n  }\n};\n```\n\n```js\n// app/components/my-component.js\nimport Component from '@ember/component';\nimport colorPalette from 'ember-cli-sass-variables-export/utils/color-palette';\n\nexport default Component.extend({\n  colorPalette\n});\n```\n\n[//]: # ({% raw %})\n```hbs\n\u003c!-- app/templates/components/my-component.js  --\u003e\n{{#each-in colorPalette as |color shade|}}\n  {{#each-in shade as |shadeKey shadeColor|}}\n    \u003cdiv style=\"background-color: {{shadeColor}}\"\u003e\n      {{color}}--{{shade}}\n      ({{shadeColor}})\n    \u003c/div\u003e\n  {{/each-in}}\n{{/each-in}}\n```\n[//]: # ({% endraw %})\n\n## Bugs\n\nPlease report any bugs [through issues](https://github.com/minusfive/ember-cli-sass-variables-export/issues).\n\n### Known Issues\n\n* 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.\n\n## Contributing\n\n### Installation\n\n* `git clone \u003crepository-url\u003e`\n* `cd ember-cli-sass-variables-export`\n* `yarn install`\n\n### Linting\n\n* `yarn lint:js`\n* `yarn lint:js --fix`\n\n### Running tests\n\n* `yarn test` – Runs the test suite on the current Ember version\n* `yarn test:all` – Runs the test suite against multiple Ember versions\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n\n## Credits\n\nForked from https://github.com/mikemunsie/ember-export-sass-variables (no longer maintained).\n\n#### Original Project Credits:\n\n- https://github.com/Punk-UnDeaD/node-sass-export\n- https://github.com/davidpett/ember-cli-sass-variables\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminusfive%2Fember-cli-sass-variables-export","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fminusfive%2Fember-cli-sass-variables-export","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fminusfive%2Fember-cli-sass-variables-export/lists"}