분리 - 스팬이있는 행의 너비가 동일한 요소 정의 방법

Question

Singularity를 ​​사용하여 아직 달성하지 못했던 한 가지가 있습니다. 순간 나는 float에서 분리 출력 스타일로 전환하고 그리드 및 격리 스팬을 사용하려고합니다. 그러나 내가 재현 할 수없는 한 가지 패턴이 있습니다. 더 우아한 방법이 있는지 확실하지 않습니다. float 출력의 경우 지금까지 다음 설정을 사용했습니다.

<div class="floater"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

@import 'compass'; 
@import 'singularitygs'; 
$grids: 16; 
$gutters:0.25; 
$output: 'float'; 

.floater div 
{ 
    background-color:red; 
    height:10em; 
    @include float-span(4); 
    &:nth-child(4n) { 
     @include float-span(4, 'last'); 
    } 
} 

너비가 동일하며 옆에 정렬 된 4 개의 상자로 연결됩니다. 그러나 분리 - 스팬/아이 솔 레이션 출력으로 동일한 결과를 얻는 방법. 내가

<div class="isolator"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

@import 'compass'; 
@import 'singularitygs'; 
$grids: 16; 
$gutters:0.25; 
$output: 'isolation'; 

.isolator div 
{ 
    background-blue; 
    height:10em; 
    @include isolation-span(4, 1, 'right', $gutter: .25); 
    &:nth-child(4n) { 
     @include isolation-span(4, 13, 'right', $gutter: .25); 
    } 
} 

을하려고하면 내가 모든 "열"를 작성해야 수행합니다 n 번째 자녀와 분리 - 스팬 (첫 번째와 마지막 상자가 표시됩니다 플로트 예에서 n 번째 아이 사촌) 포함 ? 아니면 위의 float 예제와 같은 더 짧은 방법이 있습니까? 안부 인사 랄프

Answer 1

각 항목을 작성해야합니다. isolation 출력 방법은 항목을 눈금의 열 위치에 배치합니다. 기술적으로 말하자면, float 출력 방법을 사용하는 것은 사실 float 및 symmetric 격자가 결합 된 행복한 특수 효과의 부산물이며 이러한 변수 중 하나를 변경하면 변경됩니다.

여기서 일어나는 일은 대칭 격자로 각 항목의 너비가 동일하므로 한 열을 다른 열로 바꿀 수 있다는 것입니다. float을 사용하면 놓은 각 열이 왼쪽에있는 항목에 맞 춥니 다 (ltr). 이 두 속성을 결합하면 float에 항상 span을 정의 할 수 있지만 첫 번째 열에서 항상 시작되지만 대칭 그리드에서 열을 교환 할 수 있기 때문에 어떤 위치에 나타나게 할 수 있습니다. 그런 다음이를 활용하여 이점을 누릴 수 있습니다. 이 동작은 실제로 float 출력 스타일의 정신 모델과 isolation 출력 스타일의 정신 모델 (위에 언급 한 것처럼 항목을 열 위치에 신중하게 배치 함) 간의 핵심 차이입니다.