问题描述
在使用 LESS 编写 CSS 样式的过程中，有时候会遇到以下报错信息：
Error: pixel or percentage expected on line X in file.less
这个报错信息的意思是在 LESS 编译的过程中，解析器在某一行代码中遇到了一个不符合要求的单位或者数值类型，例如在需要输入像素或百分比的地方输入了一个字符串或者一个无单位的数值。
这个问题可能会发生在 LESS 编译的过程中的任何一个阶段，例如在使用 lessc 命令行工具编译 LESS 文件，或者在使用 Gulp、Webpack 等构建工具编译 LESS 文件的过程中。
解决方式
检查代码
当遇到这个问题时，首先需要检查代码中是否存在不符合要求的单位或者数值类型。例如，在需要输入像素或百分比的地方输入了一个字符串或者一个无单位的数值。
以下是一些常见的错误示例：
-- -------------------- ---- ------- -- -------------------------- ---- - ------ ---- - -- ------------------------- ---- - ------ ------ ------- ---- - -- ----------------------- ---- - ------ ------ ------- ------- -
在检查代码的过程中，可以使用 LESS 的内置函数 unit() 来获取一个数值的单位，例如：
// 获取一个数值的单位 @width: 100px; @unit: unit(@width); // @unit 的值为 "px"
检查变量
另外，如果在代码中使用了变量，也需要检查变量的值是否符合要求。例如，如果一个变量的值是一个字符串或者一个无单位的数值，那么在使用这个变量的地方也会出现上述报错信息。
以下是一个错误示例：
// 错误示例：在变量的值中包含了一个字符串
@font-size: 16px;
@font-family: "Arial";
.text {
font: @font-size @font-family;
}在这个示例中，变量 @font-family 的值是一个字符串，因此在使用这个变量的地方也会出现上述报错信息。
使用 calc() 函数
如果在代码中需要进行一些复杂的数学运算，例如计算两个值的和或者差，可以使用 LESS 的内置函数 calc()。
calc() 函数可以接收任意的数值或者变量，并且可以进行加、减、乘、除等运算。
以下是一个示例：
// 使用 calc() 函数计算两个值的和
@width: 100px;
@padding: 10px;
.box {
width: calc(@width + @padding);
}在这个示例中，使用 calc() 函数计算了变量 @width 和 @padding 的和，并且将结果赋值给了 width 属性。
使用 mixin
如果在代码中需要多次使用相同的数值或者单位，可以考虑使用 LESS 的 mixin。
Mixin 是一种将一组属性集合封装起来，可以在需要的地方进行调用的方式。在 mixin 中可以使用变量、数值或者计算表达式等。
以下是一个示例：
-- -------------------- ---- ------- -- ----------- ----- ----------------------- ----- ------------- ------ - ---------- ----------- ------------ ------------- ------ ----- - -- -- ----- ----- - ----------------- ------------- -
在这个示例中，定义了一个名为 text-style 的 mixin，包含了三个属性：font-size、font-family 和 color。在使用 mixin 的时候，可以传入不同的参数来改变属性的值。
总结
在使用 LESS 编写 CSS 样式的过程中，遇到 pixel or percentage expected 的报错信息时，首先需要检查代码中是否存在不符合要求的单位或者数值类型。如果代码中使用了变量，也需要检查变量的值是否符合要求。如果需要进行复杂的数学运算，可以使用 LESS 的内置函数 calc()。如果需要多次使用相同的数值或者单位，可以考虑使用 LESS 的 mixin。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fcdf71d10417a22283cdef