Как игнорировать передаваемый параметр в миксине

Я хочу использовать Less mixin для границ в проекте, но часто мне нужно использовать разные стороны границы, а не все.

Я написал простой миксин:

.border-all (@border; @border-type; @border-color) {
  border-top: @border @border-type @border-color;
  border-right: @border @border-type @border-color;
  border-bottom: @border @border-type @border-color;
  border-left: @border @border-type @border-color;
}

Можно ли, например, передавать аргументы только border-top и border-bottom?

So: 

.class {
  .border-all (3px; double; @border-color);
}

Будет вывод в:

.class {
  border-top: 3px double #333;
  border-bottom: 3px double #333;
}

Могу ли я игнорировать передачу параметров в разные свойства CSS в миксине?


css less less-mixins
person Alex Sokol    schedule 19.06.2015    source источник
comment
Я боюсь, что вам придется модифицировать этот миксин, чтобы принять другой параметр, который может выступать в качестве защиты (или) переопределять свойства после вызова миксина.   -  person Harry    schedule 19.06.2015

Ответы (2)


arrow_upward
2
arrow_downward

Прежде всего, я хотел бы спросить, зачем вам вообще нужен этот миксин. Чем это лучше, чем просто border: 3px double @border-color;?

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

.class {
   @border: 3px double @border-color;
    border-top: @border;
    border-bottom: @border;
}

Да, это три строки кода вместо одной, но, без сомнения, ее легче поддерживать.

---

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

// usage:

.c1 {
    .border(top right, 1px solid black);
}

.c2 {
    .border(1px solid black);
}

// impl:

.border(@sides, @value) {
    .side(length(@sides));
    .side(@i) when (@i > 0) {
        @side: extract(@sides, @i);
        border-@{side}: @value;
        .side(@i - 1);
    }
}

.border(@value) {
    border: @value;
}

Поскольку я действительно не вижу смысла использовать все эти лишние запятые и/или точки с запятой в этом случае.

person seven-phases-max    schedule 19.06.2015
comment
Хм, да разумная альтернатива! - person Harry; 19.06.2015

arrow_upward
2
arrow_downward

Как бы то ни было, ваш текущий миксин не может быть изменен для отправки параметров только определенным свойствам CSS. Однако вы можете изменить миксин, чтобы он был похож на приведенный ниже фрагмент, и передать стороны в качестве аргументов.

.border-all (@border; @border-type; @border-color; @sides...) {
    & when not (@sides = all){ /* if border is not needed on all sides */
        .border-side(@index) when (@index > 0){
            @side: extract(@sides, @index); /* extract the side specified for each iteration */
            border-@{side}: @border @border-type @border-color; /* create property */
            .border-side(@index - 1);
        }
        .border-side(length(@sides)); /* loop as many times as the no. of sides provided */
    }
    & when (@sides = all){ /* if border is needed for all sides */
        border: @border @border-type @border-color; /* combined because there is no need for 4 separate properties. */
    }
}

.demo{
    .border-all(1px; solid; black; top, right);
}
.demo2{
    .border-all(1px; solid; black; all);
}

Вам просто нужно передать необходимые стороны в качестве последнего аргумента примеси, и в выходном CSS будут сгенерированы только соответствующие свойства.

person Harry    schedule 19.06.2015