Sass-배경 불투명도를 위해 16 진수를 RGBa로 변환

RGBa 예제를 완전히 수정 한 다음 Sass mixin이 있습니다 .

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

나는 적용 $opacity했지만 지금은 그 $color부분에 붙어 있습니다. 믹스 인에 보낼 색상은 RGB가 아닌 HEX입니다.

내 사용 예는 다음과 같습니다.

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

이 믹스 인에서 HEX 값을 어떻게 사용합니까?

RGBA () 함수는 도 진수 RGB 값으로 한 칸 색상을 수용 할 수있다. 예를 들어, 이것은 잘 작동합니다.

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

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

16 진수 색상을 RGB 구성 요소로 분리 해야하는 경우 red () , green () 및 blue () 함수를 사용하여 다음을 수행 할 수 있습니다.

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

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

내장 믹스 인이 있습니다 : transparentize($color, $amount);

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

금액은 0에서 1 사이 여야합니다.

공식 Sass 문서 (모듈 : Sass :: Script :: 함수)

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

이 솔루션을 사용해보십시오. 최고입니다 ... 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);

변수와 알파 투명도의 색상을 혼합해야하고 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};

  }

}