버번 깔끔한 중첩 된 중단 점 사용

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

예를 들어, 내가 브레이크 포인트에 따라 배경색을 변경하고, PC 화면에 , 색상은 모바일 하나에 의해 무시됩니다.하지만 열 번호가 맞습니다 ... 이상합니다. 도움을

덕분에

EDIT1 : 나는 mobile.Like에 대한 설정을 적용 할 수있는 브레이크 포인트를 지정해야이 :

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

    } 
} 

하지만 난 page.do의 내부 부품에 문제를 얻을 내가 필요 컨테이너를 지정하거나 열을 확장하십시오 mixin은 충분합니까?

Answer 1

중단 점을 선언하기 전에 @import 'neat-helpers';을 확인해야합니다. 여기에서 시작하기 지침을 참조하십시오 : https://github.com/thoughtbot/neat#getting-started