Conditional CSS-Regeln mit weniger, bezogen auf variable

Question

Die Variable kann Werte Prozentsatz oder px nehmen, wie:

@some-var: 50px; oder @some-var: 46%;

Wie kann ich einen bestimmten Satz von CSS-Regeln definieren, wenn der Wert in Pixel und ein anderer Satz von Regeln, wenn die Werte in Prozent angegeben sind?

Gibt es so etwas wie

if(isValueInPixels(@some-var)){ 

    // css rules here 


}else{ 

    // other rules here 
} 

?

Answer 1

Ich denke, Sie können etwas verwenden, das sie anrufen Guarded Mixins.

Versuchen Sie so etwas wie dieses ...

.mixin (@a) when (ispixel(@a)) { 
/* ... your pixel specific logic ... */ 
} 
.mixin (@a) when (ispercentage(@a)) { 
/* ... your percentage specific logic ... */ 
} 

.coolStuff { 
.mixin(50px); 
.mixin(50%); 
} 

Siehe Bewacht Mixins bei http://lesscss.org/

Answer 2

Als Adam Spicer die Bewacht bemerkt Mixins die beste Lösung sind. LESS bietet jetzt jedoch eine Lösung, um mehrere Wächter zu gruppieren, was es ermöglicht, dies mit einem einzigen Mix zu erreichen. http://lesscss.org/features/#css-guards-feature

Beispiel:

.mixin(@a){ 
    & when (ispixel(@a)){ 
    //logic 
    } 
    & when (ispercentage(@a)){ 
    //logic 
    } 
} 

Verbrauch:

selector{ 
    .mixin(50px); 
    .mixin(46%); 
}