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

Sass - 배경 불투명도를 위해 16진수를 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가 아닌 HEX입니다.

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

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

이 믹스인에서 HEX 값을 사용하려면 어떻게 해야 합니까?

rgba() 함수는 10진수 RGB 값뿐만 아니라 단일 16진수 색상도 허용할 수 있습니다.예를 들어, 다음과 같이 하면 됩니다.

@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: 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::스크립트:함수)

SAS의 내장 rgba() 함수를 사용합니다.

rgba($color, $alpha)

예.

rgba(#00aaff, 0.5) // Output: rgba(0, 170, 255, 0.5)

고유 변수를 사용한 예제:

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

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

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

SAS 문서 인용하기

투명화() 함수는 알파 채널을 고정된 양만큼 감소시키므로 종종 원하는 효과가 아닙니다.

당신은 이 해결책을 시도할 수 있습니다, 최고입니다...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};

  }

}

사용할 수 있습니다.PostCSS그것과 함께postcss-rgbrgba() 규칙에서 16진수 지원을 사용하도록 설정하는 플러그인: arpadHegedus/postcss-rgb

언급URL : https://stackoverflow.com/questions/10929458/sass-converting-hex-to-rgba-for-background-opacity