249

次の Sass mixin があります。これは、RGBa の例を半分完全に変更したものです。

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

私は問題なく申請$opacityしましたが、今はその部分に行き詰まってい$colorます。mixin に送信する色は、RGB ではなく HEX になります。

私の使用例は次のとおりです。

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

この mixin 内で HEX 値を使用するにはどうすればよいですか?

4

5 に答える 5

472

rgba () 関数は、単一の 16 進数の色と 10 進数の 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" */
于 2012-06-07T21:00:24.603 に答える
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);
于 2012-06-07T10:06:16.640 に答える