2013-10-31 3 views
0

내가 나침반의 글꼴 얼굴 SASS로이 CSS를 변환하려고() 믹스 인은 :@include와 Compass/SASS 구문 오류 font-face();

@font-face { 
    font-family: 'PT Sans'; 
    src: url('../fonts/PTSans/PTS55F_W.eot'); /* IE9 Compat Modes */ 
    src: url('../fonts/PTSans/PTS55F_W.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
    url('../fonts/PTSans/PTS55F_W.eot#iefix') format('woff'), /* Modern Browsers */ 
    url('../fonts/PTSans/PTS55F_W.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('../fonts/PTSans/PTS55F_W.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

이 내가 입수 한 것입니다 :

@import "../compass/css3"; 
@include font-face("PT Sans", font-files('../fonts/PTSans/PTS55F_W.eot', '../fonts/PTSans/PTS55F_W.eot#iefix', '../fonts/PTSans/PTS55F_W.ttf', '../fonts/PTSans/PTS55F_W.svg#svgFontName')); 

하지만이 구문 오류 :

Syntax error: Invalid CSS after " ": expected "{", was "@include font-f..." 

내가 멍청한 간단한 구문 오류라고 가정합니다.하지만 실생활에서 볼 수는 없습니다.

무엇이 누락 되었습니까?

답변

1

나침반을 사용하여 .scss로 저장하면 게시 한 코드가 올바르게 컴파일됩니다. http://codepen.io/MariusRumpf/pen/oHDLh

+0

그럼 내가 잘못 내 워크 플로우를 설정 한 생각 :
당신은 여기

@import "compass/css3";

에 첫 번째 줄을 변경 변경해야 할 수도 있습니다 당신의 코드로 동작하는 예제입니다. 나는 컴퍼스가 제대로 작동하도록 할 수 없었기 때문에 필자는 필요한 디렉토리 (/ compass/css3)를 다운로드하고 내가 호출하는 곳 위에 디렉토리를 두었습니다. @include border-radius()와 다른 것을 포함하는 다른 파일에서는 작동하지만 font-face()에서는 작동하지 않는 것 같습니다. –

+0

나침반을 올바르게 설치 한 경우에는 필요하지 않습니다. 나침반 웹 사이트 [Compass Website] (http://compass-style.org/install/)에서 설치 자습서를 찾을 수 있습니다. 루비를 설치하는 것만 큼 간단해야합니다 (Mac은 미리 설치되어 있습니다. Windows는 [Rubygem Installer] (http://rubyinstaller.org/downloads/)에서 가장 쉽습니다). 그런 다음'gem update --system'과'gem 다음에 나침반 설치. 그런 다음 프로젝트 폴더를 탐색하고'compass create '다음에'compass compile '을 입력하십시오. 어디서 붙어 있니? –