grid - 在 SUSY 中的断点处覆盖 span-columns()

Question

这个问题已经被问过了，但解决方案对我没有任何帮助。

如何在 SUSY 中的不同断点处覆盖跨度列

屏幕.css.scss

// Settings

$total-columns  : 6;
$column-width   : 4em;
$gutter-width   : 1em;
$grid-padding   : $gutter-width;

$tablet         : 8;
$desktop         : 12;

// Layout

body {
    @include container($total-columns, $tablet, $desktop);
    .logo {
        @include span-columns(4);
    }
    nav {
        @include span-columns(2 omega);
    }
}

@include at-breakpoint($tablet) {
    .logo {
        @include span-columns(5, $tablet);
    }
    nav {
        @include span-columns(3 omega, $tablet);
    }
}

@include at-breakpoint($desktop) {
    .logo {
        @include span-columns(1, $desktop);
    }
    nav {
        @include span-columns(11 omega, $desktop);
    }
}

这是结果：http: //jsfiddle.net/jmdcp/1/

更改浏览器宽度时，列不会调整大小。他们保持默认比率（span-columns（4）和span-columns（2 omega），即使在平板电脑和桌面断点处也是如此。我真的不明白我做错了什么。

Answer 1

看起来像级联特异性问题。您的初始跨度设置嵌套在主体选择器下。您的断点覆盖不是。如果将它全部嵌套在主体下，或者取消嵌套它的初始设置：

body {
  @include container($total-columns, $tablet, $desktop);
}

.logo {
  @include span-columns(4);
  @include at-breakpoint($tablet) {
    @include span-columns(5);
  }
  @include at-breakpoint($desktop) {
    @include span-columns(1);
  }
}

nav {
  @include span-columns(2 omega);
  @include at-breakpoint($tablet) {
    @include span-columns(3 omega);
  }
  @include at-breakpoint($desktop) {
    @include span-columns(11 omega);
  }
}