rickekelschot / grunt-json-to-sass Goto Github PK

View Code? Open in Web Editor NEW

8.0 2.0 7.0 9 KB

Convert JSON files to sass maps and variables

License: MIT License

JavaScript 100.00%

grunt-json-to-sass's Introduction

grunt-json-to-sass

Convert JSON files to SASS files

Getting Started

This plugin requires Grunt ~0.4.5

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

$ npm install grunt-json-to-sass --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-json-to-sass');

The "json_to_sass" task

Config

In your project's Gruntfile, add a section named json_to_sass to the data object passed into grunt.initConfig().

grunt.initConfig({
  json_to_sass: {
    your_target: {
      files: [
        {
          src: [
            'example.json'
          ],
          dest: '_example.scss'
        }
      ]
    },
  },
});

Supported conversions

Objects to maps
RGB(A) & HSL
Interpolation (#{})

grunt-json-to-sass's People

Contributors

Stargazers

Watchers

Forkers

ednaldoneimeg rob-ot-dot-be gruntjs-updater lyfter neclamis1285 maria-eb atomictangerine

grunt-json-to-sass's Issues

Invalid output when using array of objects in JSON file.

Invalid Sass output when using array of objects in JSON file.

JSON

{
  "colors": [
    {
      "name" : "Sun",
      "hex": "#FAAB18"
    },
    {
      "name": "Mango",
      "hex": "#F2BE2E"
    }
  ]
}

Sass Output

$colors:((name:"Sun",hex:#FAAB18),(name:"Mango",hex:#F2BE2E});

Note the unexpected } at the end of the string which should be )

Unexpected token while loading tasks

When I run the json_to_sass task with the this config:

json_to_sass: {
    files: [{
      src: [
        'shared/test.json'
        ],
      dest: '_example.scss'
      }]
    }

I get the following error:

Loading "json_to_sass.js" tasks...ERROR
>> SyntaxError: Unexpected token .

Any ideas what might be causing this?

Wrong interpretation of RGBA value

Hello,

I think the package have a problem for converting rgba values. My json is :

{ "theme" : { "font-size" : "18px", "color" : "#4A4A4A", "test" : "rgba(0,0,0,.4)", "background-color" : "#F7F5FA" } }

And the rendered variables are :

$theme:("font-size":18px,color:#4A4A4A,test:rgba(0,0,0,.4)","background-color":"#F7F5FA);

As you can see, the problem seems to occur with the " causing a wrong close statement.

Did you encounter this issue or do you have any idea how to fix it ?

Best regards,

Update NPM to 0.0.5

https://www.npmjs.com/package/grunt-json-to-sass states "0.0.4 is the latest of 4 releases".

This prevents the installation of the latest (working) version via NPM.