Susy Grid 설정의 Rem

Question

Susy를 사용하여 사이트를 구축했지만 그리드가 em에 지정되었지만 문제가 발생하여 rems를 사용하도록 그리드 설정을 변경해야합니다.

는 HTML에 설정

내 기본 글꼴 크기는 16px이다 이것은 Susy 그리드 설정을위한 설정입니다 :

이

$total-columns : 16 
$column-width  : remCalc(51.25px) 
$gutter-width  : remCalc(10px) 
$grid-padding  : remCalc(10px) 
$container-style : magic 

remCalc 기능은 다음과 같습니다

@function remCalc($pxWidth) 
    @return parseInt($pxWidth)/parseInt($base-font-size) * 1rem 

그러나이 컴파일 할 때 내가 얻을 :

(_functions.scss : 0.01031em/rem의 줄 146은 '백분율'에 대해 단위가없는 숫자가 아닙니다.)

rem 또는 기본 그리드 설정을 사용하면 내 문제가 해결됩니다. 나는 1.0.3에서 1.0.8로 Susy를 업데이트했으나 아무런 효과도 없었다.

아이디어가 있으십니까?

Answer 1

이것은 프로젝트의 다른 곳에서 다른 Sass 변수로 유닛을 업데이트함으로써 해결되었습니다. Jesse의 대답은이 문제를 해결하지 못하는 동안 매우 유용하고 유용합니다.

Answer 2

구성이 시도 : <number>가 선호하는 크기이다

// Vertical Rhythm Config 
$rhythm-unit   : rem; 
$base-rhythm-unit  : <number>rem; 
$relative-font-sizing : true; 

// Susy Config 
$column-width : <number>rem; 
$gutter-width : <number>rem; 
$grid-padding : <number>rem; 

. $rhythm-unit은 작동 변수이지만, Compass의 알파 버전으로 이동해야 할 수도 있습니다. Susy 1.0.9뿐입니다.

px에 폴백을 만들 때 rem mixin (Susy에 포함)을 사용할 수 있습니다. 즉이 :

@include rem(height, image-height('image.png')); 

은 당신이 $base-font-size 및 $base-line-height 같은 떠나, 나는 당신이 괜찮을 것 같아요. 이상한 크기 조정을하면 값을 조정할 수 있습니다. susy-grid-background는 아마 당신이 어떤 이상한 것을 또한 통과하는 것을 도울 것입니다.

편집 : 기본 격자 크기에 정수를 사용하고 싶다고 생각합니다. 귀하의 전환은 Susy가 그리드를 생성하는 수학을 수행하는 방법을 어지럽 힙니다.