Convert JSON to SASS with Grunt
Convert JSON to SASS with Grunt
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-sasson --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-sasson');
Run this task with the grunt sasson
command.
Type: Boolean
Default: true
Output the Sass in maps instead of variables.
Type: String
Default: null
Set the map name when options.useMap
is true
, or use it to add a namespace prefix to variable names.
Type: Boolean
Default: true
Use double quotes for escaping string values and map keys when true
or single quotes when false
.
Type: Integer
Default: 2
The number of spaces to use when applying indentation.
Add a section named sasson
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
sasson: {
target: {
options: {
useMap: true,
varName: 'config',
doubleQuotes: true,
tabSpaces: 2
},
files: [{
src: ['input.json'],
dest: 'scss/'
]}
}
}
});
grunt.loadNpmTasks('grunt-sasson');
grunt.registerTask('default', ['sasson']);
Sass files will be stored in your dest
folder and formatted as partials (e.g., _output.scss
), and the input file name will be applied to the output file.