Susy Non mobile first

Question

큰 너비에서 모바일까지 Compass Susy를 작동시키는 방법이 있습니까?

파일 크기를 작게 유지하면서 레이아웃의 관점에서 모바일을 가장 먼저 이해하고 전체 데스크톱 버전을 만들고 브레이크 포인트를 사용하면 폭이 좁은 항목을 제거하는 것이 가장 좋을까요?

의견이 있으십니까?

Answer 1

예, 가능합니다. 실제로 모바일 레이아웃의 건물 레이아웃을 사용하는 것이 훨씬 쉽다는 생각 때문에 레이아웃 전에 내용에 대해 생각하게 만듭니다. 최소한의 것부터 시작하여 필요한만큼 각 단계를 추가하는 것이 더 나은 프로세스라고 생각합니다. 즉, Susy는 당신이 좋아하는 프로세스로 작업 할 것입니다. min-width 대신에 media-queries에 max-width를 사용하십시오.

at-breakpoint mixin은 3 부분 인수 : $min $layout $max을 허용합니다. max-only를 제외한 모든 조합을 전달할 수 있습니다. 최소 너비를 늘리는 대신 최대 너비를 줄이는 것과 마찬가지로 모바일 우선과 같은 방식으로 수행하십시오. susy 기본값은 데스크톱 우선 접근을 위해 실제로 설정됩니다. 중단 점을 추가하면됩니다!

.page { 
    @include container; 
    @include at-breakpoint(9 40em) { /* a 9-column grid with max-width of 40em */ } 
    @include at-breakpoint(6 20em) { /* a 6-column grid with max-width of 20em */ } 
}