Comment transmettre un nom de propriété comme un argument à un mixin en moins

Question

Je veux faire une fonction / mixin qui rendra une couleur plus foncée s'il est déjà sombre mais plus léger quand il est léger (normaliser / extremeser?)

Est-il possible de le faire en passant un nom de propriété (couleur, couleur arrière-plan, couleur frontière, 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);
}

Answer 1

Ceci est actuellement une demande de fonctionnalité sur moins.js Github.Alors, regardez-le dans moins.js 1.4 .. Jusque-là, vous pouvez le pirater comme si ...

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

Pas très gentil et vous obtenez une propriété supplémentaire, mais c'est le seul moyen pour le moment.

Answer 2

Les mélanges gardées doivent être ce que vous recherchez, mais vous ne pouvez pas utiliser de variables pour définir des propriétés, seules leurs valeurs.Donc, vous pouvez le faire comme ceci:

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

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

donc ceci:

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

sortira ceci:

.class1 {
  color: #f7f7f7;
}

Mais vous ne pouvez pas réellement passer un nom de propriété comme une variable.C'est une limite de moins malheureusement, et bien que j'ai vu des façons autour de cela pour des choses comme la direction de la marge, il n'ya pas de moyen de passer n'importe quelle propriété OL 'à l'aide d'une variable.

Answer 3

dans le problème sur moins de 'github il y a une solution suggérée parCloudhaed:

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

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

sortie

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

Peut-être que cela fera?

Answer 4

Cette fonctionnalité a été ajoutée depuis V1.6.0:

@property: color;

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

compile à:

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

Voir http://lesscss.org/features/#variables-feature-properties