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

问题描述

我需要能够使用LESS Css中的数学公式通过一个函数方法来计算背景位置，该函数方法需要sprite图像的x和y位置。我最好的猜测是，如下，但唉，这不工作。

I need to be able to calculate the background position using a math formula in LESS Css via a function method that takes the x and y position of a sprite image. My best guess for this is as follows, but alas this doesn't work.

@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;
}

推荐答案

在你的操作中不被lesscss理解。我重写了您的操作如此：

I think you have some things in your operation that are not understood by lesscss. I rewrote your operation as so:

@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}"`;  
}

它运行没有错误，默认情况下它输出：

It runs without error and by default it outputs:

background-position: -33px -33px;

这篇关于使用LESS Css中的公式计算背景位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！