Susy 2.0 응답 격자

Question

Susy 1에서 Susy 2.0으로 레이아웃을 변환하고 예상보다 다르게 작동하는 몇 가지 작업을 수행합니다. 내가 여기서 뭔가 잘못하고있는거야? 나는 컨테이너가 페이지 너비를 넓히고 너비의 반을 페이지 중간에 오도록하고 싶다. 그 열의 내부에는 등 간격의 3 개의 열 (빨간색, 흰색 및 파란색)이 있습니다. 스크린 샷에 CSS가 어떻게 컴파일되고 있는지 잘 모르겠습니다.

header { 
.fullheight { 
    @include backImage('../images/img_hero_brightspace-homepage.png'); 
    @include container(100%); 
    .hgroup { 
     padding: 150px 0; 
     text-align: center; 
     h3{ 
     @include span(8); 
     display: block; 
     font-weight: $light; 
     } 
    } //hgroup 
    section{ 
     @include container; 
     @include span(6 at 3 of 12); 
     .serviceBox{ 
     @include span(2 of 6); 
     width:100%; 
     height:40px; 
     background-color: white; 
     }//serviceBox 
     .volunteerBox{ 
     @include span(2 of 6); 
     width:100%; 
     height:40px; 
     background-color: blue; 
     }//volunteerBox 
     .partnerBox{ 
     @include span(2 of 6); 
     width:100%; 
     height:40px; 
     background-color: red; 
     }//partnerBox 
    } 
    } //fullheight 
} //header 

내 Susy 템플릿

$susy: ( 
    columns: 12, 
    container: 60em, 
    gutters: 1/4, 
    gutter-position: inside 
); 

내 HTML

<article class="fullheight"> 
    <div class="hgroup"> 
    <h3>Providing help to residents of Greater Cincinnati when challenges invade their lives</h3> 
    </div> 

    <section> 
    <div class="serviceBox"> 

    </div> 
    <div class="volunteerBox"> 

    </div> 
    <div class="partnerBox"> 

    </div>  
    </section>  
</article> 

Answer 1

당신은 여기에 몇 가지 문제가 있지만 주로 당신이 너무 m이 uch 코드. 동일한 요소에 container과 span을 모두 사용하고 싶지는 않습니다 (다른 하나는 다른 요소보다 우선 함). span을 입력 한 다음 CSS width을 설정하는 경우에도 마찬가지입니다. 이 당신이 원하는 레이아웃을 구현하는 방법은 여러 가지 일 수 있지만, 여기에 내가 무엇을보고에 나는 기반으로 권하고 싶습니다 하나 것 : 보조 노트로

section{ 
    @include container(6); 

    .serviceBox{ 
    @include span(2 of 6); 
    height:40px; 
    background-color: white; 
    }//serviceBox 

    .volunteerBox{ 
    @include span(2 of 6); 
    height:40px; 
    background-color: blue; 
    }//volunteerBox 

    .partnerBox{ 
    @include span(2 of 6); 
    height:40px; 
    background-color: red; 
    }//partnerBox 
} 

, 일치하도록 둥지 모든 것을 사스 나쁜 연습 간주 DOM. 중첩은 필요할 때 유용하지만 깊이 사용하면 CSS 선택기가 많이 만들어지고 특이성이 높기 때문에 사용하지 않는 것이 좋습니다.