2012-10-19 2 views
1

http://www.patternify.com을 사용하여 일부 배경 이미지 CSS 코드를 생성하고 backgrounds.less라는 .less 파일에 추가했습니다. 파일을 저장하고 컴파일러를 통해 실행하면 구문 분석 오류가 발생합니다. 이 오류를 해결할 수없는 것 같습니다.왜 이렇게 적은 구문으로 컴파일 오류가 발생합니까?

각 배경을 변수로 정의하고 파일을 기본 스타일로 가져옵니다. @import "backgrounds.less"를 사용하는 스타일 시트;

내가 얻을 정확한 오류는 다음과 같습니다

ParseError: Syntax Error on line 1 in /Volumes/Clients/htdocs/gobet2/less/backgrounds.less:1:145 1 @headerbg {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAIElEQVQIHWP8DwQMQHD6yVcGBhDn1OMvIOo/A4wB4gAACZQd0vY42rMAAAAASUVORK5CYII=) repeat;}[0m

(This action was triggered by a change to backgrounds.less)

코드는 다음과 같습니다.

@headerbg {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAIElEQVQIHWP8DwQMQHD6yVcGBhDn1OMvIOo/A4wB4gAACZQd0vY42rMAAAAASUVORK5CYII=) repeat;} 
@navbg {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAIUlEQVQIHWN8+fL5fwYgeP/uEQMTjCEoJMfABBIBMUAAADLvDH2vTm1NAAAAAElFTkSuQmCC) repeat;} 
@subnavbg {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAIElEQVQIHWP8DwQMQHD3zgUGBhDnzu3zIOo/A4wB4gAAA+UdgeoweSoAAAAASUVORK5CYII=) repeat;} 
@footerbg {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAIElEQVQIHWP8DwQMQPDs2TMGBhDn6dOnIOo/A4wB4gAADVod/MNEi1EAAAAASUVORK5CYII=) repeat;} 
@basebg {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQIHWN8+/b5fwYgYAIRIAAAOj4DxOCeCacAAAAASUVORK5CYII=) repeat;} 

모든 도움이나 해결책을 보내 주시면 감사하겠습니다.

감사합니다.

+0

을 사용하여 정의 할 수 있습니다? –

+0

구문이 적기 때문에 @ 기호는 변수를 정의합니다. 예를 들어, 다음 코드가 있습니다. '@lightgrey : rgba (220,219,207,1);' '@salix : rgba (236,255,195,1);' '@cramum : rgba (253,255,223,1);' '@noctis : rgba (23,35,85,1);' '@arancii : rgba (228,127,23,1);' '@rivulus : rgba (136,239,255,1);' '@ lightgrey2 : rgba (233,233,231,1);' 여기에 구문 분석 오류가 없습니다. 그래서 여기에 어떤 문제가 있는지 잘 모르겠습니다. –

+0

물론, 저는 구문에서 '@ cramum : rgba (253,255,223,1);'로 잘못 인식 될 수 있습니다. 예를 들어, 구문이 다릅니다. –

답변

0

변수는 값 (임의의 규칙이 아님)을 포함 할 수 있습니다. 그래서 당신이

@headerbg: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAIElEQVQIHWP8DwQMQHD6yVcGBhDn1OMvIOo/A4wB4gAACZQd0vY42rMAAAAASUVORK5CYII=) repeat; 

이 (변수 이름 다음에 : 참고) 그리고 당신은 @ 기호를 사용하는 이유는 무엇입니까 나중에

#header { 
    background: @headerbg; 
} 
+0

아, 그래. 나는 지금 나의 잘못을 본다. 그게 내 문제를 해결해 줬어. Vielen duck Christoph. –

관련 문제