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值？

Answer 1

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" */ 

Answer 2

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

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

金额应该在0到1之间;

官方Sass文档（模块：Sass :: Script :: Functions）

Answer 3

你可以试试这个解决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); 

Answer 4

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