0

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

#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：我需要指定断点以应用移动设置。像这样：

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 就足够了？

4

1 回答 1

0

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

于 2013-12-06T20:19:57.620 回答