Singularity 여러 거터가 무시되고 있습니다

Question

저는 Singularity.gs 1.5.1을 사용하여 격자를 만듭니다. 추가 거터 치수를 선언하면 무시됩니다. 이것은 내가 무엇을 가지고 : 이것은 모든 화면 크기에서 20 개 픽셀 격자를 생산

@include add-grid(12); 
 
@include add-gutter(20px); 
 
@include add-gutter(30px at 640px); 
 
@include add-gutter(40px at 1024px); 
 
@include add-gutter-style('split' 'fixed'); 
 
@include sgs-change('output', 'float'); 
 

 
.column-1 { 
 
    @include grid-span(1, 1); 
 
}

. 워드 프로세서에 따르면이 발생한다 :

20 개 픽셀 배수구를 0 - 640
30 픽셀 배수구 640에서 -가 1024px
40px 홈통 왜이 작동하지 않는 경우가 1024px에와

위?

Answer 1

Singularity의 Responsive Grid Quickstart Section을 읽으십시오.

Singularity는 응답 할 수있는 그리드를 제공하지 않고 오히려 응답 성있는 그리드 컨텍스트를 제공합니다. 이렇게하면 grid-span에 전화 할 때 그리드 옵션을 원하는대로 정의 할 수 있습니다. 그리드에 항목을 첨부하려면 미디어 쿼리에서 grid-span으로 전화를 걸어 신청해야합니다.

플로트 출력 스타일로 고정 거터를 사용하는 경우, 패딩 변경 사항이 포함 된 믹스 인을 만드는 것이 좋습니다.

@mixin column-padding { 
    padding-left: 10px; 
    padding-right: 10px; 

    @include breakpoint(640px) { 
    padding-left: 15px; 
    padding-right: 15px; 
    } 

    @include breakpoint(1024px) { 
    padding-left: 20px; 
    padding-right: 20px; 
    } 
} 

.column-1 { 
    @include grid-span(1, 1); 
    @include column-padding; 
}