susy-compass - 有没有办法生成网格类以直接在标记上使用

Question

虽然我更喜欢使用 susy在我的 css 上使用 mixins，在某些情况下，拥有通用网格类很有用，例如在 webforms 中使用这些声明内联是有意义的。

有没有办法做到这一点？

目前我正在手动生成这些类，如下所示:

.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 上提交问题以考虑将其移入核心。