susy-compass - マークアップで直接使用するグリッドクラスを生成する方法はありますか？

Question

私はcssでミックスインを使用することを好みますが、susy場合によっては、汎用グリッドクラスを使用すると便利な場合があります。たとえば、これらの宣言をインライン化することが理にかなっているWebフォームで使用する場合などです。

それを行う方法はありますか？

現在、私はこれらのクラスを次のように手動で生成しています。

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

Answer 1

Susy のような流動的なシステムでは、コンテキストが重要であるため、グリッド クラスは非常に複雑になります。デフォルトでは（まだ）提供していません。私はこれを素早く作り上げました。

@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;

これが Susy コアに追加されれば、もう少しきれいになる可能性がありますが、今のところはそれでニーズをカバーできるはずです。拡張するサイレント クラスまたは標準クラスのいずれかを出力します。それがどのように機能するかを教えてください。また、これをコアに移動することを検討するために、気軽に github に問題を提出してください。