Bourbon Neat을 사용한 쉬프트 요소

Question

SASS/Bourbon/Neat으로 시작합니다.

나는 3 개의 항목을 가지고 있는데, 모두 3 개의 항목을 차지합니다. 나는 그들 중 2 명을 오른쪽으로 이동시키고 왼쪽에는 1 개를 남기고 싶다. 이것은 내가 사용하고있어 말대꾸/SCSS입니다 :

#mod-header{ 
    background-color: $primaryColor; 
    color: $primaryTextColor; 

    header{ 
     @include outer-container(); 

     .social{ 
      @include shift(9); 
      @include span-columns(3); 
     } 

     .contactDetails{ 
      @include shift(9); 
      @include span-columns(3); 
     } 

     .dealerLogo{ 
      @include span-columns(3); 
     } 

    } 
} 

그러나 이것은 내가지고있어 결과입니다 :

https://jsfiddle.net/2qfm6dnd/

IE. 그것은 .social과 .contact를 두드리고 있습니다 .dealerLogo의 높이만큼 자세히 설명합니다. 어떻게 이런 일을 멈출 수 있습니까?

나는 대답이 매우 간단하다는 것을 알고있다.

Answer 1

기본적으로 Neat은 12 개의 열을 사용합니다. 따라서 첫 번째 요소가 3을 차지하면 9가 남습니다. 설명에 따르면, 나는 열의 4 분의 1을 원하고 두 번째와 세 번째 요소가 뒤따라야한다는 뜻으로 받아들입니다. 내가 틀렸다면 나를 바로 잡아주세요.

왼쪽 9 개의 열이있는 마지막 두 요소는 6 개의 열을 함께 사용합니다 (각각 3 개). Neat shift mixin은 margin-left을 추가하여 요소를 이동합니다. 따라서 두 번째 요소를 3 열 이상으로 이동하면 세 번째 요소가 전혀 이동하지 않아도됩니다!

이 데모를 참조하십시오 : 당신이 정말로 맨 오른쪽 열에로 두 번째 요소 (.social를) 원하는 경우 아래의 세 번째 요소 (.contactDetails)와, https://codepen.io/alexbea/pen/JbZVjV

을, 당신은 이상 social을 이동해야 할 것 6 (3 + 6 + 3)이다. 하지만 Neat은 오른쪽 행을 포함하지만 행의 마지막 요소를 포함합니다. 그것이 omega() 믹스 인이 들어 와서 제거합니다. 혼란스럽고 필요하지 않을 수도 있으므로 link it을 입력하고 Codepen 데모에서이를 보여주는 변형을 추가하십시오.