css - 更少的 CSS 变量封装和可重用的混合

Question

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

例子:

#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 在下面为重用 mixin 提供了一个很好的解决方案，但我认为我遇到了一个变量范围问题，下面的语句返回了一个错误。它说，“变量@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);
}

Answer 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);
}