quy tắc CSS có điều kiện với ít hơn, dựa trên biến

Question

Biến thể lấy tỷ lệ phần trăm hoặc px giá trị, như:

@some-var: 50px; hoặc @some-var: 46%;

Làm thế nào tôi có thể định nghĩa một tập hợp các quy tắc CSS nếu giá trị là bằng pixel và một bộ quy tắc khác nếu các giá trị bằng tỷ lệ phần trăm?

Có cái gì đó như

if(isValueInPixels(@some-var)){ 

    // css rules here 


}else{ 

    // other rules here 
} 

?

Answer 1

Tôi nghĩ bạn có thể sử dụng thứ gì đó mà họ gọi là Hỗn hợp được bảo vệ.

Hãy thử một cái gì đó như thế này ...

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

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

Xem người gác mixins tại http://lesscss.org/

Answer 2

Như Adam Spicer ghi nhận người gác mixins là giải pháp tốt nhất của bạn. Tuy nhiên, bây giờ LESS cung cấp một giải pháp để nhóm nhiều bảo vệ, điều này sẽ cho phép điều này được thực hiện với một bản mixin duy nhất. http://lesscss.org/features/#css-guards-feature

Ví dụ:

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

Cách sử dụng:

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