LESS.js + @arguments + Пропустить один аргумент - PullRequest
Новая
       4

LESS.js + @arguments + Пропустить один аргумент

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

Я искал в Google и т. Д., Но я не смог найти то, что искал (надеюсь, я ничего не пропустил) .. Поэтому я подумал, что лучше всего спросить вас, ребята:)

Я впервые играю с LESS-JS , и мне это очень нравится. Однако сейчас у меня небольшая проблема.

Я использую переменную @arguments следующим образом: 

.basicBorder(@width:1px, @type:solid, @color:@black){
    border:@arguments;
}

Который работает как положено. Теперь, когда я хочу, чтобы граница была красной, я добавляю это к элементу в моем css: 

.basicBorder(1px, solid, @red);

Что также работает как ожидалось. Однако я хотел бы избежать написания 1px, solid,, так как это уже мои значения по умолчанию, но когда я пытаюсь это сделать: 

.basicBorder(@red);

Или это: 

.basicBorder(,,@red);

Не работает.

Так что мне было интересно, знает ли any1, как я могу "пропустить" первые 2 переменные, чтобы я мог просто ввести цвет на случай, если я не хочу, чтобы изменились ширина и тип границы.

Надеюсь, вы понимаете, что я пытаюсь сказать!

Привет!

Ответы [ 2 ]

7 голосов
/ 19 октября 2012

Вы можете назвать более поздние параметры и пропустить первые.Синтаксис вашего вопроса: 

.basicBorder(@color:@red);

Вы также можете использовать обычные упорядоченные аргументы в начале и выделить именованные аргументы из остальных параметров: 

.basicBorder(2px, @color:@red);

Это устанавливает *От 1007 * до 2px, @type по умолчанию и от @color до @red.Действительно хорошо, если вы используете более редко используемые аргументы.

1 голос
/ 11 октября 2011

Параметрические миксины в LESS работают так же, как функции JavaScript, вы не можете пропустить первые параметры.Поэтому, если вы хотите изменить только цвет, вы можете переписать миксин так: 

.basicBorder(@color:@black, @width:1px, @type:solid){
    border:@width @type @color;
}

Тогда вы сможете назвать его так: 

.basicBorder(@red);
.basicBorder(@red, 2px, dotted);

edit
Используя свой оригинальный миксин, вы также можете создать эти 

.basicBorderType(@type) {
    .basicBorder(1px, @type, @black);
}
.basicBorderColor(@color) {
    .basicBorder(1px, solid, @color);
}

Теперь вы можете переписать любой из стилей: 

.basicBorderType(dotted); //1px dotted black;
.basicBorderColor(@red);  //1px solid red;
.basicBorder(2px);        //2px solid black;

Немного взломать, но это единственное, что я могу придумать, чтобы помочь вам ...

...