1 | # Sass Export Data
|
2 |
|
3 | Uses [custom functions in `node-sass`](https://www.npmjs.com/package/node-sass#functions--v300---experimental) to export JSON files from Sass maps and other variables.
|
4 |
|
5 | ### Install
|
6 |
|
7 | ```bash
|
8 | npm install --save @theme-tools/sass-export-data
|
9 | ```
|
10 |
|
11 | ### Setup
|
12 |
|
13 | ```js
|
14 | const config = {
|
15 | name: 'export_data', // Name of Sass function
|
16 | path: 'path/to/export/folder/' // Folder where to place JSON files
|
17 | };
|
18 | const sassExportData = require('@theme-tools/sass-export-data')(config);
|
19 | ```
|
20 |
|
21 | Then pass `sassExportData` to the [`functions` option in `node-sass`](https://www.npmjs.com/package/node-sass#functions--v300---experimental). It'll be the object like it wants, so you could merge it with other functions if needed. This can work with many ways to compile sass: gulp, webpack, basic cli, or anything that utilizes `node-sass`.
|
22 |
|
23 | ### Usage
|
24 |
|
25 | In your sass declare this mixin to make it easier:
|
26 |
|
27 | ```scss
|
28 | /// Export Sass Data to JSON in `path/to/export/folder/` folder
|
29 | /// @param {String} $filename - ie `mystuff.json`
|
30 | /// @param $var - What to turn into JSON
|
31 | /// @example scss
|
32 | /// @include export-data-to-lib('filename.json', $sass-map);
|
33 | @mixin export-data($filename, $var) {
|
34 | // The `export_data` function is a custom function added to Sass.
|
35 | // The `$data` var is weird, but needed.
|
36 | $data: export_data($filename, $var);
|
37 | };
|
38 | ```
|
39 |
|
40 | Then you can do this wherever you'd like:
|
41 |
|
42 | ```scss
|
43 | $x: (
|
44 | a: 'Apple',
|
45 | b: 'Beer',
|
46 | );
|
47 |
|
48 | @include export-data('example.json', $x);
|
49 | ```
|
50 |
|
51 | This will create the file `example.json` in `path/to/export/folder/` with:
|
52 |
|
53 | ```json
|
54 | {
|
55 | "a": "Apple",
|
56 | "b": "Beer"
|
57 | }
|
58 | ```
|
59 |
|
60 | ### Details
|
61 |
|
62 | - If the file hasn't changed, it won't output. That helps watchers go less crazy.
|
63 |
|
64 | Special thanks to [`node-sass-export`](https://www.npmjs.com/package/node-sass-export) for inspiration and much of the original code.
|