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

【问题标题】：Less CSS variable encapsulation and reusable mixins更少的 CSS 变量封装和可重用的 mixin
【发布时间】：2014-07-02 21:14:11
【问题描述】：

任何人都可以提供任何解决方案来组合 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;
    }

}

有没有办法保持变量封装并消除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);
}

【问题讨论】：

似乎 .width 和 .height 在两个模块中做同样的事情，你不能将它们公开并以这种方式使用吗？
在上面的简单示例中是相同的，但实际上我需要能够根据需要重写伪私有 mixin。如果 mixin 名称不是全局的，那就更好了，这样您就不必管理命名空间（也使 mixin 名称保持简短）。因此，例如 .signup-module.width() 不必与 .contact-us.width() 相同。无论如何，下面的解决方案几乎可以解决它。谢谢！
说出你的更新。嗯，我想知道使@textfield-width 不可见的上下文是什么。您的解决方法将起作用（实际上，您甚至不需要重复.module-a，只需.module-a; .width(textfield-width, -20px); 就足够了）但是这样您将无法在同一范围内使用多个模块：如果@ 987654329@ 是不可见的，没有将“模块”暴露给当前范围，那么任何 mixins 都将使用 最后一个调用的模块公开的变量，而不是 mixins 本身的模块（例如，module-a.width 将使用module-b 变量）。
是的，我说得太早了。我正在通过在其他类中以各种顺序调用 mixin 来对其进行更多测试，实际上它确实从其他模块中获取了先前的变量值，因此封装无法正常工作。啊。看来重用mixins对Less中的基本封装方式并不友好。我觉得我又回到了原点。唔。也许现在我能做的最好的就是在每个 .module-a、.module-b 等中重复 mixins。这是我能够保持封装的唯一方法。除非我错过了什么……
不过，您能否举一个导致undefined @textfield-width 的代码示例？对了，你不是用1.7.0以下的Less版本吗？如果是这样，请进行升级，因为在旧版本中存在一些与各种范围的可变可见性相关的已知问题。

标签： css less less-mixins

【解决方案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);
}

【讨论】：