jaicab / sass-vary Goto Github PK

It has been suggested to have a creation mode where the "body class" (which will be now referred as class) got added to the selector. Here's an example:

.js .foo{
    background: red;

    @include vary($create: combine) {
        background: vary-get('color-primary');
    }
}

Output:

.foo{
    background: red;    
}

.js .foo.is-user {
    background: blue;
}

.js .foo.is-admin {
    background: pink;
}

.js .foo.is-superadmin {
    background: black;
}

Although not recommended, could be useful for some. May be implementing this soon.

Aware of the possible confusion with the current keywords for $create (body, htmlbody, mod and custom) and seeing the feedback, it would be good to come up with more representative keywords for the $create parameter.

Feel free to comment any ideas for keywords you may have and I'll pick the ones that people like the most. Keep in mind that they need to be scalable as more creation methods may be added in the future.

If I'm a heavy user of BEM-style selectors, allow me to set the default for the create argument of the vary mixin, rather than having to hardcode it everywhere:

$vary-default-create: 'mod'.

@include vary() {}

In fact choosing a default value anyway wouldn't be a bad idea.

It is probably worth considering allowing one key in a vary map to reference another key. This could be done with a token:

( primary-color: #FF000,
secondary-color: #00FF00,
button-color: '#{primary-color}',
tab-color: '#{primary-color}',
button-secondary-color: '#{primary-color}');

I guess this is related to #10 in terms of how flexible should Vary be.

On the demos page the target example output is wrong and doesn't match the sassmeister one. Fixed in #14.

Hi,

First of all, thanks for the mixin. It is awesome.

I would like to know if there is a way to provide theming for fonts, especially Google Fonts.

Worth considering supporting a nested Vary object:

$vary-map: (
  user: (
    'color':  (
       'primary': red,
       'secondary: blue
    )
  ),
) !default;

With a lookup:

@include vary($create: parent) {
    background: vary-get('color primary');
    color vary-get('color secondary');
  }

This would allow for better organisation of theme values; they could be more easily organised by type (color, font etc) or by component (button, tabs, etc).

Currently this kind of organisation is possible only through naming the keys must convey the structure eg.

tabs.tab.background-color`,
tabs.tab.font-face`