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

Question

我遇到了像Koala和Prepros(OSX 10.10.5,Yosemite)这样的较少预处理工具的语法问题,其中我用短手十六进制定义的颜色值(例如#fff,#000等)将输出as #fffffff或#000000在最终的.css文件中.

这是我观察到的一个简单例子:

// 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:

速记颜色将保持速记

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

在最新版本中,以下少量代码:[ 试一试 ]

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

会编译到

.container {
  background-color: #fff;
}

注意:如果您使用的是Less编译器的移植版本(比如Less4j或LessPHP),那么您可能还必须检查他们的更改日志以查看他们何时采用此行为(如果他们尚未完成,则提出功能请求)所以).

在所有旧版本中,速记颜色将随时转换为纵向形式

• 颜色不直接分配给属性,而是通过变量完成.
• color变量的值以颜色本身的形式提供,而不是作为字符串.也就是说,该值不包含在引号内(并在打印时转义).

如果无法升级编译器版本,那么避免转换为longhand格式的唯一方法是将变量的值包装在引号中并在输出时转义.这样做会使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()函数转换为颜色对象.我不建议这样做只是为了避免本质上是一个非常小的问题.