将嵌套断点与bourbon-neat一起使用

Question

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

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

我的scs:

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*/
    }
}

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

感谢的帮助

EDIT1:我需要指定断点来应用移动设置。像这样：

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{}
    }
}

但是我遇到了页面内部的问题。我需要指定容器还是只需要跨列混合？

Answer 1

在声明断点之前，需要确保@import 'neat-helpers';。请参阅此处的"入门"说明：https://github.com/thoughtbot/neat#getting-启动