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

发布于 2024-12-17 09:51:27 字数 467 浏览 2 评论 0原文

我需要能够通过采用精灵图像的 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;
}

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

依靠 2024-12-24 09:51:27

我认为你的操作中有些东西是 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;

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: