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.
SassyJSON is available on npm or as a Ruby Gem.
git clone https://github.com/HugoGiraudel/SassyJSON.git && cd SassyJSON
npm install sassyjson --save-dev
gem install SassyJSON
- Add
require 'SassyJSON'
to yourconfig.rb
- 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. You can copy its content directly into Sassmeister to play with the code.
$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
.
$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")
All you need is a clean version of Sass 3.3. Otherwise it's just pure Sass madness.
- Fork this repository
- Run
npm install
grunt dev
- Make your changes + write tests
- Commit + Pull request