2021-05-07 记录一次奇葩的问题：background-position属性值无效

问题描述

先描述一下当时的情况，我使用的React框架开发的前端程序，样式采用了less来写。然后，在设置一个背景图片的位置时，奇葩的情况出现了！！！
background-position属性值无效，百度各种无果后，只能自己摸索。

原来的写法

@IconPath: '../../images';
.finishedBG {
 	background: url("@{IconPath}/Finished.png");
 	background-repeat: no-repeat;
    background-size: 62px 47px;
    background-position: 95% 12px;
 }

这个写法在原来的scss中没有任何问题，less中却无法使用，排除了冲突优先级等问题后，只能从属性值的写法入手了。大胆猜测一下 background-position: 95% 12px; 这种同时包含百分比和具体数值的写法在less中是无法生效的。但是，我们在项目中又需要这样的定位该怎么写呢？

新的写法

@IconPath: '../../images';
.finishedBG {
 	background: url("@{IconPath}/Finished.png");
 	background-repeat: no-repeat;
    background-size: 62px 47px;
    background-position-x: 95%;
    background-position-y: 12px;
 }

最后的效果👇

世上无难事，只要肯放弃 — 我说的