Sass - Chuyển đổi Hex thành RGBa cho độ mờ nền

Tôi có mixin Sass sau, đây là một sửa đổi hoàn chỉnh của một ví dụ RGBa :

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

Tôi đã áp dụng $opacityok, nhưng bây giờ tôi là một phần bị mắc kẹt $color. Màu sắc tôi sẽ gửi vào mixin sẽ là HEX chứ không phải RGB.

Ví dụ sử dụng của tôi sẽ là:

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

Làm cách nào tôi có thể sử dụng các giá trị HEX trong mixin này?

Hàm rgba () có thể chấp nhận một màu hex cũng như các giá trị RGB thập phân. Ví dụ, điều này sẽ hoạt động tốt:

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

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

Tuy nhiên, nếu bạn cần ngắt màu hex thành các thành phần RGB, bạn có thể sử dụng các hàm red () , green () và blue () để làm như vậy:

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

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

Có một mixin dựng sẵn: transparentize($color, $amount);

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

Số lượng phải nằm trong khoảng từ 0 đến 1;

Tài liệu Sass chính thức (Mô-đun: Sass :: Script :: Chức năng)

SASS có hàm rgba () tích hợp để đánh giá các giá trị.

rgba($color, $alpha)

Ví dụ

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

Một ví dụ sử dụng các biến của riêng bạn:

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

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

Đầu ra:

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

bạn có thể thử giải pháp này, là ... url ( github ) tốt nhất

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

Nếu bạn cần trộn màu từ độ trong suốt của biến và alpha và với các giải pháp bao gồm rgba()chức năng, bạn sẽ gặp lỗi như

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

Một cái gì đó như thế này có thể hữu ích.

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

  }

}