虽然我更喜欢在我的css上使用susy mixins,但在某些情况下,使用通用网格类很有用,例如在webforms中使用哪些内联声明这些声明是有意义的.
有办法吗?
目前我正在手动生成这些类:
.grid-1{
@include span-columns(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上提出一个问题,考虑将其转移到核心.