css - 带有多个参数的 LESS mixin 会引发语法错误

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 }

这是少:

.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

您在 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;
}