Is there a way to generate grid classes to use markup directly

Question

While I prefer to use mixin susy on my css, in some cases it is useful to have common grid classes, for example for use in web forms, where it makes sense to have these declarations inside.

How to do it?

I am currently generating these classes manually:

 .grid-1{ @include span-columns(1); } 

Answer 1

Mesh classes will be very complex in a fluid system such as Susie, because context is important. We do not provide it by default (for now). I quickly whipped it, and it should close you:

 @mixin susy-classes($silent: false) { $base: if($silent, '%', '.'); $selector: '#{$base}span'; @if $silent { #{$selector} { @include span-columns(1); } } @else { [class^="span-"] { @include span-columns(1); } } #{$base}full { clear: both; } #{$base}omega { @include omega; } @for $span from 1 through $total-columns { $span-selector: '#{$selector}-#{$span}'; @for $context from 1 through $total-columns { $total-selector: '#{$span-selector}-#{$context}'; $total-selector: if($context == $total-columns, '#{$span-selector}, #{$total-selector}', $total-selector); @if $context != $span { #{$total-selector} { @if $silent { @extend #{$selector}; } width: columns($span, $context); } } @else { #{$total-selector} { clear: both; } } } } } @include susy-classes; 

It could be a little cleaner if it were added to Susy's core, but for now it should cover your needs. It will output either silent classes for extension or standard classes. Let me know how this works for you, and feel free to report a problem on github to consider moving this to the kernel.