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

Question

Я хранили значения 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) } 

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

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

редактировать: В то время как я не доволен этим либо .. это лучшее решение я могу придумать ..

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

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

Answer 1

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

Я думаю, что„замирание“является то, что вы ищете. Просто установите цвет в качестве переменной ...

@black: #000000; 

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

color: fade(@black, 80%); 

Answer 2

Вы столкнулись этот вопрос, вероятно, потому, что RGBA() является internal function in less; это также hsla().

Чтобы использовать подмешать как функцию, которая устанавливает переменную по желанию, вы должны были бы использовать mixins as functions feature, как показано ниже:

// 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], которая определена в mixin on line [A].

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

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

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

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

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