Skip to content
[UNMAINTAINED] A Sass API for JSON.
Branch: master
Clone or download
Latest commit 24ad055 May 13, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist fixed bug #86 which caused double quoting Sep 24, 2015
lib
stylesheets
test Moved to SassDoc compliant comments, updated tests and fixed a few th… Dec 30, 2014
.gitignore
.npmignore Bugfix release for npm Feb 12, 2014
.sassdocrc Added a configuration file for SassDoc Dec 31, 2014
.travis.yml
CHANGELOG.md
Gruntfile.js Moved to SassDoc compliant comments, updated tests and fixed a few th… Dec 30, 2014
LICENSE Initial commit Jan 13, 2014
README.md
SassyJSON.gemspec Bumping 1.1.1 Jan 30, 2014
package.json Added title to package.json Dec 31, 2014
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

You can’t perform that action at this time.