Сокращенный сокращенный миксин границы радиуса, отключение переменной

Я пытаюсь написать миксин для border-radius, а не только выводит, когда значения, установленные переменной,>> 0. Я устанавливаю базовое значение в переменной как 3px, поэтому, если я введу -1 или нет, например, миксин border-radius не будет создавать никаких свойств в окончательной таблице стилей. Я могу заставить это работать, если я хочу иметь одинаковое значение для каждого угла. Но я не могу понять, как заставить это работать, если я хочу использовать сокращение, то есть 3px 3px 0 0. Я думаю, что это проблема с изменением 3px переменной и 0 в обоих сценариях. Мой код на данный момент

.border-radius(@r) when not (@r = no), (@r = 0) {
    -webkit-border-radius: @r;
       -moz-border-radius: @r;
            border-radius: @r;
}
.border-radius(@r) when (@r = no), (@r = 0) {}

@baseBorderRadius: 3px;
.class1 { .border-radius(@baseBorderRadius); }
// This outputs fine: 3px 3px 3px 3px
.class2 { .border-radius(@baseBorderRadius @baseBorderRadius 0 0); }
// This outputs fine 3px 3px 0 0

@baseBorderRadius: no; // If I change the variable to try and disable/not run the mixin
.class1 { .border-radius(@baseBorderRadius); }
// This does what I want and doesn't run the mixin
.class2 { .border-radius(@baseBorderRadius @baseBorderRadius 0 0); }
// THIS IS THE PROBLEM! This outputs: no no 0 0

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

Я был бы очень признателен за любую помощь в этом, даже если бы просто выяснить, что то, что я хочу сделать, невозможно в LESS. Спасибо

Источник

2 ответа

Решение

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

  • для значений нечисловых записей (в вашем случае "нет") с isnumber() а также
  • для значения = 0

вот код LESS (обратите внимание на использование and в карауле)

.border-r-not-0 (@a, @b, @c, @d) when not (@a = 0), not (@b = 0), not (@c = 0), not (@d = 0){
      -webkit-border-radius: @a @b @c @d;
       -moz-border-radius: @a @b @c @d;
            border-radius: @a @b @c @d;
}
.border-radius(@a, @b, @c, @d) when (isnumber(@a)) and (isnumber(@b)) and (isnumber(@c)) and (isnumber(@d)){
    .border-r-not-0(@a, @b, @c, @d);
}

.border-radius(@r) when (isnumber(@r)) and not (@r = 0) {
    -webkit-border-radius: @r;
       -moz-border-radius: @r;
            border-radius: @r;
}

сейчас для

@baseBorderRadius: 3px;
.class1 { .border-radius(@baseBorderRadius); }
.class2 { .border-radius(@baseBorderRadius, @baseBorderRadius, 0, 0); }

вывод CSS:

.class1 {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.class2 {
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}

и нет выхода, если

@baseBorderRadius: no;

потому что это не проходит isnumber() тестовое задание,

или если

@baseBorderRadius: 0;

потому что тогда все аргументы равны 0,

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

Источник

Относится к "нет" как 0

Этот обновленный миксин рассматривает "нет" как 0 а затем смотрит, если все установлено на 0 или нет. Я не знаю, является ли это именно той функцией, которую вы искали, но это то, что я предоставил здесь (см. .class14 ниже вы увидите, как это работает с другими допустимыми значениями).

.border-radius(@r) {
  .check-no(@r) {
    @rad: `'@{r}'.replace(/no/gi, 0).replace(/\b0px|\b0%|\b0em/gi, 0).replace(/[,\[\]]/g, '')`;
  }
  .check-no(@r);

  .set-radius(@rad) when not (@rad = "0") and not (@rad = "0 0") and not (@rad = "0 0 0") and not (@rad = "0 0 0 0") {
    @finalRad: e(@rad);
    -webkit-border-radius: @finalRad;
       -moz-border-radius: @finalRad;
            border-radius: @finalRad;    
  }

  .set-radius(@rad) {}
  .set-radius(@rad);
}

Чтобы быть полностью совместимым, замена строки /\b0px|\b0%|\b0em/gi должен быть настроен для всех типов разрешенной длины (я не собирался занимать время, чтобы сделать это).

Итак, этот тестовый код LESS:

@b1: 3px;
.class1 { .border-radius(@b1); }
.class2 { .border-radius(@b1 @b1 0 0); }
.class3 { .border-radius(0 0); }
.class4 { .border-radius(0px 0); }
.class5 { .border-radius(0% 0); }
.class6 { .border-radius(0em 0); }
.class7 { .border-radius(10px 0); }
.class8 { .border-radius(10% 0); }
.class9 { .border-radius(10em 0); }
.class10 { .border-radius(no); }
.class11 { .border-radius(no no); }
.class12 { .border-radius(no no 0); }
.class13 { .border-radius(no no 0 0); }
.class14 { .border-radius(no no 5px 5px); }

Создает этот вывод CSS (игнорируя все случаи, когда он оценивается в сеть 0):

.class1 {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.class2 {
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
.class7 {
  -webkit-border-radius: 10px 0;
  -moz-border-radius: 10px 0;
  border-radius: 10px 0;
}
.class8 {
  -webkit-border-radius: 10% 0;
  -moz-border-radius: 10% 0;
  border-radius: 10% 0;
}
.class9 {
  -webkit-border-radius: 10em 0;
  -moz-border-radius: 10em 0;
  border-radius: 10em 0;
}
.class14 {
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}
Источник
Другие вопросы по тегам