Sass - перетворення Hex в RGBa для непрозорості фону


213

У мене є наступний Sass mixin, який є наполовину повною модифікацією прикладу RGBa :

@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 у цьому міксині?

Відповіді:


414

Функція 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" */

Клянусь, я спробував це ТА функції r, b, g і це не спрацювало. Я використовував динамічні кольори з другого боку, проте, можливо, щось було порушено. Все-таки сортував це в підсумку і відповідь, яку я знайшов після подальших досліджень +1
Рік Донохое,

1
АЛЕ, що таке шестнадцятковий еквівалент # ($ color + $ непрозорість)? - це може бути корисним. виконаний?
колись

2
Наскільки мені відомо, RGBA додає непрозорість , тобто ви можете бачити елементи за нею. Зі стандартом hexви не можете цього зробити.
Річард Пек

Дякую. Ніколи б не думав спробувати hex на rgb !
RayViljoen

2
Краще використовувати на rgba($color, $alpha)зразок, rgba(#000000, 0.6)тому що результат однаковий і немає необхідності винаходити колесо. ;)
lbartolic

118

Є вбудований міксин: transparentize($color, $amount);

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

Сума повинна бути від 0 до 1;

Офіційна документація на Sass (Модуль: Sass :: Сценарій :: Функції)


1
Мені подобається це! Відмінно підходить для сучасної реалізації браузера.
Майк Корменді

16
як бічна примітка: сума $ - це сума, яку вона буде віднімати, а не значення, яке ви хочете встановити
MMachinegun

3
Працювало чудово, окрім суми, здається, це зворотній сенс, який потрібно зробити 90%прозорим для отримання результату.1
Патрік Менчіас-левіс

химерні. ніхто, хто не читав документацію, ніколи не підозрював би про функцію "транспарантизації". дуже корисно, хоча, дякую!
tobybot

Чудова відповідь. Це має бути прийнятою відповіддю. Дякую. $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);працював на мене.
Райан

34

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);
}

6

ви можете спробувати це рішення, найкраще ... 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);

5
Ваша відповідь хороша, але, здається, непотрібно складна. Я здогадуюсь, що прозорі відтінки не стосуються мого питання, хоча ви можете пояснити, про що йде мова про прозорий фон? Я припускаю, що він мені не потрібен, якщо я не використовую комбінації прозорих відтінків?
Рік Донохое

@ RickDonohoe, наскільки я пам’ятаю, z-індекс: 1, а прозорий фон є резервом для IE <9. Я думаю, що m.Eloutafi переклав це в окремий клас для подальшого використання в інших потребах. Подивіться рядок у відповідь, де він починається з "З:" ...
Роман М. Косс

2

Якщо вам потрібно змішати колір із змінною та альфа-прозорістю, а також із рішеннями, що включають rgba()функцію, ви отримаєте помилку

      background-color: rgba(#{$color}, 0.3);
                       ^
      $color: #002366 is not a color.
   
          background-color: rgba(#{$color}, 0.3);
                            ^^^^^^^^^^^^^^^^^^^^

Щось подібне може бути корисним.

$meeting-room-colors: (
  Neumann: '#002366',
  Turing: '#FF0000',
  Lovelace: '#00BFFF',
  Shared: '#00FF00',
  Chilling: '#FF1493',
);
$color-alpha: EE;

@each $name, $color in $meeting-room-colors {

  .#{$name} {

     background-color: #{$color}#{$color-alpha};

  }

}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.