Question

我会测试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*/
    }
}

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

感谢您的帮助

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的列？

Answer 1

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

使用嵌套断点与波旁威士忌整齐

1 个答案: