关于CSS：将LESS变量名称输出为字符串


Output LESS variable name as string

我正在尝试将变量名引用为content属性中的实际文本字符串，而不是变量的值。

对于上下文，我正在尝试为样式指南设置调色板。颜色定义为变量，然后使用content属性列出。 @rocketRed可以编译为"#ff0048 "，但是如何将@rocketRed编译为" @ rocketRed "？

如果那还不够的话，可能是由于我试图通过一个mixin传递变量而使情况变得更加复杂。否则会破坏目的。

这里是一个例子：

1
2
3
4
5
6
7
8
9
10
@rocketRed:#ff0048;

.mixin(@color) {
  &:before {content:"@color"};
  &:after {content:"@{color}"};
}

.test {
  .mixin(@rocketRed)
}

哪个编译为

1
2
3
4
5
6
.test:before {
  content:"@color";
}
.test:after {
  content:"#ff0048";
}

:before显然不起作用。我真的希望将其编译为：

content:"@rocketRed";

我想问题的一部分是变量自动编译。 @color-> @rocketRed->#ff0048。我需要以某种方式仅引用@color所引用的内容，并通过将其转换为字符串将其停止在此位置。

这是我遇到的最接近的事情，确实不太适用，但是我认为解决方案(如果可能的话)会有些相似：在LESS中使用选择器名称作为变量mixin

我意识到我可能在限制变量的工作方式上有所突破，但有时会突破界限！

相关讨论

不，这根本不可能。如果您确实需要这样的操作，请反向执行(例如，通过将字符串转换为相应的变量值)，例如：

1
2
3
4
5
6
7
8
9
10
@rocketRed: #ff0048;

.mixin(@color) {
  color: @@color;                // variable value
  &:before {content:"@{color}"} // variable name
}

.usage {
    .mixin(rocketRed);
}

或者(如果您希望在代码中添加更多引号)：

1
2
3
4
5
6
7
8
9
10
@rocketRed: #ff0048;

.mixin(@color) {
  color: @@color;            // variable value
  &:before {content: @color} // variable name
}

.usage {
    .mixin("rocketRed");
}

---

假设您出于某些调试/记录目的需要此功能，则可以对其进行优化以仅使用一个伪元素：

1
2
3
4
5
6
7
8
9
10
11
12
@rocketRed: #ff0048;

.mixin(@color) {
    &:before {
        content: %("@%a: %a",
            @color, @@color);
    }
}

.usage {
    .mixin(rocketRed);
}

-> css：

1
2
3
.usage:before {
  content:"@rocketRed: #ff0048";
}
相关讨论