jsontosass

jsontosass

Oh, no! Not another JSON to Sass converter! Why did you do that?

Short answer: there was no JSON to Sass converter out there (up to this point) that was flexible enough to suite my needs to e.g. satisfy my scss-lint configuration.

This one here aims to be as flexible as possible regarding

• generation of Sass variables
• indentation for maps
• minification
• Syntax output (Sass and SCSS)

Additionally this module should be well tested, that's why Test driven development (TDD) has focus.

This package aims to be a well maintained, documented and tested JSON to Sass converter that will be the last one you'll ever need!

Installation

Install this package with npm:

npm install jsontosass

or

yarn install jsontosass

If all went well you should be able to access jsontosass by using require

var jsontosass = require("jsontosass");

Usage

There are 3 main functions available.

convert()

jsontosass.convert(/* String */ jsonInput, /* Object */ options);

convert() returns the generated Sass code as a string.

convertFile()

jsontosass.convertFile(
  /* String */ jsonInputFilePath,
  /* String */ sassOutputFilePath,
  /* Objects */ options,
  /* Function */ callback
);

convertFile() does not return anything. It automatically creates the output file if it's nonexistent and writes the generated Sass code into it. This happens asynchronously. The callback is called afterwards.

convertFileSync()

jsontosass.convertFileSync(
  /* String */ jsonInputFilePath,
  /* String */ sassOutputFilePath,
  /* Objects */ options
);

Same as convertFile() but synchronously and without callback parameter.

Options

(Int/String) indent

default: 4

If a number greater 0 is given, jsontosass will indent using the given number of spaces. Optionally set it to 'tabs'. This will indent using \t. Indentation is only made, when prettify is set to true.

Boolean prettify

default: true

If set to true jsontosass will pretty print the generated Sass code using the indent setting.

Int spaceAfterColon

default: 1

Sets the amount of spaces after the colon :.

Int spaceBeforeColon

default: 0

Sets the amount of spaces before the colon :.

String syntax

default: 'scss'

Sets the syntax output. Possible values: 'sass' or 'scss'

Boolean useMaps

default: true

If set to true jsontosass generates Sass maps for inner objects. If set to false jsontosass generates dashed variables.

Example

{
  "key": {
    "inner-key": [1, 2, 3],
    "some-object": {
      "color-black": "#000",
      "font-family": "'Helvetica, sans-serif'"
    }
  }
}

jsontosass.convert(json, {
  indent: 2
});

$key: (
  inner-key: (
    1,
    2,
    3
  ),
  some-object: (
    color-black: #000,
    font-family: "Helvetica, sans-serif"
  )
);

Contribution

Feel free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. This project uses the semistandard code style.

License

This project is licensed under MIT.