Question

我现在在我的一个项目中使用LESS，我需要为不同的用户创建一些颜色方案。我正在构建门户，并根据需要登录的用户类型来更改颜色方案。

所以在我的mixins.less（我无法修改）文件中，我有：

@color-button-bg: #333;
@color-button-txt: #fff;
@color-button-fs: 1.5rem;
@color-button-fw: 500;
@color-button-hover-pct: 10%;

.base-btn-default(@type: button) {
    background: ~"@{color-button-bg}";
    border: 1px solid ~"@{color-button-bg}";
    color: ~"@{color-button-txt}";
    font-size: ~"@{color-button-fs}";
    font-weight: ~"@{color-button-fw}";
    &:hover, &:focus {
        @color-btn-hover: ~"color-button-bg";
        @color-btn-hover-pct: ~"color-button-hover-pct";
        background: darken(@@color-btn-hover,@@color-btn-hover-pct);
        border-color: darken(@@color-btn-hover,@@color-btn-hover-pct);
        color: ~"@{color-button-txt}";
    }
}

在带有客户端专用mixins的单独文件中，我尝试了以下操作：

/* Override default color with theme-color */
.theme-styling() {
  @color-button-bg: @main-theme-color;
}

最后，我想在我的<body>标签中添加一个类，并根据该类名称设置颜色方案：

body.theme-a {
  #main-theme-color: teal;
  .theme-styling();
}

但是，这似乎不起作用。我认为这与范围界定/惰性评估有关，但是我对LESS的了解还不够丰富，以了解我的错误在哪里。

我为此创建了一个Codepen，它没有单独的文件，并且有点简化形式： https://codepen.io/jewwy0211/pen/JVNZPv

Answer 1

我刚刚玩过您的Codepen。当您在mixin中定义变量时，它确实起作用了，问题在于您然后不在mixin或包含mixin的类中使用该变量。

因此，如果您有2个这样的按钮：

<div class="wrapper one">
  <button>Theme 1</button>
</div>

<div class="wrapper two">
  <button>Theme 2</button>
</div>

您可以在各自的类中调用其特定于主题的变量mixin以获取vars集，但随后必须在同一类中使用vars：

.wrapper.one {
  .theme-styling-1();
  background-color: @color-button-bg;
}
.wrapper.two {
  .theme-styling-2();
  background-color: @color-button-bg;
}

/* Theme Vars */
.theme-styling-1() {
  @color-button-bg: teal;
}
.theme-styling-2() {
  @color-button-bg: red;
}

编辑：这是一个代码笔：https://codepen.io/mmshr/pen/OGZEPy

如何否决mixin中的LESS变量？

1 个答案: