CSS：使用.Less管理雪碧图像

Question

像在 SCSS 文件中使用 Compass 一样，是否有一种方法（通过扩展或工具）可以直接从 .Less 中管理 Sprite？

- Etienne

Answer 1

如果您的意思是将单独的图像合并成一个，我还没有看到类似的工具。这可能需要使用工具或其他方式完成，因为 JavaScript 不容易完成这样的操作。

如果您想计算预制精灵的背景位置，则可以查看此问题，它有一个解决方案。 在 LESS Css 中使用公式计算背景位置

- Mikko Tapionlinna

Answer 2

您可以使用类似以下的内容：

捆绑包

#sprites {     
        .background(@image,@repeat: no-repeat,@background: transparent) {
             background-image: url("/images-folder/@{image}");
             background-color: @background;
             background-repeat: @repeat;
        }
       .position(@horizontal, @vertical) {
             background-position: @horizontal @vertical;
       } 
}

一些HTML

<ul>
    <li><a href="" title="" class="icon-1">Link 1</a></li>
    <li><a href="" title="" class="icon-2">Link 2</a></li>
    <li><a href="" title="" class="icon-3">Link 3</a></li>
    <li><a href="" title="" class="icon-4">Link 4</a></li>
</ul>

还有一些样式

ul{
    li{
        a{
            #sprites > .background('icons.png');
            &.icon-1 { #sprites > .position(left,top); }
            &.icon-2 { #sprites > .position(left,-20px); }
            &.icon-3 { #sprites > .position(left,-40px); }
            &.icon-4 { #sprites > .position(left,-60px); }
        }
    }
}

- ZdenekD