Question

我需要能够通过一个获取精灵图像的x和y位置的函数方法，使用LESS Css中的数学公式计算背景位置。我对此的最佳猜测如下，但唉这不起作用。

@icon_base: 30px;
@icon: 24px;
/*sets the position of the background based on the x and y position order */
.icon_position(@x: 1, @y: 1) {
    @posx: ((#sizes[@icon_base] - #sizes[@icon])/2 + (@x * #sizes[@icon_base])) * -1;
    @posy: ((#sizes[@icon_base] - #sizes[@icon])/2 + (@y * #sizes[@icon_base])) * -1;
    background-position: @{posx}px @{posy}px;
}

Answer 1

我认为你的手术中有一些东西不被lesscss所理解。我重写了你的操作：

@icon_base: 30px;
@icon: 24px;
/*sets the position of the background based on the x and y position order */
.icon_position(@x: 1, @y: 1) {
    @posx:((@icon_base - @icon)/2 + (@x * @icon_base)) * -1;
    @posy:((@icon_base - @icon)/2 + (@y * @icon_base)) * -1;
    background-position:~`"@{posx}"` ~`"@{posy}"`;  
}

它运行时没有错误，默认输出：

background-position: -33px -33px;

使用LESS Css中的公式计算背景位置

1 个答案: