Как написать миксин LESS с гибким количеством аргументов?

Я написал миксин LESS, который автоматизирует переходы CSS с помощью соответствующих префиксов движка.

.Transition(@Property, @Timing){
    -moz-transition: @Property @Timing linear;
    -webkit-transition: @Property @Timing linear;
    -o-transition: @Property @Timing linear;
    transition: @Property @Timing linear;
}

К сожалению, я не могу указать выбранную группу стилей для анимации. Я могу указать только один конкретный стиль или «все». Если я попытаюсь использовать один и тот же миксин несколько раз, чтобы добавить в микс больше стилей, свойство перехода просто перезапишется. Например:

.class { .Transition(top, .2s); .Transition(opacity, .2s); .Transition(box-shadow, .2s); }

приводит к:

.class {
    -moz-transition: box-shadow, .2s;
    -webkit-transition: box-shadow, .2s;
    -o-transition: box-shadow, .2s;
    transition: box-shadow, .2s; 
}

Как я могу написать миксин, который позволит мне применять гибкое количество значений к одному стилю?


css css-transitions less mixins
person thiirteen    schedule 06.03.2013    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Объединить поддержку

В LESS версии 1.5 появилась поддержка объединения правил путем добавления к свойствам суффикса +

Функция merge позволяет объединять значения из нескольких свойств в список, разделенный запятыми или пробелами, в одном свойстве. merge полезен для таких свойств, как фон и преобразование.

...

Пример:

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

Выходы:

.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

Поддержка точки с запятой

LESS v1.4(?) представил поддержку нескольких параметров с точки с запятой. Это позволяет включать в каждый параметр буквальные запятые, не требуя нескольких параметров.

Использование запятой в качестве разделителя примесей делает невозможным создание списков, разделенных запятыми, в качестве аргумента. С другой стороны, если компилятор видит хотя бы одну точку с запятой внутри вызова или объявления миксина, он предполагает, что аргументы разделены точкой с запятой и все запятые принадлежат спискам css:

  • два аргумента, каждый из которых содержит список, разделенный запятыми: .name(1, 2, 3; something, else),
  • три аргумента и каждый содержит одно число: .name(1, 2, 3),
  • используйте фиктивную точку с запятой для создания вызова миксина с одним аргументом, содержащим список css, разделенный запятыми: .name(1, 2, 3;),
  • значение по умолчанию, разделенное запятыми: .name(@param1: red, blue;).
Example 
.transition(@args) {
    -webkit-transition: @args;
    -moz-transition: @args;
    -o-transition: @args;
    transition: @args;
}
.selector {
    .transition(.2s top, .2s opacity, .2s box-shadow;);
    //                            this is required -^
}

Поддержка предварительной точки с запятой

Поддержка нескольких аргументов с поддержкой запятых перед точкой с запятой немного сложнее, чем может показаться на первый взгляд, в основном потому, что метод less удаляет запятые из @arguments. Я начал проект ZLESS на github, где я добавил много миксинов, чтобы упростить работу с МЕНЬШЕ.

Это код, который я использую для перехода (без флаг компилятора):

.transition(@a, @b: X, ...) {
    //http://stackoverflow.com/a/13490523/497418
    @args: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
    -webkit-transition: @args;
    -moz-transition: @args;
    -o-transition: @args;
    transition: @args;
}

Он будет использоваться как:

.selector {
    .transition(.2s top, .2s opacity, .2s box-shadow);
}
person zzzzBov    schedule 07.03.2013
comment
Значит, нет возможности сделать то, что я хочу, из коробки? - person thiirteen; 13.03.2013
comment
@thiirteen, аргументы для свойства CSS должны иметь значения, разделенные запятыми. Я не знаю, как можно вызвать миксин несколько раз и заставить его правильно создавать CSS как одно объявление стиля. - person zzzzBov; 13.03.2013
comment
@zzzzBov (новая?) Запятая, когда вы добавляете + в конец реального имени свойства CSS, является своего рода хорошим способом сделать это. Это немного некрасиво, потому что вам нужно повторно вызывать весь миксин для каждого члена списка, но это, по крайней мере, делает это возможным. - person Pointy; 28.08.2014
comment
@Ponty, › Это немного некрасиво, потому что вам нужно повторно вызывать весь миксин для каждого члена списка - Йода предлагает использовать для этого циклы. - person seven-phases-max; 28.08.2014

arrow_upward
1
arrow_downward

Я думаю, что если вы разделите «собственность» для своего перехода, это может сработать!

Например :

.transitionProperty ( @property1, @property2, @property3) {
   -moz-transition-property : @property1, @property2, @property3;
   -o-transition-property : @property1, @property2, @property3;
   -webkit-transition-property : @property1, @property2, @property3;
   transition-property : @property1, @property2, @property3;
}

Или что-то подобное. Думаю, над этим стоит подумать ;)

person Ali Tabibzadeh    schedule 06.03.2013

arrow_upward
1
arrow_downward

В основном вам нужно передать их как экранированную строку. Итак, измените свой код:

.Transition(@transString){
    -moz-transition: @transString;
    -webkit-transition: @transString;
    -o-transition: @transString;
    transition: @transString;
}

Затем используйте его следующим образом:

.Transition(~"top .2s linear, opacity .2s linear, box-shadow .2s linear");

Что производит это:

-moz-transition: top .2s linear, opacity .2s linear, box-shadow .2s linear;
-webkit-transition: top .2s linear, opacity .2s linear, box-shadow .2s linear;
-o-transition: top .2s linear, opacity .2s linear, box-shadow .2s linear;
transition: top .2s linear, opacity .2s linear, box-shadow .2s linear;
person ScottS    schedule 07.03.2013