Sass -转换十六进制为RGBa的背景不透明度

我有下面的Sass mixin，它是RGBa例子的半完整修改:

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

我已经应用了$opacity ok，但现在我被$color部分卡住了。 我将发送到mixin的颜色将是HEX而不是RGB.

我的例子是:

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

我如何在这个mixin中使用HEX值?

205133 次浏览
小开

你可以试试这个解决方案，是最好的…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()函数既可以接受十六进制颜色，也可以接受十进制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($color);
$green: green($color);
$blue: blue($color);


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

有一个内置的mixin: transparentize($color, $amount);

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

数量应该在0到1之间;

Sass官方文档(Module: Sass::Script::Functions

小开

SASS有内置的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);}

引用SASS文档:

使透明()函数将alpha通道减少a 固定用量，往往达不到预期效果
小开

如果你需要从变量和alpha透明度中混合颜色，并使用包含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-rgb插件，在rgba()规则中启用十六进制支持:arpadHegedus / postcss-rgb


提交答案