如何在less中将属性名称作为参数传递给mixin答案

【问题标题】：How to pass a property name as an argument to a mixin in less如何在less中将属性名称作为参数传递给mixin
【发布时间】：2012-05-21 16:41:22
【问题描述】：

我想制作一个函数/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);
}

【问题讨论】：

标签： less less-mixins

【解决方案1】：

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

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

不是很好，你会得到一个额外的属性，但这是目前唯一的方法。

【讨论】：

并使用中间变量来使用变暗功能。

【解决方案2】：

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

.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' 属性。

【讨论】：

【解决方案3】：

在 Less 的 GitHub 上对应的 issue 中有 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;}

这样可以吗？

【讨论】：

【解决方案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

【讨论】：