0

質問はすでに出されていますが、解決策はそれ以上役に立ちません。

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)) を維持しています。何が間違っているのかわかりません。

4

1 に答える 1

0

Looks like a cascade specificity issue. Your initial span settings are nested under the body selector. Your breakpoint overrides are not. If you nest it all under body, or un-nest the initial settings it works:

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);
  }
}
于 2013-09-26T05:48:48.400 に答える