미디어 쿼리에서 자동 열 수를 변경하는 방법

Question

Bourbon Neat을 사용하면 omega() mixin과 함께 span-column() mixin을 사용하여 foundation 5의 블록 격자와 비슷한 automatic columns을 만들 수 있습니다. 그러나 미디어 쿼리를 통해 스타일을 공유 할 때 이들은 비참하게 실패합니다. 아래의 예를 살펴 보자 :

.blocks { 
    @include media($iphone) { 
     @include span-column(4); 
     @include omega(3n); 
    } 
    @include media($ipad) { 
     @include span-column(3); 
     @include omega(4n); 
    } 
} 

그것은 행의 마지막 항목에서 마진을 제거하는 n 번째 자식의 위치를 ​​사용하지만, 미디어 쿼리가 발생했을 때 당신의 경우 다른 CSS를 덮어 쓰지 않습니다 오메가가 바뀌고 있습니다. 따라서 첫 번째 미디어 쿼리가 예상대로 작동합니다. 그런 다음 $ipad 쿼리가 트리거되면 nth-child(3n)이 CSS에 남아 있으므로 $ipad 쿼리가 깨집니다. 이 문제를 해결할 방법이 있습니까?

컴파일 된 CSS : 당신이 깔끔한 버번 /이 어떻게 @media 믹스 인 작품에 의존해야 할 것입니다 함께이 접근 방법

.block-grid > li { 
    float: left; 
    display: block; 
    margin-right: 2.68967%; 
    width: 48.65516%; 
} 
.block-grid > li:last-child { margin-right: 0; } 
.block-grid > li:nth-child(2n) { margin-right: 0; } 
.block-grid > li:nth-child(2n+1) { clear: left; } 

@media screen and (min-width: 1024px) { 
    .block-grid > li { 
    float: left; 
    display: block; 
    margin-right: 2.68967%; 
    width: 31.54022%; 
    } 
    .block-grid > li:last-child { margin-right: 0; } 
    .block-grid > li:nth-child(3n) { margin-right: 0; } 
    .block-grid > li:nth-child(3n+1) { clear: left; } 
} 

Answer 1

이 다룰 것 '오메가 리셋'믹스 인이 mixin을 적절한 위치에 재설정하고 다음을 수행하십시오 :

.blocks { 
    @include media($iphone) { 
     @include span-column(4); 
     @include omega(3n); 
    } 
    @include media($ipad) { 
     @include span-column(3); 
     @include omega-reset(3n); //added to reset previous omega value 
     @include omega(4n); 
    } 
} 

Answer 2

. $ipad 그냥 픽셀 값이 그 변수를 사용하여 손으로 미디어 쿼리를 작성하는 것입니다 달성하기 위해 절대 간단한 방법 인 경우, 그래서

.block-grid > li { 
    float: left; 
    display: block; 
    margin-right: 2.68967%; 
    width: 48.65516%; 
} 
.block-grid > li:last-child { margin-right: 0; } 
@media (max-width: 1024px) { 
    .block-grid > li:nth-child(2n) { margin-right: 0; } 
    .block-grid > li:nth-child(2n+1) { clear: left; } 
} 

: 원하는 출력은 다음과 같이 보일 필요가 것입니다 :

.block-grid > li { 
    @include media($iphone) { 
     @include span-column(4); 
    } 
    @media (max-width: $ipad) { 
     @include omega(3n); 
    } 
    @include media($ipad) { 
     @include span-column(3); 
     @include omega(4n); 
    } 
} 

는 new-breakpoint() 함수의 결과는, 당신은 단지 최대 폭을 사용하여 다른 미디어 쿼리 컨텍스트를 (난 그냥 소스/예보고에서 주울 수있는 의해거야 만들어야 있다면 , 이것이 맞지 않다면 나를 용서해야합니다.)

이 수행 http://joshfry.me/notes/omega-reset-for-bourbon-neat/

: 그래서

@mixin omega-reset($nth) { 
    &:nth-child(#{$nth}) { margin-right: flex-gutter(); } 
    &:nth-child(#{$nth}+1) { clear: none } 
} 

을의 오메가를 넣어 원래의 질문에 코드를 해결하기 위해

$smaller-than-ipad: new-breakpoint(max-width 500px 12); // 12 = total columns, optional 

.block-grid > li { 
    @include media($iphone) { 
     @include span-column(4); 
    } 
    @include media($smaller-than-ipad) { 
     @include omega(3n); 
    } 
    @include media($ipad) { 
     @include span-column(3); 
     @include omega(4n); 
    } 
}