Come passare un nome di proprietà come argomento a un mixin in meno

Question

Voglio fare una funzione / mixin che farà un colore più scuro se è già scuro ma più leggero quando è leggero (normalizza / estremità?)

È possibile farlo passando un nome di proprietà (colore, sfondo di sfondo, bordo-colore a destra, ecc.)?

.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

Questa è attualmente una richiesta di funzionalità su Less.JS GitHub.Quindi cercalo in meno.js 1.4 .. Fino ad allora puoi hackarlo come così ...

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

.

Non è molto bello e ottieni una proprietà in più ma è l'unico modo al momento.

Answer 2

Mixins custoditi dovrebbero essere ciò che stai cercando, tuttavia non è possibile utilizzare le variabili per definire proprietà, solo i loro valori.Quindi puoi farlo come questo:

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

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

.

Allora questo:

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

.

emetterà questo:

.class1 {
  color: #f7f7f7;
}

.

Ma non puoi effettivamente passare un nome di proprietà come variabile.Questa è una limitazione di meno sfortunatamente, e mentre ho visto i modi intorno ad esso per cose come la direzione del margine, non c'è un modo per passare a qualsiasi proprietà OL 'usando una variabile.

Answer 3

nel corrispondente numero su meno 'GitHub c'è una soluzione alternativa suggerita daCloudhaed:

.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;}

.

Forse questo farà?

Answer 4

Questa funzione è stata aggiunta dal V1.6.0:

@property: color;

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

.

Compili a:

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

.

Vedi http://lesscss.org/features/#Variables-Feature-properties