Уменьшить спрайт CSS с LESS? - PullRequest
Новая
       36

Уменьшить спрайт CSS с LESS?

0 голосов
/ 06 октября 2011

Повтор кода, необходимого для создания 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 ...

Ответы [ 2 ]

3 голосов
/ 06 октября 2011

Вы не можете воспользоваться одной из величайших особенностей 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);
        }
    }

}
0 голосов
/ 06 октября 2011

Ну, это то, что я хотел бы сделать.(без МЕНЬШЕ .. или Подробнее ..)

Рабочий пример: http://jsfiddle.net/lollero/gE7df/

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.

...