我可以使用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吗？

回答

相关问题