2012-02-22 3 views
0

올바르게 컴파일하려면 사용자 지정 Compass/Sass 함수를 가져 오는 데 문제가 있습니다. 계속 오류가 발생합니다.Compass/Sass 컴파일에 문제가 있습니다. - Bones Wordpress 테마를 사용하고 있습니다.

error library/scss/mixins.scss (Line 302: Invalid CSS after "...: $font-base) {": expected "}", was "   @if $targe...") 

@import에 대해 Stack Exchange에서 무언가를 읽고있을 가능성이 있습니다. 내가 지금 어떤 도움을 주시면 감사하겠습니다 쓰기로

$columns: 12; 
$column-width: 60px; 
$gutter-width: 20px; 
$max-width: $columns * ($column-width + $gutter-width); 

/********************* 
Variables - Fonts 
*********************/ 
$font-base: 15px; 
$font-base-line-height: 24px; 

@function calc-percent($target, $container) { 
    @return ($target/$container) * 100%; 
} 
@function em($target, $context: $font-base) { 
   @if $target == 0 { @return 0 } 
   @return $target/$context + 0em; 
} 
@function perc($width, $container-width: $max-width) { 
   @return percentage($width/$container-width); 
} 
@function lh($amount: 1, $context: $font-base) { 
   @return em($font-base-line-height * $amount, $context); 
} 
@mixin col($n, $padding: 0px, $border: 0px, $container-width: $max-width) { 
   float: left; 
   margin-right: percentage($gutter-width/$container-width); 
   width:  percentage(($n * ($column-width + $gutter-width) - $gutter-width - ($padding * 2) - ($border * 2))/$container-width); 
   border-width: $border; 
   padding: em($padding, $font-base) percentage($padding/$container-width); 
    position: relative; 
    display: inline; 
} 

.wrap { 
    @include col(10); 
} 

나는이 중이 야 - 나 자신 :

을 알아낼 경우 내가 대답을 게시합니다 : 여기

내 기능입니다 그래서 코드의 일부를 주석 처리하고 (container-width : $ max-width) {} 문제를 일으키는 것이 사용됩니다. 함수 정의에서 변수를 생성하는 것을 좋아하지 않습니다 ... 왜 그런지 모르시겠습니까?

답변

1

좋아, 잘 했어!

나는이 답변이 당신을 도와 줄 것이라고 생각합니다. Compass/Sass Web Devs가 있기 때문에 조금 더 자세히 설명하기로했습니다.

다양한 크기의 장치 (iPhone 수직선, iPhone 가로형, iPad 세로 형, iPad 가로형 등)에 대한 반응 형 웹 사이트를 만들려고합니다. 어쨌든 크기 (481up, 768up 등)에 내 모든 Sass 스타일 시트를 어기 셨습니다. .

내 768up 스타일 시트에 내 시맨틱 그리드 시스템을 포함려고하고 나에게 "모든 기능이 루트 레벨에서 정의되어야합니다"오류를했다. 나는 768up 스타일 시트로 가져 오기 때문에 즉 내 메인 styles.scss @mixins 및/또는 @functions를 import 할 때 혼란 스럽습니다. 768up 자체에 @mixins를 포함 시키려고하면 같은 문제가 발생합니다. 가져올 스타일 시트에 @mixins를 정의하지 마십시오.

솔루션 !!!

은 (768up, 481up) @media 쿼리를 통해 모든 다른 크기의 스타일 시트를 호출하여 style.scss에 시맨틱 그리드 "grid.scss"를 포함, 당신은 그 개인의 @mixins를 사용할 수 있습니다 스타일 시트.

게다가 @mixins가 실제로 사용하지 않는 한 CSS의 모든 공간을 차지하지 않습니다! 따라서 "grid.scss"파일에 10,000 개의 변수, 함수 및 믹스 인을 가질 수 있으며 사용하지 않으면 스타일 시트를 부 풀릴 수 없습니다.

스케치를 포함 시키려고했으나 작동하지 않았습니다. 스케치를보고 싶으면이 부분에 대해 설명하십시오.

동료 개발자에게 유용하기를 바랍니다. 그렇지 않다면, 나는 많은 것을 확실히 배웠다 !!!

관련 문제