更少的CSS变量封装和可重用的mixin

有谁能提供将封装和mixin重用结合起来的解决方案来减少/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 Phase max在下面为重用mixin提供了一个很好的解决方案，但我认为我遇到了一个变量范围问题，下面的语句返回了一个错误。它说，“变量@textfield width未定义。”

所以我尝试添加

.module-a

，这似乎很有效。我不能100%确定这是否是正确的用法，但它确实修复了错误并返回了正确的值

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

---

您可以将共享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);
}

---

看起来.width和.height在这两个模块中的作用是一样的，难道你不能将它们公开并以这种方式使用吗？在上面的简单示例中，它们是一样的，但实际上我需要根据需要重写伪私有混合的能力。如果mixin名称不是全局的，则更好，这样您就不必管理名称空间（保持mixin名称简短）。因此，.signup module.width（）不必与.contact-us.width（）相同。无论如何，下面的解决方案基本上解决了这个问题。谢谢说你的最新情况。嗯，我想知道是什么背景使得

@textfield width

不可见。您的变通方法将起作用（实际上，这样您甚至不需要重复

.module-a

，只要

.module-a；.width（textfield width，-20px）；

就足够了），但这样您就不能在同一范围内使用多个模块：如果

@textfield width

不可见，而不暴露“模块”对于当前范围，则任何mixin都将使用上次调用的模块公开的变量，而不是mixin本身的模块（例如，

module-a.width

将使用

module-b

变量）。是的，我说得太早了。我通过调用其他类和不同顺序的mixin对它进行了更多的测试，实际上它从其他模块中提取了前面的变量值，因此封装无法正常工作。啊。看来重用mixin与基本的封装方法不太友好。我觉得我又回到了原点。嗯。也许现在我能做的最好的事情就是在每个模块中重复混合。模块a，模块b，等等。这是我能够保持封装的唯一方法。除非我遗漏了什么……但是，你能给出一个导致

未定义@textfield width

的代码示例吗？顺便问一下，你不使用低于1.7.0的版本吗？如果是这样，请进行升级，因为在旧版本中存在一些与各种作用域的可变可见性相关的已知问题。

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