2013-09-04 2 views
-1

나는 전에 결코 나침반을 사용하지 않고 있었다. 나는 less 파일을 SCSS로 변환하고 나침반을 포함하여 변환 해왔다. 나는 내가 사용하고있는 다른 작업들과 함께 이것을 컴파일하는 불만스런 설정을 가지고있다. Grunt-Contrib-Sass를 사용하여 작동하지 않는 SCSS 수학에 대한 이전 질문은 해결되었습니다. 이제 Compass를 사용하여 SCSS를 컴파일 했으므로 이제까지 수학이 수행되지 않습니다. 여기에 출력되는 무슨의 예입니다 : 그들은이 돌봐 것 같은그란트 - 기여 - 나침반 수학을하지 않는 것

@include border-radius(50%, 50%); 
display: inline-block; 
margin-right: #{10/10}em; 
padding-top: #{5/10}em; 
width: #{25/10}em; 
height: #{19/10}em; 
border: 1px solid $mediumgray; 
color: $mediumgray; 
content: counter(x-counter); 
vertical-align: middle; 
text-align: center; 
font-size: #{10/16}em; 

내가 보는 모든 옵션이 표시되지 않는 :

-webkit-border-radius: 50% 50%; 
-moz-border-radius: 50%/50%; 
border-radius: 50%/50%; 
display: inline-block; 
margin-right: 10/10em; 
padding-top: 5/10em; 
width: 25/10em; 
height: 19/10em; 
border: 1px solid #ababab; 
color: #ababab; 
content: counter(x-counter); 
vertical-align: middle; 
text-align: center; 
font-size: 10/16em; 

이 그것에서 컴파일되는 무슨이다. 누구든지이 문제를 경험 했습니까?

답변

0

SASS의 보간법에 대해 충분히 이해하지 못했습니다. 여기에 문서를 체크 아웃 : http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#interpolation_

다음과 같이 난이있다 할 것입니다 방법을 (관련이없는 코드는 생략) :

margin-right: 10/10 * 1em; 
padding-top: 5/10 * 1em; 
width: 25/10 * 1em; 
height: 19/10 * 1em; 
font-size: 10/16 * 1em; 

이 컴파일

margin-right: 1em; 
    padding-top: 0.5em; 
    width: 2.5em; 
    height: 1.9em; 
    font-size: 0.625em;