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 eyeglass or sassport to convert JSON into a SCSS hash. Another tool available is json-sass, which you can use standalone.

If you're not using Gulp, then you would have to rely on Gem based converters but they don't seem to be actively maintained:

• https://github.com/vigetlabs/sass-json-vars
• https://github.com/HugoGiraudel/SassyJSON

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

Hi a little late but have you tried this one? sass-export

It is in early version but it might help you.