正确编译具有字体大小的 LESS 文件

【问题标题】：Properly compile a LESS file with font sizes正确编译具有字体大小的 LESS 文件
【发布时间】：2023-03-08 15:55:01
【问题描述】：

我正在尝试修改 Less WordPress 主题，可在 http://jarederickson.com/less-a-free-super-minimal-wordpress-theme/ 获得，这样做涉及更改和重新编译使用 LESS (dev/style.less) 的内置样式表

但我无法正确编译此主题中的 LESS 样式表。当我执行“lessc dev/style.less”时，我得到一个所有字体大小都被弄乱的输出。以下是提供的编译样式表与我能够生成的样式表之间的一些差异：

538,539c521,522
<   font-size: 38px;
<   font-size: 3.8rem;
---
>   font-size: 38pxpx;
>   font-size: 3.8pxrem;
573,574c556,557
<   font-size: 10px;
<   font-size: 1rem;
---
>   font-size: 10pxpx;
>   font-size: 1pxrem;

我对 LESS 真的很缺乏经验，所以我假设这只是我不知道设置环境的东西。

我尝试过通过 Ruby 或 NodeJS 运行的多个版本的 lessc。通过谷歌搜索这个问题，我所能找到的只是一个常用的字体大小混合，它没有出现在这个 Less 文件中；有什么方法可以在我的电脑上安装这个 mixin 吗？

【问题讨论】：

标签： css less

【解决方案1】：

那些奇怪的font-size 单位是.font-size mixin 中单位字符串连接的古老（现在是“反模式”）方法的结果：

font-size: ~"@{px-value}px"; 
font-size: ~"@{rem-value}rem";

显然，当您调用 .font-size 时参数已经具有其单位，例如.font-size(10px); 结果为 font-size: 10pxpx;。好吧，它适用于原始代码，因为与混合使用的 all of the values 是无单位的。无论哪种方式：

解决方案： 正确的添加、删除或更改值单位的方法是unit 函数，即将those two lines in .font-size mixin 更改为：

font-size: unit(@px-value, px); 
font-size: unit(@rem-value, rem);

【讨论】：