Меньше конвертировать rgba в hex? Как вложить цветовые переменные в миксин? - PullRequest
Новая
       43

Меньше конвертировать rgba в hex? Как вложить цветовые переменные в миксин?

19 голосов
/ 03 марта 2011

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

Я пытаюсь создать миксин, скажем, .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 заставляют браузер показывать мне значение rgba. Так что это решено.

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

Ответы [ 3 ]

25 голосов
/ 03 марта 2011

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

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

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

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

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

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

    .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

19 голосов
/ 15 августа 2012

МЕНЬШЕ имеет набор функций для 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);
8 голосов
/ 03 февраля 2013

Вам также не нужно конвертировать в 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); }

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

...