Sass - Преобразование Hex в RGBa для прозрачности фона

У меня есть следующий Sass Mixin, который является половиной полной модификацииRGBa example:

@mixin background-opacity($color, $opacity: .3) {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, $opacity);
} 

Я применил$opacity хорошо, но теперь я застрял с$color часть. Цвета, которые я отправлю в миксин, будут HEX, а не RGB.

Мой пример использования будет:

element {
    @include background-opacity(#333, .5);
}

Как я могу использовать значения HEX в этом миксине?

Ответы на вопрос(4)

Решение Вопроса

функция rgba () может принимать один шестнадцатеричный цвет, а также десятичные значения RGB. Например, это будет работать просто отлично:

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

Если вам когда-нибудь понадобится разбить шестнадцатеричный цвет на компоненты RGB, вы можете использоватькрасный (), зеленый (), а такжесиний () функции для этого:

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */
 Rick Donohoe08 июн. 2012 г., 10:11
Клянусь, я попробовал это И функции r, b, g, и это не сработало. Я использовал динамические цвета из бэкэнда Drupal, которые, возможно, что-то сломали. Все-таки разобрали в конце и ответ я нашел после дальнейших исследований +1
 10 дек. 2014 г., 17:56
НО, что такое шестнадцатеричный эквивалент # ($ color + $ opacity)? - это может быть полезно. выполнимо?
 26 апр. 2017 г., 11:26
Благодарю. Никогда бы не подумал попробоватьrgbа!
 14 июл. 2017 г., 14:30
Лучше использоватьrgba($color, $alpha) лайкrgba(#000000, 0.6) в результате то же самое, и нет необходимости изобретать велосипед. ;)
 20 нояб. 2015 г., 22:56
Насколько мне известно, RGBA добавляетopacityЭто означает, что вы можете видеть элементы позади него. Со стандартнымhexВы не можете сделать это.

SASS имеет встроенныйфункция rgba () оценивать ценности.

rgba($color, $alpha)

Например.

rgba(#00aaff, 0.5) => rgba(0, 170, 255, 0.5)

Пример использования ваших собственных переменных:

$my-color: #00aaff;
$my-opacity: 0.5;

.my-element {
  color: rgba($my-color, $my-opacity);
}

Выходы:

.my-element {
  color: rgba(0, 170, 255, 0.5);
}

Есть встроенный миксин:transparentize($color, $amount);

background-color: transparentize(#F05353, .3);

Сумма должна быть от 0 до 1;

Официальная документация Sass (Модуль: Sass :: Script :: Functions)

 31 дек. 2015 г., 15:51
Работал отлично, за исключением суммы, кажется, обратное значение, что вы хотите сделать это90% прозрачный, чтобы получить результат.1
 08 окт. 2015 г., 02:17
Мне это нравится! Отлично подходит для современной реализации браузера.
 08 дек. 2015 г., 13:35
в качестве примечания: сумма $ это то, сколько она будет вычтена, а не значение, которое вы хотите установить

Вы можете попробовать это решение, лучше всего ... url (GitHub)

// Transparent Background
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

// Extend this class to save bytes
.transparent-background {
  background-color: transparent;
  zoom: 1;
}

// The mixin
@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  @extend .transparent-background;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
}

// Loop through opacities from 90 to 10 on an alpha scale
@mixin transparent-shades($name, $color) {
  @each $alpha in 90, 80, 70, 60, 50, 40, 30, 20, 10 {
    .#{$name}-#{$alpha} {
      @include transparent($color, $alpha / 100);
    }
  }
}

// Generate semi-transparent backgrounds for the colors we want
@include transparent-shades('dark', #000000);
@include transparent-shades('light', #ffffff);
 30 сент. 2013 г., 05:25
@RickDonohoe, насколько я помню, z-index: 1 и прозрачный фон - это запасной вариант для IE & lt; 9. Я думаю, что м.Элутафи выделил это в отдельный класс для дальнейшего использования в других целях. Посмотрите строку ответа, где она начинается с & quot; От: & quot; ...
 Rick Donohoe07 июн. 2012 г., 12:18
Ваш ответ хороший, но кажется слишком сложным. Я предполагаю, что прозрачные оттенки не имеют отношения к моему вопросу, хотя вы можете объяснить, что такое класс прозрачного фона? Я полагаю, мне это не нужно, если я не использую миксин с прозрачными оттенками?

Ваш ответ на вопрос