多參數LESS混入引發語法錯誤

Question

我寫這篇跟着LESS網站上，混入部分，我認爲會工作的文檔，但提出了一個語法錯誤：

SyntaxError: properties must be inside selector blocks, they cannot be in the 
root. in less/style.less on line 3, column 3: 
2 .bg (@x; @y) { 
3 background-position: unit(@x, px) unit(@y, px); 
4 } 

這裏是減：

.bg (@x; @y) { 
    background-position: unit(@x, px) unit(@y, px); 
} 
.mydiv (@x:0; @y:-52; @width:300px; @height: 155px) { 
    .bg(@x, @y); 
    width: @width; 
    height: @height; 
    opacity: 1; 
} 

.mydiv() 

也是，如果我只是隻用多個參數它會導致同樣的錯誤：

SyntaxError: properties must be inside selector blocks, they cannot be in the 
root. in less/style.less on line 14, column 3: 
13 .mydiv(@width:300px; @height: 155px) { 
14 background-position: 0px -52px; 
15 width: @width; 

減：

.mydiv (@width:300px; @height: 155px) { 
    background-position: 0px -52px; 
    width: @width; 
    height: @height; 
    opacity: 1; 
} 

.mydiv() 

我不知道什麼地方錯了......請幫助...
報價：我使用少用咕嚕-的contrib少，少1.4.2，在Windows 8.1 x64。

Answer 1

您在CSS塊的範圍之外調用.mydiv()，那會（假設）會輸出不正確的CSS。是這樣的：

/* some arbitrary css: */ 
body { font-family: Arial; } 
a { text-decoration: underline; } 

/* your mixin (invalid): */ 
background-position: 0px -52px; 
width: @width; 
height: @height; 
opacity: 1; 

你有一個CSS塊內包裹混入通話，是這樣的：

.bg (@x; @y) { 
    background-position: unit(@x, px) unit(@y, px); 
} 
.mydiv (@x:0; @y:-52; @width:300px; @height: 155px) { 
    .bg(@x, @y); 
    width: @width; 
    height: @height; 
    opacity: 1; 
} 

.myClassThatUsesMyDiv 
{ 
    .mydiv() 

    /* can be with some other directives: */ 
    background-color: transparent; 
} 

Answer 2

使用含混入屬性外任何其他元素將導致不正確的CSS，以及你遇到的錯誤是因爲LESS編譯器想要阻止它。

---

問：那麼如何使用我的mixin？

答：請確保您瞭解什麼是混合定義，什麼是混合調用。

我會用簡單的例子來清楚地解釋這一點。

這MIXIN 定義：

.sample-mixin (@color; @width: 100px) { 
    color: @color; 
    display: block; 
    width: @width; 
} 

要使用這樣一個mixin，你只需要調用它像一個功能：

.sample-mixin(#eeffee); // this line is actual mixin call 

密新的呼叫進行評估，以整個混入內容（與變量評估）：

color: #eeffee; 
display: block; 
width: 100px; 

---

問：在其他塊外面調用mixin不正確？

答：如果您的混入含有至少一個屬性：

.sample-mixin (@color) { 
    color: @color; 
} 

然後調用它外塊：

.sample-mixin(#eeffee); 

結果不正確 CSS：

color: #eeffee; 

但調用它裏面塊：

p { 
    .sample-mixin(#eeffee); 
} 

是還好吧，因爲它會導致正確的CSS：

p { 
    color: #eeffee; 
} 

---

問：當外部的其他塊調用混入是正確的？

答：只有當你的混入含有無非是塊：

.sample-mixin (@color) { 
    body { 
    color: @color; 
    }  
} 

然後調用它外塊：

.sample-mixin(#eeffee); 

結果正確的CSS：

body { 
    color: #eeffee; 
} 

旁註：在mixin中有塊是不是一個好的做法，因爲它可以有效地混淆讀者，並導致CSS內部耦合度更高。