问题
I want to make a function/mixin that will make a color darker if it is already dark but lighter when it is light (normalize/extremeize?)
Is it possible to do this by passing a property name (color, background-color, border-right-color, etc)?
.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);
}
回答1:
This is currently a feature request on less.js github. So look out for it in less.js 1.4.. until then you can hack it like so...
.mixin(@prop, @value) {
Ignore: ~"a;@{prop}:@{value}";
}
Not very nice and you get an extra property but its the only way at the moment.
回答2:
Guarded Mixins should be what you are looking for, however you can not use variables to define properties, only their values. So you can do it like this:
.normalize(@color, @amount) when (lightness(@color) >= 50%)
{
color:lighten(@color, @amount);
}
.normalize(@color, @amount) when (lightness(@color) < 50%)
{
color:darken(@color, @amount);
}
So this:
.class1 {
.normalize(#ddd, 10%);
}
Will output this:
.class1 {
color: #f7f7f7;
}
But you can not actually pass a property name as a variable. This is a limitation of LESS unfortunately, and while I've seen ways around it for things like margin direction, there is not a way to just pass any ol' property using a variable.
回答3:
In the corresponding issue on Less' GitHub there is a workaround suggested by 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) }
Output
.class { color: black; padding-left: 20px;}
Maybe this will do?
回答4:
This feature was added since v1.6.0:
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
Compiles to:
.widget {
color: #0ee;
background-color: #999;
}
See http://lesscss.org/features/#variables-feature-properties
来源:https://stackoverflow.com/questions/10689152/how-to-pass-a-property-name-as-an-argument-to-a-mixin-in-less