[UNMAINTAINED] A Sass API for JSON.
CSS Ruby JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist fixed bug #86 which caused double quoting Sep 24, 2015
lib Bump version to 1.1.8 Jun 1, 2014
stylesheets
test Moved to SassDoc compliant comments, updated tests and fixed a few th… Dec 30, 2014
.gitignore
.npmignore
.sassdocrc Added a configuration file for SassDoc Dec 31, 2014
.travis.yml
CHANGELOG.md Update CHANGELOG.md Jun 1, 2014
Gruntfile.js
LICENSE
README.md
SassyJSON.gemspec Bumping 1.1.1 Jan 30, 2014
package.json
sache.json

README.md

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.

Install

SassyJSON is available on npm or as a Ruby Gem.

Git

git clone https://github.com/HugoGiraudel/SassyJSON.git && cd SassyJSON

npm

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'

Sass

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.

Example

Encoding Sass to JSON

Sass

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

@include json-encode($map);

CSS

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

body::before {
  display:block;
  width:0;height:0;
  overflow:hidden;
  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

Important:

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

Requirements

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

Development

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

Credits