중단 점과 함께 격자 설정을 사용하는 예

Question

중단 점을 기준으로 다른 격자 설정을 사용하는 방법을 알아 내려했지만 작동하지 못하게하려고합니다. 여기 내 코드가있다. 나는 media-query에 mix-in을 사용하고있다.

$breakpoints: 'screenSmall' 480px 768px, 
       'screenMedium' 768px 1279px, 
       'screenXlarge' 1441px;             

$total-columns: 4; 
$column-width: 5em; 
$gutter-width: 1em; 
$grid-padding: $gutter-width; 

[role="main"] { 
    @include container($total-columns); 
    background: #aaa; 
    @include susy-grid-background; 
} 

@include respond-to('screenSmall') 
    @include with-grid-settings(8,4em,1.5em,1em) { 
    [role="main"] { @include container; } 
    }; 
} 

@include respond-to('screenMedium') 
    @include with-grid-settings(12,4em,1.5em,1em) { 
    [role="main"] { @include container; } 
    }; 
} 

Answer 1

정확히 무엇이 작동하지 않습니까? 다른 중단 점에 대한 변경이 없습니까? 아니면 단순히 배경 격자 이미지를 변경하지 않습니까? 나는 후자를 추측하고있다. 당신이 배경이 새로운 설정에 응답하려면 해당 설정과 배경을 다시 선언해야합니다

물론

@include respond-to('screenSmall') 
    @include with-grid-settings(8,4em,1.5em,1em) { 
    [role="main"] { 
     @include container; 
     @include susy-grid-background; 
    } 
    }; 
} 

@include respond-to('screenMedium') 
    @include with-grid-settings(12,4em,1.5em,1em) { 
    [role="main"] { 
     @include container; 
     @include susy-grid-background; 
    } 
    }; 
} 

, 난 당신이 at-breakpoint보다 쉽게 ​​그것을 할 것이 아니라 응답-에 있다고 생각. 그러나 그것은 다른 질문입니다. :)