用 LESS 减少精灵 CSS？

Question

产生 CSS 精灵效果所需的代码重复似乎是使用 LESS 的完美案例。

但除了标准化基本、悬停和活动增量（如下）之外，我看不到任何进一步的方法来减少所需的代码行数。

任何人都可以建议进一步的改进：

@sprite-base:0px;
@sprite-hover:20px;
@sprite-active:40px;

.zone-user .region-user-second ul.text-size li.one a {
    background: url("../img/sprite-accessibility.gif") no-repeat scroll 0px @sprite-base transparent;
}
.zone-user .region-user-second ul.text-size li.two a {
    background: url("../img/sprite-accessibility.gif") no-repeat scroll -25px @sprite-base transparent;
}

etc ...

.zone-user .region-user-second ul.text-size li.one a:hover {
    background: url("../img/sprite-accessibility.gif") no-repeat scroll 0px @sprite-base - @sprite-hover transparent;
}
.zone-user .region-user-second ul.text-size li.two a:hover {
    background: url("../img/sprite-accessibility.gif") no-repeat scroll -25px @sprite-base - @sprite-hover transparent;
}


.zone-user .region-user-second ul.text-size li.one a.active {
    background: url("../img/sprite-accessibility.gif") no-repeat scroll 0px @sprite-base - @sprite-active transparent;
}
.zone-user .region-user-second ul.text-size li.two a.active {
    background: url("../img/sprite-accessibility.gif") no-repeat scroll -25px @sprite-base - @sprite-active transparent;
}

etc ...

Answer 1

您未能利用 LESS 的最大功能之一，即嵌套规则。它可以更容易地识别正在发生的事情，并且在我看来它更容易阅读。而且您编写的代码也确实少得多。以下是我如何嵌套您在问题中显示的规则：

@sprite-base:0px;
@sprite-hover:20px;
@sprite-active:40px;


.zone-user .region-user-second ul.text-size li a {
    background: url("../img/sprite-accessibility.gif") no-repeat scroll transparent;

    &.one {
        background-position: 0px @sprite-base;

        &:hover {
            background-position:0px (@sprite-base - @sprite-hover);
        }

        &.active {
            background-position:0px (@sprite-base - @sprite-active);
        }
    }
    &.two {
        background-position:-25px @sprite-base;

        &:hover {
            background-position:-25px (@sprite-base - @sprite-hover);
        }

        &.active {
            background-position:-25px (@sprite-base - @sprite-active);
        }
    }

}

Answer 2

嗯，这就是我要做的。 （没有 LESS ..or More.. ）

工作示例： http://jsfiddle.net/lollero/gE7df/< /a>

CSS:

.Element {
    background-image: url('path/to/img.jpg');
    background-repeat: no-repeat;
}

.E-1 { background-position: 0px 0px; }
.E-1:hover { background-position: -20px 0px; }

.E-2 { background-position: 0px -25px; }
.E-2:hover { background-position: -20px -25px; }

.E-3 { background-position: 0px -55px; }
.E-3:hover { background-position: -20px -55px; }

HTML:

<div class="Element E-1"></div>
<div class="Element E-2"></div>
<div class="Element E-3"></div>

---

编辑：我想我脑子有屁什么的..我修复了我的 css 示例中的一个巨大错误。