json to scss

I have listed here the issue I am trying to solve.

Convert following from

{"component": { "button": { "padding": { "value": "{size.padding.medium.value}" }, "font-size": { "value": 2 }, "text-align": { "value": "center" }, "primary": { "modifier": "true", "background-color": { "value": "hsl(10, 80, 50)" }, "color": { "value": "{color.font.inverse.value}" } }, "secondary": { "modifier": "true", "background-color": { "value": "{color.background.primary.value}" }, "color": { "value": "{color.font.link.value}" } } } } }

.component-button { padding: " "; font-size: " "; & .primary { background-color: "", color: "" } }

Issue Analytics

State:
Created 3 years ago
Comments:8 (6 by maintainers)

Top GitHub Comments

4reactions

uptonkingcommented, Feb 25, 2021

@dbanksdesign It seems that style-dictionary is so powerful that it can fully replace sass. In a design system, have u ever tried write all tokens and components in style dictionary, and then output .css files directly? we can write tokens source files in js, to use the sass equivalent vars/functions/mixins/nested. The tradeoff is to write a lot of formatters.

3reactions

chazzmoneycommented, May 25, 2021

@dbanksdesign It seems that style-dictionary is so powerful that it can fully replace sass. In a design system, have u ever tried write all tokens and components in style dictionary, and then output .css files directly? we can write tokens source files in js, to use the sass equivalent vars/functions/mixins/nested. The tradeoff is to write a lot of formatters.

This… really is mind-blowing. Something to think about more fully supporting in 4.0?

Top Results From Across the Web

json-to-scss - npm

A small utility to convert js & json file(s) to scss/sass file(s).. Latest version: 1.6.2, last published: 2 years ago.

A small utility to convert JSON file(s) into SASS/SCSS ... - GitHub

A small utility to convert JSON file(s) into SASS/SCSS files. - GitHub - rlapoele/json-to-scss: A small utility to convert JSON file(s) into SASS/SCSS ......

Parse data from JSON to SCSS - Stack Overflow

There's no way to directly handle JSON with SCSS alone. Since you're already using Gulp, you can use an third-party tool such as...

json-to-scss examples - CodeSandbox

Learn how to use json-to-scss by viewing and forking example apps that make use of json-to-scss on CodeSandbox. hyliaA simple Eleventy starter kit...

@absolunet/json-to-scss - npm package | Snyk

Learn more about @absolunet/json-to-scss: package health score, popularity, security, maintenance, versions and more.