具有多个参数的LESS mixins会引发语法错误

Question

我写了这个跟随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 }

这是Less:

.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.

Answer 1

你在.mydiv()CSS块的范围之外调用,这会(假设)会输出不正确的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块中包含mixin调用,例如:

.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;
}