LESScss конвертирует rgba в hex? как вложить цветовые переменные в mixin?

Преобразует ли LESScss все цвета rgba в шестнадцатеричные значения?

Я пытаюсь создать mixin, скажем,.color, который позволяет вам передать указанную ранее переменную цвета, и я хочу, чтобы она была в rgba.

это не работает, но вот идея:

.bgcolor(@colorvariable,@alpha) {
     background-color: @colorvariable + rgba(0, 0, 0, @alpha);
     }

Где @colorvariable будет, @blue: rgb(17,55,76); или @green: rgb(125,188,83); и т.д.

Я хочу определить кучу этих переменных, а затем смогу передать их в .bgcolor или .color mixin и изменить прозрачность альфа на лету.

Я чувствую, что это должно быть возможно, но я чего-то не хватает. Теперь, мой код только когда-либо выводит значение цвета в гексагоне, почти независимо от того, что я вставляю. Если я передаю значение @alpha 1, оно выводит шестнадцатеричное значение цвета. Только значения @alpha меньше 1 заставляют браузер показывать мне значение rgba. Итак, что решено.

Теперь - как передать в rgb и части отдельно от предопределенной переменной?

Ответы

Ответ 1

Оказывается, меньше встроенных функций hsla (см. меньше цветовых функций). Поэтому с некоторой помощью здесь мы обнаружили:

    @dkblue: #11374c;
    .colorize_bg(@color: @white, @alpha: 1) {
           background: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);}

Затем используйте mixin:

section {.colorize_bg(@dkblue,1);}

Итак, мы передаем переменную цвета @dkblue и меньше ', такие как hue(@color), возьмем @dkblue и вытащите ее значения оттенка, насыщенности и яркости. Затем мы можем передать альфа, которую мы определяем в этом mixin.

Затем я могу использовать его другими способами, например, для определения прозрачных границ. Добавив background-clip: padding-box; в .colorize_bg, я гарантирую, что мои границы отображаются за пределами цвета bg box (не является ли CSS3 магическим?). Затем я могу переопределить mixin для работы с цветом границы:

    .colorize_border(@color: @white, @alpha: 1) {border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);}

а затем дайте section ширину границы, стиль и определите цвет через mixin:

section {border-width: 0 10px; border-style: solid; .colorize_border(@dkblue, .5);

И вы получите волшебные, блестящие прозрачные границы, например: http://i.stack.imgur.com/4jSKR.png

Ответ 2

LESS имеет набор функций для fade, fadeIn или fadeOut цвета. Вы должны иметь возможность передать любой цвет этим микшинам (hsl, rgb, rgba, hex и т.д.).

// fade color to 40%
color: fade(#000000, 40);

// fade in color by 10%
color: fadeIn(rgba(0, 0, 0, .5), 10);

// fade out color by 10%
color: fadeOut(rgba(0, 0, 0, .5), 10);

Ответ 3

Вам не нужно конвертировать в hsla, так что вам не понадобится белое значение

.hexBackgroundToRGBA(@color,@alpha){
  @myred:red(@color);
  @mygreen:green(@color);
  @myblue:blue(@color);
  background-color: @color;
  background-color: rgba(@myred,@mygreen,@myblue,@alpha);
}

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

#selector{  .hexBackgroundToRGBA(@gray, 0.8); }

Это приведет к тому, что у вас есть значение val val в переменной @gray и выведет решение с кросс-браузером с прозрачностью 80% с надежным возвратом цвета для браузеров, которые не поддерживают rgba().