Question

我一直在使用较少的预处理工具（例如Koala和Prepros（OSX 10.10.5，Yosemite））遇到语法问题，其中我用短手十六进制定义了颜色值（例如#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编译器中的行为。速记颜色值始终转换为速记十六进制值。这已经作为v 2.5.2版本的一部分得到修复，如果它是作为一个提供的话，这些值现在将保持为速记。

来自Less Changelog：

速记颜色将保持简写

因此，如果您将编译器升级到最新版本，则此问题应自动消失。

在最新版本中，以下少量代码：[Try it]

bool Complex::operator==

将编译为

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

注意：如果您使用的是Less编译器的移植版本（比如Less4j或LessPHP），那么您可能还必须检查其更改日志以查看它们何时采用此行为（以及如果尚未提出功能请求，请提出功能请求。）

在所有旧版本中，只要

，速记颜色就会转换为纵向形式

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

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

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

.container {
  background-color: #fff;
}

将编译为

@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 */ }函数转换为颜色对象。我不建议这样做只是为了避免本质上是一个非常小的问题。

短手十六进制值转换为完整十六进制值，较少预处理

1 个答案: