3

我是在 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。

4

2 回答 2

10

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

您必须将 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;
}
于 2013-10-17T10:58:33.623 回答
4

在任何其他元素之外使用包含属性的 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;

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

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

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

然后在块外调用它：

 .sample-mixin(#eeffee);

导致不正确的CSS：

color: #eeffee;

但在块内调用它：

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

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

p {
  color: #eeffee;
}

问：在其他块之外调用mixins是正确的？

A：只有当你的 mixins 只包含块时：

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

然后在块外调用它：

 .sample-mixin(#eeffee);

结果是正确的 CSS：

body {
  color: #eeffee;
}

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

于 2013-10-17T12:19:02.640 回答