warunkowe CSS z mniej, w oparciu o zmienną

Question

zmienna może przyjąć procentowe lub px wartości, jak:

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

Jak mogę określić pewien zbiór reguł CSS, jeśli wartość jest w pikselach i inny zestaw reguł, jeśli wartości podano w procentach?

Czy istnieje coś takiego jak

if(isValueInPixels(@some-var)){ 

    // css rules here 


}else{ 

    // other rules here 
} 

?

Answer 1

Myślę, że możesz użyć czegoś, co nazywają Strzeżonymi Mixinami.

Spróbuj coś takiego ...

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

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

Zobacz strzeżony Wstawki w http://lesscss.org/

Answer 2

Jak zauważył Adam Spicer się strzeżony Wstawki są najlepszym rozwiązaniem. Jednak LESS oferuje teraz rozwiązanie do grupowania wielu strażników, co pozwoli na osiągnięcie tego przy pomocy pojedynczego mixina. http://lesscss.org/features/#css-guards-feature

Dla przykładu:

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

Zastosowanie:

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