Sass – 将hex转换为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部分。 我将发送到mixin的颜色将是HEX而不是RGB。

我的例子使用将是:

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

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

rgba()函数可以接受一个hex颜色以及十进制RGB值。 例如,这将工作得很好:

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

如果您需要将hex颜色分解为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文档(模块:Sass :: Script :: Functions)

你可以试试这个解决scheme,是最好的… 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); 

SASS有一个内置的rgba()函数来评估值。

 rgba($color, $alpha) 

例如

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

一个使用自己的variables的例子:

 $my-color: #00aaff; $my-opacity: 0.5; .my-element { background-color: rgba($my-color, $my-opacity); } 

输出:

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