Question

我想制作一个函数/ mixin，如果它已经是暗的话会变暗，但是当它很亮时会变亮（标准化/极化？）

是否可以通过传递属性名称（颜色，背景颜色，边框右色等）来实现此目的？

.normalize(@color, @amount, @prop: "color") when (lightness(@color) >= 50%)
{
    @prop:lighten(@color, @amount);
}
.normalize(@color, @amount, @prop: "color") when (lightness(@color) < 50%)
{
    @prop:darken(@color, @amount);
}

Answer 1

这是目前在less.js github上的功能请求。所以在less.js 1.4中注意它..在那之前你可以这样破解它......

.mixin(@prop, @value) {
    Ignore: ~"a;@{prop}:@{value}";
}

不是很好，你得到一个额外的财产，但它是目前唯一的方式。

Answer 2

Guarded Mixins应该是你想要的，但你不能使用变量来定义属性，只能定义它们的值。所以你可以这样做：

.normalize(@color, @amount) when (lightness(@color) >= 50%)
{
    color:lighten(@color, @amount);
}

.normalize(@color, @amount) when (lightness(@color) < 50%)
{
   color:darken(@color, @amount);
}

所以这个：

.class1 {
    .normalize(#ddd, 10%);
}

将输出：

.class1 {
  color: #f7f7f7;
}

但是你实际上不能将属性名称作为变量传递。不幸的是，这是LESS的限制，虽然我已经看过像边缘方向那样的方法，但是没有办法只使用变量传递任何ol'属性。

Answer 3

在相应的issue on Less'GitHub上有一个cloudhaed建议的解决方法：

.blah ()      { color: black }                 // All blahs
.blah(right)  { padding-right: 20px }          // Right blahs
.blah(left)   { padding-left: 20px }           // Left blahs

@side: left;
.class { .blah(@side) }

输出

.class { color: black; padding-left: 20px;}

也许会这样做？

Answer 4

此功能自v1.6.0起添加：

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

编译为：

.widget {
  color: #0ee;
  background-color: #999;
}

请参见http://lesscss.org/features/#variables-feature-properties

如何将属性名称作为参数传递给mixin in less

4 个答案: