我可以使用mixins在LESS中生成新的mixin嗎？

我正在嘗試使用LESS動態生成一組mixin，這可以幫助我編寫更清潔的媒體查詢代碼。到目前爲止，在我有限的語言知識，我已經把代碼看起來像這樣：我可以使用mixins在LESS中生成新的mixin嗎？

@sizes: xxs, xs, sm, md, lg; 

.mediaQueries(@iterator:1) when(@iterator <= length(@sizes)) { 

    //Extract name 
    @sizeName: extract(@sizes, @iterator); 

    //Attempt to build min-width query 
    [email protected]{sizeName} (@content) { 
     @media (min-width: @[email protected]{sizeName}) { 
     @content(); 
     } 
    } 

    //Attempt to build max-width query 
    [email protected]{sizeName} (@content) { 
     @media (max-width: @[email protected]{sizeName}) { 
     @content(); 
     } 
    } 

    .mediaQueries((@iterator + 1)); 
} 
.mediaQueries();

的目標是有一組混入的，讓我很容易和乾淨地定義爲某些CSS屬性具體斷點如下：

.generic-class { 
    background: black; 
    //Sizes @screen-sm and up 
    .MQ-min-sm({ 
    background: transparent; 
    }) 
}

它不起作用。需要注意的是，我試圖將大小名稱插入到變量名稱中，該名稱然後將該變量的px值輸出到@media查詢中。這是甚麼可能嗎？

否則我的編譯器打破目前的嵌套混入（[email protected]{sizeName} (@content) {）與錯誤的開始：

Potentially unhandled rejection [2] Missing closing ')' in file ../mixins.less line no. 43

是像我想要實現可能嗎？

來源

2016-05-12 styke

第43行的代碼是什麼？ –

第一個嵌套mixin的開始 - '.MQ-min - @ {sizeName}（@content）{' – styke

你有沒有autoprefixer？在谷歌搜索似乎是問題。但是沒有足夠的信息。 –

我認爲最簡單的方法來實現這一點是通過使用一個單一的參數混合，如下所示。這避免了需要所有這些迭代，動態混入創作等

@sizes: xxs, xs, sm, md, lg; 
@screen-xxs: 100px; 
@screen-sm: 200px; 

.MQ(@content, @sizeName, @max-min) { /* get ruleset, size name and min/max as input */ 
    @selector: ~"(@{max-min}-width: @{[email protected]{sizeName}})"; /* form the media selector */ 
    @media @selector { /* use it */ 
    @content(); 
    } 
} 

.generic-class { 
    background: black; 
    .MQ({ 
     background: transparent; 
     }, /* ruleset */ 
     sm, /* screen size */ 
     max /* min/max */ 
); 
}

如果混入對於自己使用，那麼這是所有你所需要的。如果它是作爲圖書館分發的，那麼你可能想在@sizeName和@max-min變量上加上一些警衛來限制無效值。

注：少編譯器總是與這裏插一個問題 - @media (min-width: @[email protected]{sizeName})也（我不知道這是否已得到解決），這就是爲什麼我創建了一個臨時變量。

來源

2016-05-12 11:12:19 Harry

我可以使用mixins在LESS中生成新的mixin嗎？

回答

相關問題