Переменные и меньше CSS, это будет возможно или как я могу добиться чего-то похожего? - PullRequest
Новая
       6

Переменные и меньше CSS, это будет возможно или как я могу добиться чего-то похожего?

0 голосов
/ 28 марта 2012

У меня один и тот же блок кода повторяется с двумя разными переменными. Этот блок кода повторяется много-много раз, поэтому я подумал, что для управления этой таблицей стилей я бы преобразовал ее в LESSCSS.

Я совсем новичок в LESS CSS, но получаю ошибку компиляции, поэтому я думаю, что то, что я пытаюсь сделать, не возможно, так как я к нему подхожу. 

.item(@name,@loc) {
    @name .icon { background: url(..) -24px @loc no-repeat; }
    .theme-purple @name .icon { background: url(..) 0 @loc no-repeat; }
    .theme-green @name .icon { background: url(..) -48px @loc no-repeat; }
    .theme-yellow @name .icon,
    .theme-orange @name .icon { background: url(..) -72px @loc no-repeat; }
    .theme-red @name .icon { background: url(..) -96px @loc no-repeat; }
}

.item('type',-24px);

Возможно ли что-то подобное?

1 Ответ

0 голосов
/ 29 марта 2012

Ты рядом. Первая проблема - использование переменных. Вам нужно взглянуть на @arguments. Я не на 100% уверен в том, что вы пытаетесь выполнить (возможно, некоторый код для спрайтов), но позвольте мне привести вам пример: 

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

.box-shadow(2px, 5px);

Вы устанавливаете свои переменные, а затем их значения по умолчанию, если они не указаны. Затем вы используете @arguments, чтобы поместить их в свой миксин. Так как это просто фоновое изображение, у вас будет только одно. Затем вы применяете этот миксин к определенному селектору.

Похоже, вы пытаетесь поместить миксины в селекторы для использования в качестве миксина, что невозможно. Вы также не можете поместить переменные в селекторы внутри селекторов по разным причинам. Наиболее важным является сфера применения. Переменные являются константами в LESS, поэтому после установки этой локальной глобальной переменной ее нельзя изменить.

Было бы проще сделать это так: 

.sprite (@path: url(..), @loc1: 0, @loc2: 0, @repeat: no-repeat;) { 
        background: @arguments;         
}

.foo { 
        .sprite('url(..)', -96px, -24px);
}

Должен вывести: 

.foo {
        background: url(..) -96px -24px no-repeat;
}

Имейте в виду, что вы не можете пропустить первый параметр в аргументах LESS, поэтому вам всегда нужно будет объявлять URL в этом примере.

...