Less 将简写十六进制值转换为完整十六进制值,减少预处理
我遇到了一个语法问题,预处理工具较少,比如考拉和prepos(OSX 10.10.5,约塞米蒂),其中我用简写十六进制定义的颜色值(例如#fff、#000等)将在最终的.css文件中输出为Less 将简写十六进制值转换为完整十六进制值,减少预处理,less,prepros,Less,Prepros,我遇到了一个语法问题,预处理工具较少,比如考拉和prepos(OSX 10.10.5,约塞米蒂),其中我用简写十六进制定义的颜色值(例如#fff、#000等)将在最终的.css文件中输出为#fffffff或#000000 下面是我观察到的一个简单例子: // In variables.less (css-preprocessed/variables.less) @white: #fff; // In styles.less (css-preprocessed/application/less/
#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;
}
请注意,这个问题是最近才出现的。我没有为这些工具增加任何设置。每一个都在开箱即用。这一直是旧版本Less编译器的行为。速记颜色值始终被转换为十六进制长文本值。这已作为v2.5.2版本的一部分修复,如果作为一个版本提供,那么这些值现在将作为简写 发件人: 速记颜色将保持速记 因此,如果您将编译器升级到最新版本,那么这个问题将自动消失 在最新版本中,以下代码较少:[] 将编译为
.container {
background-color: #fff;
}
a {
color-1: #fff;
color-2: #ffffff; /* note how this is converted */
color-3: #fff; /* while this isn't */
}
注意:如果您使用的是Less编译器的移植版本(如Less4j或LESSHPP),那么您可能还必须检查他们的更改日志,以查看他们何时采用了此行为(如果他们还没有这样做,则提出功能请求)
在所有较旧的版本中,无论何时,速记颜色都会转换成正手形式
- 颜色不是直接指定给属性的,而是通过变量指定的
- 颜色变量的值作为颜色本身而不是字符串提供。也就是说,该值不包含在引号内(打印时转义)
@a: #fff;
@b: "#fff";
a{
color-1: #fff;
color-2: @a;
color-3: ~"@{b}";
}
将编译为
.container {
background-color: #fff;
}
a {
color-1: #fff;
color-2: #ffffff; /* note how this is converted */
color-3: #fff; /* while this isn't */
}
您应该注意,这样做会影响要对值执行的任何颜色通道操作,并且需要使用
color()
函数转换为颜色对象。我不建议仅仅为了避免本质上是一个很小的问题而这样做。扩展颜色代码是一个问题吗?另外,仅供参考,还有一些预定义的CSS颜色,如白色
和绿色
。一点也不,但这确实会引起我和我的团队对所做更改的关注。如果有的话。我们以前的项目没有经历过这种观察,也没有将简写的十六进制值打印到styles.css中。扩展颜色代码应该不会有问题。谢谢您的分解。投票赞成并接受了这个答案。