Susy-breakpoint와 고정 홈통이있는 서스펜션 그리드

Question

나는 Susy를 사용하기 시작했고 그 기능에 매우 감동했습니다. 나는 4 개 미디어 쿼리가 어디 순간 나는 웹을 만드는거야 : 작은 지난 $에 대한

$mobile: 767px; 
$tablet: 768px; 
$small: 960px; 
$large: 1200px; 

을 대형 $ 나는 픽셀의 고정 폭이 두 개의 열과 10px 홈통을 갖고 싶어. 나는 모든 브라우저에서 그 결과가 동일하게 보일 것이라고 확신하고 싶습니다. 고정 colomnus에 대한 그래서

내가 사용 susy-중단

@include susy-breakpoint($small, 24 1/1.5 split) { 
    .container { 
     @include container($small); 
    } 
    .main{ 
     .navigationWrap{ 
      @include span(24); 
     } 
     .articleWrap { 
      @include span(668px); 
     } 
     .advertisment { 
      @include span(240px); 
      .advBanner{ 
       float: right; 
      } 
     } 
    } 

} // END of 960px mq 

@include susy-breakpoint($large, 24 1/1.5 split) { 

    .container { 
     @include container($large); 
    } 

    .main{ 
     .navigationWrap{ 
      @include span(24);//span(4); 
     } 
     .articleWrap { 
      @include span(900px); 
     } 
    } 

} // END of 1200px mq 

그래서, 내 주요 질문 :하지 % 고정 홈통을 할 수있는 방법과 가장 좋은 방법이 무엇인지는 (같은 1/1.5)보다 제어권을 가지고하는 격자?

아무도 대답하지 않으므로 나는 고정 거터와 결절을 얻기 위해 "내 자신의 길"을 취했다.

설정은 다음과 같습니다

$susy: (
    columns: 24, 
    column-width: 40px, 
    gutter-width: 10px, 
    grid-padding: 10px, 
    gutter-position: split, 
    global-box-sizing: content-box, 
    math: static 
); 

및 주요 SCS들 :

//from 960px to 1200 
@include breakpoint($small) { 
    .container { 
     @include container($small); 
    } 
    .header{ 
     .header-logoWrap{ 
      @include span(242px); 
     } 
     .header-bannerWrap { 
      @include span(678px); 
      img { 
       float: right; 
      } 
     } 
    } 
    .main{ 
     .navigationWrap{ 
      @include span(930px); 
     } 
     .articleWrap { 
      @include span(670px); 
     } 
     .advertisment { 
      @include span(250px); 
      .advBanner{ 
       float: right; 
      } 
     } 
    } 

} // END 960px to 1200 

// from 1200 final 
@include breakpoint($large) { 
    .container { 
     @include container($large); 
    } 
    .header{ 
     .header-logoWrap{ 
      @include span(242px); 
     } 
     .header-bannerWrap { 
      @include span(918px); 
      img { 
       float: right; 
      } 
     } 
    } 
    .main{ 
     .navigationWrap{ 
      @include span(1170px); 
     } 
     .articleWrap { 
      @include span(910px); 
     } 
     .advertisment { 
      @include span(250px); 
      .advBanner{ 
       float: right; 
      } 
     } 
    } 
} // END of 1200px mq 

그러나 주요 질문은 여전히 ​​열려 : - 무슨 그리드 및 배수구를 해결 한 수있는 가장 좋은 방법입니다? 내가 제시 한 코드에서

, 나는 (PX)

범위를 사용하고 어떻게해야합니까 설정 나는 %

에 colums와 스팬을 사용하지 말아 경우 $susy

열 : 24, 열 너비 : 40px,

Answer 1

설정 맵은 susy1과 s usy2 용어. 대부분의 설정은 Susy에 의해 무시되고 있습니다.

$susy: (
    columns: 24, 
    column-width: 40px, 
    gutters: 10px/40px, 
    gutter-position: split, 
    global-box-sizing: content-box, 
    math: static 
); 

gutters 설정은 항상 상대적이지만, 출력이되지 않습니다 - 당신이 static 수학을 사용하고 있기 때문에 :이 당신이 원하는 생각합니다. 유체 그리드에 정적 홈이있을 수도 있지만 다른 문제입니다. gutter-width 또는 가장자리에서 grid-padding', so those have been removed. Split gutters will leave you with half-gutter padding on the grid ( 5px ). If you want a full 10px`라고 더 설정은 같은 것을 할 수 없습니다 :

.container { 
    padding: 0 gutters(); 
}