Question

我想以类似于MediaQuery概念的方式使用LESS Guarded Mixins，因此声明一个条件，如果经过验证，它包含一组css规则和声明。

目前我编写了这个示例代码：

.color-theme(@color-type) when (@color-type='cold')
{
    color:gren;
}

.color-theme(@color-type) when (@color-type='hot')
{
    color:red;
}

text-container
{ 
  .color-theme('hot'); 
  width:960px;
}

我的目的是编写一组必须在满足特定条件时使用的类，其方式与MediaQueries逻辑非常相似。这行代码运行...但是在这个问题中我应该为每个新的css类重复参数值' hot '。

我想要像

这样的东西

when (@color-type='hot')
{
   body { ... }
   .myclass { ... }
   ...
}

我怎么能得到这个？

Answer 1

这实际上不可能完全是这样的（因为你不能将一个块传递给你正在调用的mixin ......你想要做的就是在Sass中使用@content directive）。您可以在Less中执行的操作是定义一个mixin，它根据传递的@color-type变量输出特定块（冷或热）。

a）具有特定参数的Mixins：

首先，您可以制作常规输出mixin ，但不显示任何内容，无论@color-type是什么（如果调用未定义的块，你不会得到错误）：
```
.show(@color-type) { }
```

然后你定义块（类似于你对媒体的处理方式查询，除了这里你需要额外的mixin调用）：

.show('cold') {
  body {
    color: blu;
  }
  .myclass {
    background: url(cold.png);
  }
}

.show('hot') {
  body {
    color: red;
  }
  .myclass {
    background: url(hot.png);
  }
}

现在您只需要调用mixin 。根据你传递的变量，右边的块将是显示（或者如果没有定义具有该变量的块，那么将没有输出）。例如，现在你可以调用show（），传递一个您之前在某处定义的变量：
```
@color-type: 'hot';

.show(@color-type);
```
或直接
```
.show('hot');
```
和 CSS输出将是：
```
body {
  color: red;
}
.myclass {
  background: url(hot.png);
}
```

b）警卫：

不是使用粒子参数定义mixins（例如.show('hot'){ ... }），而是可以使用保护，如：.show(@color-type) when (@color-type = 'hot') { ... }），或者像这样：.show() when (@color-type = 'hot') { ... }如果定义变量在某个地方，只需要调用mixin .show()来返回相应的块：

.show() when (@color-type = 'cold') {
  body {
    color: blue;
  }
  .myclass {
    background: url(cold.png);
  }
}

.show() when (@color-type = 'hot') {
  body {
    color: red;
  }
  .myclass {
    background: url(hot.png);
  }
}

// setting the variable
@color-type: 'hot';

// calling the mixin
.show();

也许也有兴趣 - 与此主题相关的一些讨论：
Issue #965: Mixins should accept LESS blocks

LESS：像MediaQuery这样的Guarded Mixins

1 个答案:

a）具有特定参数的Mixins：

b）警卫：