如何否決mixin中的LESS變量？

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 個解決方案

解決方案1
0 2019-04-16 16:32:57

如何否決mixin中的LESS變量？

問題描述

1 個解決方案

解決方案1 0 2019-04-16 16:32:57

解決方案1
0 2019-04-16 16:32:57