2

任何人都可以提供任何解决方案来结合 Less/CSS 的封装和 mixin 重用吗？我试图让我的变量被命名空间封装，但我还没有弄清楚如何为它重用 mixins。

例子：

#signup-module {

    @button-width:      100px; 
    @button-height:     30px;

    @textfield-width:   300px;
    @textfield-height:  20px; 

    .width( @value, @mod:0 ) {
        width: @@value + @mod;
    }

    .height( @value, @mod:0 ) {
        height: @@value + @mod;
    }

}

.home-page-signup-module {

    #signup-module > .width( button-width, -20px );
    #signup-module > .height( button-height, -20px );
    #signup-module > .width( textfield-width );
    #signup-module > .height( textfield-height );

}

问题是当我创建一个新模块时，会重复 width() 和 height() 混合。

#contact-us-module {    

    @button-width:      50px; 
    @button-height:     20px;

    @textfield-width:   300px;
    @textfield-height:  20px; 

    .width( @value, @mod:0 ) {
        width: @@value + @mod;
    }

    .height( @value, @mod:0 ) {
        height: @@value + @mod;
    }

}

有没有办法保持变量封装并消除mixin重复？我想写一次 .width() 和 .height() ，但是 :extend() 在这种情况下似乎不起作用。

更新：2014 年 5 月 15 日

Seven-phases-max 在下面为重用 mixins 提供了一个很好的解决方案，但我想我遇到了一个变量范围问题，下面的语句返回了一个错误。它说，“变量@textfield-width 未定义。”

.home-page-signup-module {
    .module-a.width(textfield-width, -20px);
}

所以我尝试添加.module-a似乎可行的方法。我不是 100% 确定这是否是正确的用法，但它确实修复了错误并返回了正确的值。

.home-page-signup-module {
    .module-a;
    .module-a.width(textfield-width, -20px);
}
4

1 回答 1

1

您可以将共享的 mixin 收集到另一个命名空间/mixin 中，并在您需要的每个“模块”中扩展它，例如：

.shared-stuff() {
    .width(@value, @mod: 0) {
        width: @@value + @mod;
    }

    .height(@value, @mod: 0) {
        height: @@value + @mod;
    }
}

.module-a {
    .shared-stuff();

    @button-width:     100px;
    @button-height:    30px;

    @textfield-width:  300px;
    @textfield-height: 20px;
}

.module-b {
    .shared-stuff();
    @button-width:     200px;
    // etc.
}

// usage:
.home-page-signup-module {
    .module-a.width(button-width, -20px);
    .module-b.width(button-width, +33px);
}
于 2014-05-14T18:33:24.070 回答