МЕНЬШЕ CSS - параметры идентификатора и фона

Вместо того, чтобы повторять этот CSS в моем файле .less. Кто-нибудь знает, как создать функцию LESS для следующего?

li  #prize-1 span {
                background: url('@{imagesUrl}/1.png') no-repeat;
                width: 874px;
                height: 188px;
            }   
li  #prize-2 span {
                background: url('@{imagesUrl}/2.png') no-repeat;
                width: 874px;
                height: 188px;
            }

css less
person user1381806    schedule 01.06.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Не было бы что-то вроде этого

.definition (@image: nameOfImageDefault) {
  background: url('@{imagesUrl}/@{image}') no-repeat;
  width: 874px;
  height: 188px;
}

li  #prize-1 span {
    .definition(nameOfImage);
        }   
li  #prize-2 span {
    .definition(nameOfImage);
}

Я не так хорошо знаком с LESS, поэтому думаю, что это работает

Редактировать:

Я следую этому примеру со своей домашней страницы

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

также какая часть не работала? фоновое изображение? возможно, попробуйте взять весь путь к изображению с именем в качестве переменной

person Huangism    schedule 01.06.2012
comment
@ user1381806, вы можете попробовать определить imageUrl, поскольку используется путь, а не переменная в .definition. У меня не установлено LESS, поэтому я не могу его протестировать. Вы можете разместить свой код. - person Huangism; 01.06.2012
comment
Я отредактировал свой ответ, source stackoverflow.com/questions/6334644/ Я только что добавил {} вокруг изображения, я уверен, что это что-то вроде этого, если не совсем так, но способ точно есть - person Huangism; 01.06.2012