使用 Less mixin 生成样式时从选择器名称中删除引号

Question

我正在处理一个使用旧版本 Less 的遗留项目，并且短期内无法取消它。我正在重构一些重复的主题，我一直在尝试使用 Less mixins 来提供帮助，但我有点卡住了，Less 并不是我在很大程度上使用过的东西。

我定义了以下主题和 mixin：

@theme-green: #91ab7a;
@theme-green-text: #fff;
@theme-yellow: #efdf91;
@theme-yellow-text: #00395d;
@theme-red: #722d3d;
@theme-red-text: #fff;
@theme-brown: #a9a196;
@theme-brown-text: #fff;
@theme-grey: #f3f3f3;
@theme-grey-text: #00395d;
@theme-darkBlue: #00395d;
@theme-darkBlue-text: #fff;
@theme-default: @theme-darkBlue;
@theme-default-text: @theme-darkBlue-text;
@theme-navyBlue: #007db5;
@theme-navyBlue-text: #fff;
@theme-cyan: #00adee;
@theme-cyan-text: #fff;
@theme-lightBlue: #b1e7ff;
@theme-lightBlue-text: #00395d;
@themes: 'green' 'yellow' 'red' 'brown' 'grey' 'darkBlue' 'navyBlue' 'cyan' 'lightBlue' 'default';
@themes-light: 'grey' 'lightBlue';
@themes-dark: 'green' 'yellow' 'red' 'brown' 'darkBlue' 'navyBlue' 'cyan' 'default';
@theme-count: length(@themes);

.createThemes(@theme-count);

.createThemes(@n, @i: 1) when (@i =< @n) {
@theme : extract(@themes,@i) ;
  .dashboard-@{theme} {
    background-color: ~'@{theme-@{theme}}' ;
    color: ~'@{theme-@{theme}-text}';
  }
  .createThemes(@n, (@i + 1));
}

这是输出：

.dashboard-'green' {
  background-color: #91ab7a;
  color: #fff;
}
.dashboard-'yellow' {
  background-color: #efdf91;
  color: #00395d;
}
.dashboard-'red' {
  background-color: #722d3d;
  color: #fff;
}
.dashboard-'brown' {
  background-color: #a9a196;
  color: #fff;
}
.dashboard-'grey' {
  background-color: #f3f3f3;
  color: #00395d;
}
.dashboard-'darkBlue' {
  background-color: #00395d;
  color: #fff;
}
.dashboard-'navyBlue' {
  background-color: #007db5;
  color: #fff;
}
.dashboard-'cyan' {
  background-color: #00adee;
  color: #fff;
}
.dashboard-'lightBlue' {
  background-color: #b1e7ff;
  color: #00395d;
}
.dashboard-'default' {
  background-color: #00395d;
  color: #fff;
}

这几乎是我想要的，但由于在生成的选择器中引用了主题名称，例如，我应该看到 dashboard-navyBlue 而不是 dashboard-'navyBlue'。我怎样才能调整 mixin 以删除这些引号？

Answer 1

经过一些修改，我找到了以下可行的解决方案：

@theme-green: #91ab7a;
@theme-green-text: #fff;
@theme-yellow: #efdf91;
@theme-yellow-text: #00395d;
@theme-red: #722d3d;
@theme-red-text: #fff;
@theme-brown: #a9a196;
@theme-brown-text: #fff;
@theme-grey: #f3f3f3;
@theme-grey-text: #00395d;
@theme-darkBlue: #00395d;
@theme-darkBlue-text: #fff;
@theme-default: @theme-darkBlue;
@theme-default-text: @theme-darkBlue-text;
@theme-navyBlue: #007db5;
@theme-navyBlue-text: #fff;
@theme-cyan: #00adee;
@theme-cyan-text: #fff;
@theme-lightBlue: #b1e7ff;
@theme-lightBlue-text: #00395d;
@themes: 'green' 'yellow' 'red' 'brown' 'grey' 'darkBlue' 'navyBlue' 'cyan' 'lightBlue' 'default';
@themes-light: 'grey' 'lightBlue';
@themes-dark: 'green' 'yellow' 'red' 'brown' 'darkBlue' 'navyBlue' 'cyan' 'default';
@theme-count: length(@themes);

.createThemes(@theme-count);

.createThemes(@n, @i: 1) when (@i =< @n) {
@theme : extract(@themes,@i) ;
@selector: ~'dashboard-@{theme}';
  @{selector} {
    background-color: ~'@{theme-@{theme}}' ;
    color: ~'@{theme-@{theme}-text}';
  }
  .createThemes(@n, (@i + 1));
}

使用 Less mixin 生成样式时从选择器名称中删除引号

Removing quotes from selector names when generating styles with Less mixin

css

less