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

Question

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

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

@mixin background-opacity($color, $opacity: .3) {

    background: rgb(200, 54, 54); /* The Fallback */

    background: rgba(200, 54, 54, $opacity);

}

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

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

element {

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

}

как я могу использовать шестнадцатеричные значения в этом миксине?

833 4

css sass background-color rgba mixins

4 ответов:

Comments

Ничего не найдено.

hopper · Accepted Answer · 2012-06-08 00:00:24

The функция 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: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */

user3631047 · Accepted Answer · 2015-09-09 16:52:32

есть встроенный миксин:transparentize($color, $amount);
background-color: transparentize(#F05353, .3);
сумма должна быть от 0 до 1;

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

Reggie Pinkham · Accepted Answer · 2018-05-24 03:16:18

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

m.Elouafi · Accepted Answer · 2012-06-07 13:06:16

вы можете попробовать это решение, является лучшим... 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);