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

时间:2014-05-13 18:20:58

标签: css less

我试图修改http://jarederickson.com/less-a-free-super-minimal-wordpress-theme/提供的Less WordPress主题,这样做涉及更改和重新编译使用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?

1 个答案:

答案 0 :(得分:0)

那些奇怪的font-size单位是.font-size mixin中单位字符串连接的古老(现在是#34;反模式&#34;)方法的结果:

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);