sassyjson

    1.1.8 • Public • Published

    SassyJSON NPM version Gem Version Build Status

    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.

    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: ( #444444false, ( 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

    Keywords

    Install

    npm i sassyjson

    DownloadsWeekly Downloads

    16

    Version

    1.1.8

    License

    MIT

    Last publish

    Collaborators

    • fweinb
    • kittygiraudel