Skip to content
Branch: master
Clone or download
Latest commit 24ad055 May 13, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist fixed bug #86 which caused double quoting Sep 24, 2015
test Moved to SassDoc compliant comments, updated tests and fixed a few th… Dec 30, 2014
.npmignore Bugfix release for npm Feb 12, 2014
.sassdocrc Added a configuration file for SassDoc Dec 31, 2014
Gruntfile.js Moved to SassDoc compliant comments, updated tests and fixed a few th… Dec 30, 2014
LICENSE Initial commit Jan 13, 2014
SassyJSON.gemspec Bumping 1.1.1 Jan 30, 2014
package.json Added title to package.json Dec 31, 2014

SassyJSON NPM version Gem Version Build Status

⚠️ SassyJSON was an experimental project. It is not meant to be used in production. If you need to transit JSON data from and to your Sass layer, have a look into Eyeglass and Sassport.

SassyJSON is a Sass-powered API for JSON. It provides you the classic json-encode and json-decode directly from your Sass files. We'll leave you the only judges of the point of this. Read API documentation.


SassyJSON is available on npm or as a Ruby Gem.


git clone && cd SassyJSON


npm install sassyjson --save-dev

Compass extension

  1. gem install SassyJSON
  2. Add require 'SassyJSON' to your config.rb
  3. Import it in your stylesheets with @import 'SassyJSON'


If you only want to play around the code without cloning the repo or using npm, you can find a single file containing the whole API in the dist folder.

Also, SassyJSON is available at Sassmeister.


Encoding Sass to JSON


$map: ((a: (1 2 ( b : 1 )), b: ( #444444, false, ( a: 1, b: test ) ), c: (2 3 4 string)));

@include json-encode($map);


/*! json-encode: '{"a": [1, 2, {"b": 1}], "b": ["#444444", false, {"a": 1, "b": "test"}], "c": [2, 3, 4, "string"]}' */

body::before {
  content: '{"a": [1, 2, {"b": 1}], "b": ["#444444", false, {"a": 1, "b": "test"}], "c": [2, 3, 4, "string"]}';

head {
  font-family: '{"a": [1, 2, {"b": 1}], "b": ["#444444", false, {"a": 1, "b": "test"}], "c": [2, 3, 4, "string"]}';

@media -json-encode {
  json {
    json: '{"a": [1, 2, {"b": 1}], "b": ["#444444", false, {"a": 1, "b": "test"}], "c": [2, 3, 4, "string"]}';

If you want to restrict the output to only one of the three drivers (comment, media query or regular output) you can pass a flag as the second parameter with one of the four following keywords: all, comment, media or regular. Default is all.

Decoding JSON to Sass

$json-decode: json-decode('{"a": [1, 2, {"b": 1}], "b": ["#444444", false, {"a": 1, "b": "test"}], "c": [2, 3, 4, "string"]}');
// ("a": 1 2 ("b": 1), "b": #444444 false ("a": 1, "b": "test"), "c": 2 3 4 "string")

Importing and decoding a JSON file

To importe and decode an external .json file directly into a Sass variable:

@import 'SassyJSON'; // Import SassyJSON first!
@import 'relative/path/to/file.json?variable-name';
// Do something with $variable-name


  • the path to the JSON file is relative to importing file
  • the get parameter is the variable name to use it in Sass


All you need is a clean version of Sass 3.3. Otherwise it's just pure Sass madness.


You need

  • NodeJS
  • Ruby
  • Sass 3.3 via gem install sass --pre
  • grunt-cli via npm install -g grunt-cli

How to

  1. Fork this repository
  2. Run npm install
  3. grunt dev
  4. Make your changes + write tests
  5. Commit + Pull request


You can’t perform that action at this time.