재사용 가능한 재사용 가능한 열

Question

나는 Susy 주위에 머리를 감싸려고 노력하고있다. 나는 그것을 좋아할 것이라고 생각한다. 더 많이 작업해야합니다. 기본적으로 사이트 전체에서 사용할 수있는 재사용 가능한 열을 만들려고합니다. 나는 Foundation 그리드를 사용하지 않을 것이므로 아마도이 권리에 대해 생각하지 않을 것입니다.

해당 열을 타겟팅 할 수 있어야합니다. 칼럼 2 또는 6과 같은 클래스로 우리 div를 채우면 안된다고 말하는 몇 가지 기사를 읽었습니다. 내가 예상 한대로 말하지 않으면 div를 어떻게 타겟팅하는지 보지 못했을 것입니다.

아래 코드는 작동하지만 매우 Susy입니까? 올바른 접근 방식입니까? 12 열 너비 모두에 대해 비슷한 규칙을 만들어야합니다. 나는 그 칼럼을 어기 길 바라는 방법을 정면으로 결정해야 할 것입니다. 스팬 6 열을 중간까지 6 스팬 또는 스팬 12로 바꿔야합니다.이 규칙은 앞쪽으로 결정해야합니다.

이것이 올바른 방법이라면. 어떤 도움, 지침 또는 포인터를 주시면 감사하겠습니다.

HTML

<div class="row"> 
    <div class="column-6"> 
     <div class="column-2"></div> 
     <div class="column-2"></div> 
     <div class="column-2"></div> 
     <div class="column-2"></div> 
     <div class="column-2"></div> 
     <div class="column-2"></div> 
    </div> 
    <div class="large-6"> 
     <!-- Large image goes here --> 
    </div> 
</div> 

SUSY SASS

$susy: (
    columns: 12, 
    gutters: 1/4, 
    container: 64em, 
    global-box-sizing: border-box, 
); 

$medium: 30em; 
$large: 64em; 

.column-2 { 
    @include span(12 last); 

    @include breakpoint($medium) { 
     @include span(6); 
     &:nth-child(2n) { 
      @include last; 
     } 
    } 

    @include breakpoint($large) { 
      @include span(2); 
      &:nth-child(2n) { 
       @include span(2); 
      } 
     &:last-child { 
      @include last; 
     } 
    } 
} 

.column-6 { 
    @include span(12 last); 

    @include breakpoint($medium) { 
     @include span(12); 
     &:nth-child(2n) { 
      @include last; 
     } 
    } 
} 

Answer 1

당신이 올바른 생각을 가지고있다. Susy는 Foundation과 Bootstrap과 다르다는 점에서 우리가 Sass에서 응답을 선언한다는 점에서 "large-3 pull .."과 같은 클래스로 html을 작성한다는 점에서 다르다.

나는 일반적으로 "class-3 pull- "주 콘텐츠"와 같은 그것 이외에 그것은 올바른 접근법처럼 보입니다.

@include span(12 last); 

전체 너비에 걸쳐 있으므로 여기에 마지막으로 지정할 필요가 없습니다.

@include full; 

은 아마 더 적합 할 것인가, 아니면 그냥

@include span(); 

설정에 정의 된 사용자의 컬럼에 기본값으로합니다.