Может ли функция вернуть * просто * значение rgba? - PullRequest
Новая
       3

Может ли функция вернуть * просто * значение rgba?

3 голосов
/ 29 февраля 2012

Я хранил значения rgba как переменные (например: @black: rgba(0, 0, 0, 1.0);), и я понял, что было бы неплохо, если бы я мог сделать переменную альфа-значения.

Итак, я попробовал это .. 

.color_black (@alpha: 1.0) { rgba(0, 0, 0, @alpha) }

Проблема просто в том, что это не работает.Секция параметров кажется правильной, но кажется, что она «ломается» только после добавления в код rgba ().Меньше на самом деле не нравится вызов rgba.

Теперь я могу сделать эту работу, определив тег свойства, например .. 

.color_black (@alpha: 1.0) { color: rgba(0, 0, 0, @alpha) }

Но такой вид отрицает полезность храненияодин цвет, и повторное использование его по всему городу.В фонах, текстах, градиентах и ​​т. Д.

Итак, есть мысли о том, как это исправить?

edit : Хотя я тоже не доволен этим ... этимэто лучшее решение, которое я могу придумать .. 

.color_black (@prop: color, @alpha: 1.0) { @prop: rgba(0, 0, 0, @alpha) }

Это не такая полезная функция, как ее нельзя использовать в других свойствах (градиентах и ​​т. д.).Мысли?

Ответы [ 2 ]

8 голосов
/ 29 февраля 2012

Взгляните на цветовые функции less : http://lesscss.org/#-color-functions

Я думаю, что «исчезновение» - это то, что вы ищете. Просто установите свой цвет в качестве переменной ... 

@black: #000000;

... и использовать fade(): 

color: fade(@black, 80%);
2 голосов
/ 09 января 2013

Вы сталкивались с этой проблемой, вероятно, потому что rgba () является внутренней функцией в менее ;так же, как и hsla ().

Чтобы использовать миксин в качестве функции, устанавливающей переменную, как вам нужно, вам нужно использовать миксинов в качестве функции , как показано ниже: 

// mixin
.toRGBA( @color, @alpha) { 
  @color_plus_alpha: rgba(red(@color), green(@color), blue(@color), @alpha); //[A]
}


// usage
.someClass {
  .toRGBA(orange, 0.3); // [B]
  color: @color_plus_alpha; // [C]
}

поймайте здесь добавленную строку [B] и тот факт, что вам всегда нужно использовать переменную @color_plus_alpha в [C], которая определена в миксине в строке [A].

Это работаетво время этого редактирования и выводит следующее: 

.someClass {
  color: rgba(255, 165, 0, 0.3);
}

Однако это все еще не позволяет назначать «выход» миксина произвольной переменной в соответствии с желаниями OP.

Обратите внимание, что red (), green () и blue () также являются внутренними функциями, которые выделяют соответственно красный, зеленый и синий компоненты входного цвета.

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

...