Question

任何人都可以为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（）mixins。

#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;
    }

}

有没有办法维持变量封装并消除混合重复？我想写.width（）和.height（）一次，但是：extend（）在这种情况下似乎不起作用。

更新：2014年5月15日

七阶段 - 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);
}

较少的CSS变量封装和可重用的mixins

1 个答案: