带有多个参数的 LESS mixins 会引发语法错误答案

【问题标题】：LESS mixins with multiple parameters raises syntax error带有多个参数的 LESS mixins 会引发语法错误
【发布时间】：2013-10-17 10:48:06
【问题描述】：

我是按照 LESS 网站的文档编写的，即 mixins 部分，我认为这可以工作，但会引发语法错误：

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()

我不知道它有什么问题...请帮助...
引用：我在 Windows 8.1 x64 中使用更少的 grunt-contrib-less 和更少的 1.4.2。

【问题讨论】：

标签： css less gruntjs

【解决方案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;

您必须将 mixin 调用包装在 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;
}

【讨论】：

谢谢，它有效。但是有没有更好的方法呢？也许不是使用mixins，我想要的是在一个地方定义所有函数并在另一个地方用不同的参数调用它。
what I want is to define the all the functions in one place and call it in another place with different parameters 正是您现在所拥有的。唯一的问题是您在 在哪里 调用它。 CSS 根本不允许你发出不在块范围内的指令。

【解决方案2】：

使用包含 outside 属性的 mixin 任何其他元素都会导致 CSS 不正确，而您遇到的错误是因为 LESS 编译器想要阻止这种情况。

问：那么我该如何使用我的 mixin？

答：确保您了解什么是 mixin 定义，以及什么是 mixin 调用。

我将使用简化的例子来清楚地解释这一点。

这是混入定义：

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

要使用这样的mixin，你只需像函数一样调用它：

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

Mixin 调用被评估为整个 mixin 内容（评估变量）：

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

问：在其他块外调用mixins不正确？

答：如果你的 mixins 包含至少一个属性：

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

然后在块外调用它：

 .sample-mixin(#eeffee);

导致不正确 CSS：

color: #eeffee;

但在块内调用它：

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

没关系，因为它会产生正确的 CSS：

p {
  color: #eeffee;
}

问：在其他块外调用 mixins 时正确吗？

答：只有当你的混入只包含块：

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

然后在块外调用它：

 .sample-mixin(#eeffee);

生成正确的 CSS：

body {
  color: #eeffee;
}

旁注：在 mixins 中包含块不是一个好的做法，因为它会有效地混淆读者并导致 CSS 内部的耦合度更高。

【讨论】：