你可以在LESS CSS的mixin中設置一個變量嗎？

Question

我知道LESS沒有if/else結構，而是依賴於保護的mixin語句。儘管如此，它似乎無法在mixin中設置LESS 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

是的，它可以做到。有一個錯誤需要解決。

例更少的代碼

//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

您可以創建一個由類型爲「守衛」一個mixin，例如

.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 */ 
} 

對不起，我沒有時間來試試，所以我可能犯了一個語法錯誤。

編輯已更正的語法。