使用嵌套断点与波旁威士忌整齐(Using nested breakpoint with bourbon neat)

使用嵌套断点与波旁威士忌整齐(Using nested breakpoint with bourbon neat)

我想测试bourbon整洁的网格，我尝试实际上做一个移动的第一个方法网格。 我的结构看起来像：

#general #header .headHaut .headBas #content-global #left-content #content-inner #right-content #footer

我的网格设置：

$mobile-size:em(320); $tablet-size:em(720); $desktop-size:em(1000); // Bourbon Neat Breakpoints - règle le nombre de colonnes $mobile: new-breakpoint(min-width $mobile-size 4); $tablet: new-breakpoint(min-width $tablet-size 8); $desktop: new-breakpoint(min-width $desktop-size 12);

我的scss：

body #general{ //Approche mobile-first,réglage pour mobile @include outer-container; padding-top: 2em; background: transparent; #header{@include span-columns(4);} #content-global{@include span-columns(2);} #left-content{} #content-inner{} #right-content{} #footer{@include span-columns(4); @include background-size;} @include breakpoint ($desktop) {/* //Dimensions pour les pc*/ background: transparent; #header{@include span-columns(12);} #content-global{@include span-columns(12);} #left-content{@include span-columns(2 of 12);} #content-inner{@include span-columns(8 of 12);} #right-content{@include span-columns(2 of 12);} #footer{@include span-columns(12); @include background-size(auto); } } @include breakpoint($tablet) {/* //Dimensions pour les tablettes*/ } }

例如，我根据断点更改背景颜色，在PC屏幕上，颜色被移动设备覆盖..但是列号是正确的...奇怪。

感谢帮助

EDIT1：我需要指定断点来应用mobile的设置。就像这样：

body #general{ //Approche mobile-first,réglage pour mobile @include outer-container; padding-top: 2em; background: transparent; @include breakpoint ($mobile){} #header{@include span-columns(4);} #content-global{@include span-columns(2);} #left-content{} #content-inner{} #right-content{} #footer{@include span-columns(4); @include background-size;} @include breakpoint ($desktop) {/* //Dimensions pour les pc*/ background: transparent; #header{@include span-columns(12);} #content-global{@include span-columns(12);} #left-content{@include span-columns(2 of 12);} #content-inner{@include span-columns(8 of 12);} #right-content{@include span-columns(2 of 12);} #footer{@include span-columns(12); @include background-size(auto); } } @include breakpoint($tablet) {/* //Dimensions pour les tablettes*/ #header{} #content-global{} #left-content{} #content-inner{} #right-content{} #footer{} } }

但是我在页面的内部部分遇到了麻烦。我需要指定容器还是仅仅调整mixin的列？

i would to test bourbon neat grid and i try actually to do a mobile first approach grid. My structure look like:

#general #header .headHaut .headBas #content-global #left-content #content-inner #right-content #footer

My grid settings:

$mobile-size:em(320); $tablet-size:em(720); $desktop-size:em(1000); // Bourbon Neat Breakpoints - règle le nombre de colonnes $mobile: new-breakpoint(min-width $mobile-size 4); $tablet: new-breakpoint(min-width $tablet-size 8); $desktop: new-breakpoint(min-width $desktop-size 12);

My scss:

body #general{ //Approche mobile-first,réglage pour mobile @include outer-container; padding-top: 2em; background: transparent; #header{@include span-columns(4);} #content-global{@include span-columns(2);} #left-content{} #content-inner{} #right-content{} #footer{@include span-columns(4); @include background-size;} @include breakpoint ($desktop) {/* //Dimensions pour les pc*/ background: transparent; #header{@include span-columns(12);} #content-global{@include span-columns(12);} #left-content{@include span-columns(2 of 12);} #content-inner{@include span-columns(8 of 12);} #right-content{@include span-columns(2 of 12);} #footer{@include span-columns(12); @include background-size(auto); } } @include breakpoint($tablet) {/* //Dimensions pour les tablettes*/ } }

For example, i change background color depending on breakpoint, and on a pc screen, the color is override by the mobile one..but columns number is the right one...strange.

thanks for help

EDIT1: i need to specify the breakpoint to apply settings for mobile.Like this:

body #general{ //Approche mobile-first,réglage pour mobile @include outer-container; padding-top: 2em; background: transparent; @include breakpoint ($mobile){} #header{@include span-columns(4);} #content-global{@include span-columns(2);} #left-content{} #content-inner{} #right-content{} #footer{@include span-columns(4); @include background-size;} @include breakpoint ($desktop) {/* //Dimensions pour les pc*/ background: transparent; #header{@include span-columns(12);} #content-global{@include span-columns(12);} #left-content{@include span-columns(2 of 12);} #content-inner{@include span-columns(8 of 12);} #right-content{@include span-columns(2 of 12);} #footer{@include span-columns(12); @include background-size(auto); } } @include breakpoint($tablet) {/* //Dimensions pour les tablettes*/ #header{} #content-global{} #left-content{} #content-inner{} #right-content{} #footer{} } }

but i get troubles with inside parts of the page.do i need to specify the container or just span columns mixin is enought ?

最满意答案

你需要确保你@ @import 'neat-helpers'; 在宣布断点之前。 请参阅此处的入门说明： https ： //github.com/thoughtbot/neat#getting-started

You need to make sure you @import 'neat-helpers'; before you declare your breakpoints. See the Getting Started instructions here: https://github.com/thoughtbot/neat#getting-started