CODEWITHSUNDEEP
javascriptjsonsass
L.B
L.B

Reputation: 51

Is it possible to change scss to json?

I would like to convert a scss file with variables to a json file. But I don't know if that is even possible. Could someone please give me some tips?

So I would like to convert this kind of scss file to a json file, the variables are defined in an other file:

.test {
    color: $test1; //#000000
}
.test1 {
    color: $test2; //#ffffff
}

The output should look something like this:

{
    ".test":{
        "color":"#000000"
     },
     ".test1":{
         "color":"#ffffff"
     }
}

Upvotes: 0

Views: 1521

Answers (1)

kGielo
kGielo

Reputation: 381

Of course you can.

Please check this package: https://github.com/ryanbahniuk/scss-to-json

Input:

// Font Sizes
$font-size: 14px;
$font-size-large: $font-size * 1.1;

// Colors
$text-color: #666;
$text-color-light: lighten($text-color, 15%);
$border-color: #123 !global; // use for all borders

Output:

{
  "$font-size": "14px",
  "$font-size-large": "15.4px",
  "$text-color": "#666",
  "$text-color-light": "#8c8c8c",
  "$border-color": "#123"
}

Source scss to json github

Upvotes: 2

Related Questions