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

Question

问题已被提出，但解决方案对我没有任何帮助。

How to override span-columns at different breakpoint in SUSY

screen.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 下，或者取消嵌套它的初始设置：

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);
  }
}