Меньше цветов в rgba (), даже если альфа-канал равен 1 - PullRequest
Новая
       6

Меньше цветов в rgba (), даже если альфа-канал равен 1

0 голосов
/ 11 июня 2018

Мне нужно, чтобы компилятор Less не конвертировал в цвета HEX, определенные в rgba (), , даже если альфа-канал равен 1

На самом деле, следующий код Less: 

@color1: rgba(0,0,0,1);
@color2: rgba(0,0,0,0.1);
@color1_light: lighten(@color1,90%);
@color2_light: lighten(@color2,90%);

.a {
  background:@color1;
  color: @color1_light;
}

.b {
  background:@color2;
  color: @color2_light;
}

обрабатывается в: 

.a {
  background: #000000;
  color: #e6e6e6;
}
.b {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(230, 230, 230, 0.1);
}

но мне нужно (по многим причинам, связанным с дальнейшими оценками) 

.a {
  background: rgba(0, 0, 0, 1);
  color: rgba(230, 230, 230, 1);
}
.b {
  background: rgba(0, 0, 0, 0.1);
  color: rgba(230, 230, 230, 0.1);
}

Как решить эту проблему?

1 Ответ

0 голосов
/ 11 июня 2018

В принципе, это довольно просто, все, что вам нужно сделать, это избежать выражения, ниже вы найдете два примера, как заставить меньше компилятора отображать формат rgba, даже если альфа равен 1: 

@color1: rgba(0,0,0,1);

body {
    color: ~"rgba("red(@color1), green(@color1), blue(@color1),~" 1)";
    background: %(~"rgba(%s, %s, %s, 1)", red(@color1), green(@color1), blue(@color1));
}

Оба примера приведут к rgba(0, 0, 0, 1), вам решать, какой из них вы предпочитаете.Бьюсь об заклад, вы найдете больше информации в документах под string escape и string replace

// РЕДАКТИРОВАТЬ

да, это сложно, но все же, вы можетедополните это миксином, чтобы в дальнейшем он не выглядел так плохо в коде. 

@color1: rgba(0,0,0,1);

.rgba(@color) {
    //@rgba: ~"rgba("red(@color), green(@color), blue(@color),~" 1)";
    @rgba: %(~"rgba(%s, %s, %s, %s)", red(@color), green(@color), blue(@color), alpha(@color));
}

.torgba(@property, @color) {
    @{property}: %(~"rgba(%s, %s, %s, %s)", red(@color1), green(@color1), blue(@color1), alpha(@color1));
}

body {
    .rgba(@color1); // mixin returns @rgba variable that may be used later on, it's not color object however, but a string
    color: @rgba;
    background: @rgba;
    .torgba(border-color, @color1); // do the same, but returns property with color in given format
}
...