Skip to content
The last JSON to Sass converter you'll ever need!
Branch: master
Clone or download
Regaddi Merge pull request #6 from Regaddi/fix-readme
Fix insensitive language issues
Latest commit df017d1 Nov 28, 2018

README.md

npm version Build Status Coverage Status js-semistandard-style

jsontosass

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

Simple 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 your Sass variables
  • indentation for maps
  • minification
  • Syntax output (Sass and SCSS)

Additionally I want this module to be well tested, that's why I'm focussing on TDD here.

What you will get with this package is a well maintained, documented and tested JSON to Sass converter that will definitely be the last one you'll ever need!

Installation

You can install this package with npm:

npm install jsontosass

After that 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 obviously 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 you can 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

You're 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.

You can’t perform that action at this time.