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

你在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块中包含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;
}

Answer 2

使用包含外部属性的mixin将导致不正确的CSS，并且您遇到的错误是因为LESS编译器想要阻止它。

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

答：确保你理解什么是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是否正确？

答：只有当你的mixins包含除了阻止之外的其他内容时

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

然后在阻止之外调用它：

 .sample-mixin(#eeffee);

结果正确的CSS：

body {
  color: #eeffee;
}

旁注：在mixins中设置块是不是一个好习惯，因为它可以有效地混淆读者并导致CSS内部更高的耦合。

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

2 个答案: