레이아웃 및 맵

Question

다양한 중단 점에서 다른 레이아웃을 가진 프로젝트가 있으며 맵 파트를 작동 시키려면 약간의 노력이 필요합니다. 예제를 설정했습니다. http://sassmeister.com/gist/ef02247af9f901fb3897

두 개의지도가 있고 각기 다른 그리드 설정과 디버그 색상이 있습니다. 하지만 몇 가지 문제가 있습니다.

1. 그리드 색상이 변하지 않습니다. 첫 번째지도에는 표시되지 않습니다 (더 넓은 눈금의 경우 노란색과 빨간색이어야 함).
2. 격자 열이 변경되었지만 열 너비 또는 거터 폭이 올바르지 않다고 생각합니다. 예를 들어 하나의 열이 조금 더 짧아야하고 여백이 더 넓지는 않은 경우 그리드 다섯 번째 열보다 클 것 같습니다. 이것은 격자 배경이 충분히 정확하지 않을 수 있습니까?
3. 내가 975 중단 점에 도달하면 거터는 태블릿 맵에서 정의 된 것보다 커야하지만 나타나지는 않습니다.

올바른지도를 다른 중단 점에서 실행하는 데 필요한 것에 대한 아이디어. 다양한 중단 점에서지도를 지우거나 재설정해야합니까?

감사합니다.

Answer 1

그리드 이미지 색상이 어떻게되는지 잘 모르겠습니다. 그건 버그 같아. GitHub에서 문제를 제기 할 수 있습니까?

다른 두 가지 문제는 그리드 설정을 적용하는 방법과 관련이 있습니다. Susy에 관한 한, 그리드는 컨테이너 (명시 적으로 전달하는 컨테이너)에만 사용되고 있습니다. Susy는 DOM이나 요소의 중첩에 대해 아무 것도 모른다. 그리드 설정은 어떤 방식 으로든 아이들에게 전달되지 않는다.

span mixins에 사용할 그리드 설정을 알려주는 몇 가지 방법이 있습니다. 그들을 명시 적으로 전달할 수 있습니다. @include span(last 7 of $tablet);는, 또는 당신은 전체 그룹 포장하는 with-layout 믹스 인을 사용할 수

@include breakpoint(760px) { 
    @include with-layout($tablet) { 
     @include container; 
     .column1 { 
     @include span(5); 
     } 
     .column2 { 
     @include span(last 7); 
     } 
    } 
    } 

을 또는 당신은 정확히에 대한 바로 가기입니다 susy-breakpoint을 사용할 수 있습니다

@include susy-breakpoint(760px, $tablet) { 
    @include container; 
    .column1 { 
     @include span(5); 
    } 
    .column2 { 
     @include span(last 7); 
    } 
    } 

나는에 컨텍스트를 추가 아니에요 컨테이너 또는 스팬을 지정합니다. Susy는이 예제에서 with-layout 및 susy-breakpoint으로 설정되는 기본 전역 컨텍스트를 가정하기 때문입니다.