Преобразование HEX в RGBa - PullRequest
Новая
       42

Преобразование HEX в RGBa

0 голосов
/ 21 марта 2019

Я хочу преобразовать HEX цвет в RGB, но, выполнив поиск в Интернете, я понял, что могу сделать это с помощью SASS, но только с RGBa .

Так что рассмотрите этот код: 

@mixin hex-rgba($hexcolor, $opacity) {
  background-color: rgba($hexcolor, $opacity); 
}

div {
  @include hex-rgba(#333333, .3);
}

Возвращает: 

div {
  background-color: rgba(51, 51, 51, 0.3);
}

Но если установить альфа на 1 (или 100%), возвращается шестнадцатеричное значение: 

div {
  @include hex-rgba(#333333, 1);
}

div {
  background-color: #333333;
}

Как получитьзначение rgba, даже если альфа равен 100%?

Таким образом, как 

div {
  background-color: rgba(51, 51, 51, 1);
}

решено 

@function rgb($hexcolor){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @return unquote("rgb(#{$red},#{$green},#{$blue})");
}

:root {
  --color: #{rgb(#ffffff)};
}

Ответы [ 2 ]

1 голос
/ 21 марта 2019

Попробуйте этот код 

 @mixin hex-rgba($hexcolor, $opacity) {
  @if $opacity == 1 or $opacity == 100% {

  background-color:hex($hexcolor);
  }
  @else {
   background-color: rgba($hexcolor, $opacity);
  }
}


@function hex($hexcolor){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @return unquote("rgba(#{$red},#{$green},#{$blue},#{$alpha})");
}

div {
  @include hex-rgba(#333333, 0.2);
}

ПОПРОБУЙТЕ ЭТО ОБНОВЛЕННЫЙ КОД 

@function hex($hexcolor,$opacity){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @if $opacity == 1 or $opacity == 100% {
    @return unquote("rgba(#{$red},#{$green},#{$blue},#{$alpha})");
  }
  @else{
    @return unquote("rgba(#{$red},#{$green},#{$blue},#{$opacity})");
  }
}

body {
  background-color:#{hex(#333333,0.5)};
}

:root {
  --color: #{hex(#ff0000,1)};
}
div{
  height:50px;
  width: 50px;
  background-color: var(--color);
}

Рабочая скрипка для обновленного кода

Также Вы можете примерить Sassmeister

Рабочая скрипка OLD

Sassmeister

0 голосов
/ 21 марта 2019

Если вы хотите только RGB, попробуйте использовать это 

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}

color: toRGB(#ffffff); /* returns color: rgb(255, 255, 255)*/
...