简写十六进制值转换为完整的十六进制值，减少预处理

Question

我在使用像 Koala 和 Prepros (OSX 10.10.5, Yosemite) 这样的 Less 预处理工具时遇到语法问题，其中我用简写十六进制定义的颜色值（例如#fff、#000 等）将在最终的 .css 文件中输出为 #fffffff 或 #000000。

这是我观察到的一个简单示例：

// In variables.less (css-preprocessed/variables.less)
@white: #fff;

// In styles.less (css-preprocessed/application/less/styles.less)
@import '../../variables.less';
.container {
    background-color: @white;
}

// In styles.css (css-preprocessed/application/css/styles.css)
.container {
    background-color: #ffffff;
}

请注意，这个问题是最近才出现的。我没有为这些各自的工具增加任何设置。每个都是运行开箱即用。

Answer 1

这一直是旧版 Less 编译器的行为。 shorthand 颜色值总是被转换为普通的十六进制值。这已作为 v 2.5.2 版本的一部分得到修复，如果它作为一个提供，值现在将保持为 shorthand。

From Less Changelog:

Shorthand colors will stay shorthand

所以，如果您将编译器升级到最新版本，那么这个问题应该会自动消失。

在最新版本中，Less代码如下：[Try it]

@white: #fff;
.container {
  background-color: @white;
}

将编译为

.container {
  background-color: #fff;
}

注意：如果您使用的是 Less 编译器的移植版本（例如 Less4j 或 LessPHP），那么您可能还必须检查它们的更改日志以查看此行为何时发生被他们采用（如果他们还没有这样做，则提出功能请求）。

在所有旧版本中，shorthand 颜色会在任何时候

转换为手写形式

颜色未直接分配给属性，而是通过变量分配。
颜色变量的值作为颜色本身而不是字符串提供。也就是说，该值未包含在引号中（并在打印时转义）。

如果您无法升级编译器版本，那么避免转换为普通格式的唯一方法是将变量值用引号引起来并在输出时转义。这样做会使 Less 编译器将其视为字符串并按原样输出值。

在旧版本中，以下Less代码：

@a: #fff;
@b: "#fff";
a{
  color-1: #fff;
  color-2: @a;
  color-3: ~"@{b}";
}

将编译为

a {
  color-1: #fff;
  color-2: #ffffff; /* note how this is converted */
  color-3: #fff; /* while this isn't */
}

您应该注意，这样做会影响您要对值执行的任何颜色通道操作，并且需要使用 color() 函数转换为颜色对象。我不建议这样做只是为了避免本质上是一个非常小的问题。

简写十六进制值转换为完整的十六进制值，减少预处理

Short-hand hexadecimal value converted to full hexadecimal value, Less preprocessing

less

prepros