CSS:使用.Less管理精灵图像

时间:2011-11-15 01:57:12

标签: css sass css-sprites less

与Compass的SASS(在SCSS文件中)一样,是否有一种方法(通过扩展或工具)直接从.Less管理Sprite?

2 个答案:

答案 0 :(得分:3)

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

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

Calculating background-position with a formula in LESS Css

答案 1 :(得分:1)

你可以使用这样的东西:

捆绑

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