The variable can take percentage or px values, like:
@some-var: 50px;
or @some-var: 46%;
How can I define a certain set of CSS rules if the value is in pixels, and a different set of rules if the values is in percentages?
Is there something like
if(isValueInPixels(@some-var)){
// css rules here
}else{
// other rules here
}
?
Create a stylesheet with . less extension and link it in your document using the rel="stylesheet/less" attribute. You are all set and can compose styles within the . less .
Mixins are a group of CSS properties that allow you to use properties of one class for another class and includes class name as its properties. In LESS, you can declare a mixin in the same way as CSS style using class or id selector. It can store multiple values and can be reused in the code whenever necessary.
I think you can use something that they call Guarded Mixins.
Try something like this...
.mixin (@a) when (ispixel(@a)) {
/* ... your pixel specific logic ... */
}
.mixin (@a) when (ispercentage(@a)) {
/* ... your percentage specific logic ... */
}
.coolStuff {
.mixin(50px);
.mixin(50%);
}
See the Guarded Mixins at http://lesscss.org/
As Adam Spicer noted the Guarded Mixins are your best solution. However, LESS now offers a solution to group multiple guards, which will allow this to be accomplished with a single mixin. http://lesscss.org/features/#css-guards-feature
For Example:
.mixin(@a){
& when (ispixel(@a)){
//logic
}
& when (ispercentage(@a)){
//logic
}
}
Usage:
selector{
.mixin(50px);
.mixin(46%);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With