Progressive enhancement

[djgrant]

It seems daft that developers can create many versions of class for different breakpoints but it is not possible to do the same for JS/non-JS states.

Propose adding the ability to generate conditional "if" classes.

@include classes('hidden', $on: ('base', 'mobile', 'no-js', 'js'));
// generates
.hidden {}
.no-js .hidden-if-no-js {}
.js .hidden-if-js {}
@media [mobile media expression] {
  .hidden-on-mobile {}
}

If classes encounters a string not in the breakpoint config it generates a conditional "if" class for the value of that string.

[djgrant]

Might be better to be specific about the "ifs"

@include classes('hidden', $on: ('base', 'mobile', 'no-js'), $if: ('js'));

[djgrant]

Tempting to add a parameter for the base class that is true by default. That's always felt quite out of place to me in the $on list.

@include classes('hidden', $base: false, $on: ('mobile', 'no-js'), $if: ('js'));

[mrcthms]

@djgrant Definitely prefer the $if syntax for the js additions, over adding it to the $on, as the nomenclature is different for both sets of rules. Is the fact that you've got no-js in the $on set in the comment above intentional? If not, I'd argue that it should be entirely in the $if block

[djgrant]

Yep, that was unintentional