爲什麼我在這個較少的語法中出現編譯錯誤？

我已經使用http://www.patternify.com生成了一些背景圖像CSS代碼，並將它們添加到一個名爲backgrounds.less的無文件文件中。當我保存該文件並通過編譯器運行它時，它會給我一個解析錯誤。我似乎無法解決這些錯誤。爲什麼我在這個較少的語法中出現編譯錯誤？

我已經將每個背景定義爲一個變量，並使用@import「backgrounds.less」將文件導入到我的主styles.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;}

任何幫助或解決方案將不勝感激。

謝謝。

來源

2012-10-19 Ali Samii

爲什麼要使用一個@符號？ –

在較少的語法中，@符號定義了一個變量。例如，在其他地方，我有以下代碼： '@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）;' 我沒有任何解析錯誤。所以，我不確定這裏有什麼問題。 –

當然，我的語法可能被誤認爲'@ cramum：rgba（253,255,223,1）;'例如，具有不同的語法。 –

變量可以包含一個值（不是任意的規則）。所以，你可以定義

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

（注意:變量名後），並隨後將

#header { 
    background: @headerbg; 
}

來源

2012-10-19 13:16:57

啊，好的。我現在看到我的錯誤。這解決了我的問題。 Vielen悶悶不樂的Christoph。 –

爲什麼我在這個較少的語法中出現編譯錯誤？

回答

相關問題