Using nested breakpoint with bourbon neat

Question

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 ?

Answer 1

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