Creating a JSASS Style Guide for Chassis

[sfrisk]

With the work on the Buttons PR #97 and the Typography Variable Refactoring PR #134, it has become obvious that we need to create a style guide for how to best handle JSASS variables in Chassis, including naming conventions, and when to group variables under a larger object. Lets use this issue as a starting point for best practices we want to follow.

For example, a good practice to include is probably to group variables that belong to the same element together. Also we should have some consistency between using camel case for variables or dashes. If anyone else can think of anything else requiring consistency that we should address, please add it here.

[sfrisk]

Paraphrasing today's discussion in the weekly Chassis Meeting: SASS style guide will mention that we use JSASS variables instead of traditional SCSS Variables, then link to the information for JSASS. Also it would be useful to have some explanation on how JSASS works and integrating it with your development process.

[geekman-rohit]

Also there should be a guideline as to when to use a map instead of simple variables, at least some small guideline or suggestion if not as a rule.

[geekman-rohit]

Discussion in Meeting on Tuesday 1 march.

1. All scss variables and map keys defined in .js files for jsass should be double quoted.
2. scss variables to be hyphen-separated for multiple words and not camelCased

So

Right :+1:

"font": {
        name: "Type Style",
        value: {
            "color": "red",
            "font-size": "12px"
        }
    }

Wrong :-1:

font: {
        name: "Type Style",
        value: {
            color: "red",
            fontSize: "12px"

        }
    }

[sfrisk]

JSASS docs: https://github.com/arschmitz/jsass-vars