LESS CSS의 mixin에서 변수를 설정할 수 있습니까?

Question

저는 LESS가 if/else 구조를 가지고 있지 않고 대신 guarded mixin 문에 의존한다는 것을 알고 있습니다. 그것은 mixin 내부에 덜 CSS 변수를 설정할 수있는 것으로 보이지 않습니다.

누구나 내가 어떤 효과를 구현할 수있는 방법을 알고 있습니다.

if(ispercentage(@height) { 
    @height: "1024px"; 
} 

// Calculations dependent on @height 
@textAreaHeight = 0.5 * @height; 
@buttonHeight = 0.2 * @height; 

나는 등 여러 가지 다른 유래 질문을 검토 한 : LESS CSS - Setting variable within mixin

Answer 1

예, 가능합니다. 한 번 해결해야 할 버그가있었습니다.

예 LESS 코드

//Set up guarded mixins 
.setHeight(@h) when (ispercentage(@h)) { 
    @height: 1024px; 
} 

.setHeight(@h) when not (ispercentage(@h)) { 
    @height: @h; 
} 

//set up main height 
@mainHeight: 50%; 
body { height: @mainHeight;} 

//call it by itself to make global 
//.setHeight(@mainHeight); <-this failed (appears to be a bug) 
.setHeight(50%); // <-this worked 

.subsection { height: @height; /* just to show it is setting it */} 

//use it for other globals 
@textAreaHeight: 0.5 * @height; 
@buttonHeight: 0.2 * @height; 

textarea { height: @textAreaHeight} 
button { height: @buttonHeight} 

//override it locally 
body.fixedHeight { 
    .setHeight(300px); 
    @textAreaHeight: 0.333 * @height; 
    height: @height; 
    textarea { height: @textAreaHeight} 
} 

예 CSS의 출력은

body { 
    height: 50%; 
} 
.subsection { 
    height: 1024px; /* just to show it is setting it */ 
} 
textarea { 
    height: 512px; 
} 
button { 
    height: 204.8px; 
} 
body.fixedHeight { 
    height: 300px; 
} 
body.fixedHeight textarea { 
    height: 99.9px; 
} 

Answer 2

당신은 종류에 따라 "보호"하는 믹스 인, 예를 만들 수 있습니다

.doHeightSet(@height) when ispercentage(@height) { 
    .doheightSet(1024px) 
} 

.doHeightSet(@height) when not ispercentage(@height) { 
    // Calculations dependent on @height 
    @textAreaHeight: 0.5 * @height; 
    @buttonHeight: 0.2 * @height; 

    /* use variables here */ 
} 

죄송합니다.이 기능을 사용해 볼 시간이 없으므로 구문 오류가있을 수 있습니다.

편집 수정 된 구문