CSS：使用 .Less 管理 Sprite 图像

Posted 2023-03-06

【中文标题】CSS：使用 .Less 管理 Sprite 图像

【英文标题】：CSS: Manage Sprite Images with .Less

【发布时间】：2011-12-29 03:47:12

【问题描述】：

像 SASS 和 Compass（在 SCSS 文件中）一样，有没有办法（通过扩展或工具）直接从 .Less 管理 Sprite？

【参考方案1】：

如果您的意思是将单独的图像合并为一个，我还没有看到类似的东西。这可能适用于工具或其他东西，因为 javascript 不能轻易地做这样的事情。

如果计算现成精灵的背景位置是你所追求的，那么看看这个问题，它有一个解决方案。

Calculating background-position with a formula in LESS Css

【参考方案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);