philw_ [Oct 8th at 6:38 PM]
I’m using https://www.npmjs.com/package/sass-export to extract this data (along with colours) from our Sass, write it to a JSON file in the PL _data directory, and then read it from some Twig files in PL - seems a decent workflow for demonstrating values stored in Sass/SCSS
npm
sass-export
Exports Sass files to Json format, able to manage sections with annotations in comments.
18 replies danny_englander [3 days ago] @philw_ That's really neat, I just tested it out
aleksip [2 days ago] @philw_ Very interesting, will have to look into this!
philw_ [1 day ago]
I use annotations to make sass-export put specific variables in specific keys of a scss.json file inside _data
philw_ [1 day ago]
/**
* @sass-export-section="spacer"
*/
$spacer: 8px;
//@end-sass-export-section
$paragraph-margin-bottom: $spacer * 3;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1440px,
);
/**
* @sass-export-section="breakpoints"
*/
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1920px;
//@end-sass-export-section
philw_ [1 day ago] For example
aleksip [1 day ago] Wow, nice!
salem.ghoweri [1 day ago] :+1:
We’ve doing something very similar in our design system, Bolt (basically sass-export + handling non-quoted Sass Map data + internal caching) so that anything relating to Colors, Spacing, Breakpoints, etc is always 100% in sync with the docs and demos in Pattern Lab.
For example, https://boltdesignsystem.com/pattern-lab/?p=viewall-styleguide-color-palette is powered by https://github.com/bolt-design-system/bolt/blob/master/packages/core/styles/01-settings/settings-colors/_settings-colors.scss#L103 GitHub bolt-design-system/bolt Pega Digital’s next gen Design System, Bolt. Contribute to bolt-design-system/bolt development by creating an account on GitHub.
aleksip [1 day ago] @salem.ghoweri So you are using sass-export too! 🙂 Good to know.
philw_ [1 day ago] Looks like it’s https://www.npmjs.com/package/@theme-tools/sass-export-data that’s being used @aleksip npm @theme-tools/sass-export-data Export Sass as JSON data
philw_ [1 day ago] So a similar principle but expressed differently in Sass
philw_ [1 day ago] It looks good!
aleksip [1 day ago] Ah, thanks @philw_
jsheffers [1 day ago] Anyone have a good resource to output YAML files instead of JSON?
philw_ [1 day ago] @jsheffers I think Emulsify has an example of that? For picking up on colours defined in SCSS
philw_ [1 day ago] Have a look at the ‘emulsify-gulp’ repo on Github
danny_englander [1 day ago] There's a cool Emulsify function that converts sass color vars to YAML. but yes, like @philw_ said, Emulisfy is all YML based.
danny_englander [1 day ago] e.g.
- name: $lime
value: '#cddc39'
- name: $red
value: '#e51c23'
- name: $inidgo
value: '#3f51b5'
- name: $blue
value: '#2196f3'
- name: $cyan
value: '#00bcd4'
- name: $dark-cyan
danny_englander [1 day ago] and those come from a scss file where you've set up your colors