如何在mixin中检索不透明度值

Question

所以我有以下问题，我希望能够在表格中选择一行，并且当我这样做时，该行会获得活动的背景颜色。到目前为止没有问题。但是，如果用户应该将背景颜色指定为透明或将 rgba()-string 中的不透明度设置为 0，那么我想显示底层行颜色。

现在，如果我使用混合，我可以用不同的方式设置我的 CSS。但是如何从 rgba 字符串中获取不透明度以确定字符串是否应该是透明的？正则表达式可以在 mixin 中工作吗？

即：我想要类似的东西（我知道，正则表达式部分是 js，但与 css/mixin 类似）：

@mixin active-background-color($activeBackgroundColor){ 
	@if ($activeBackgroundColor.replace(/^.*,(.+)\)/,'$1') == 0) { 
		background-color: none;
	} @else {
        background-color: $activeBackgroundColor
    }
}

所以解决方案结果如下（如果有人感兴趣的话）：

@mixin active-background-color($color) {
    $alphaVal: alpha($color);
    @if ($alphaVal== 0){
      background-color: inherit;
    } @else {
      background-color: $color;
    }
}

链接到我使用的解决方案：The Sass Way

Answer 1

听起来你应该简单地定义 tr 上的选择 并将用户选择的颜色添加到 td：

tr { background-color: whitesmoke; }     //  default row color                  
tr:hover    { background-color: #ccc;  } //  default row selected color
tr:hover td { background-color: tomato } //  user defined selected color
//  if the user selects a transparent selection color
//  the default row selected color will show

table { width:100%; border-collapse: collapse;}
tr { cursor: pointer; }
td { font:1rem sans-serif; padding:.2rem; }

tr { background-color: whitesmoke; }                       
tr:hover    { background-color: #ccc;  }                   
tr:hover td { background-color: tomato }                   
tr:last-of-type:hover td { background-color: transparent } 

<table>
    <tr><td>One</td><td></td><td></td><td></td></tr>
    <tr><td>Two</td><td></td><td></td><td></td></tr>
    <tr><td>Three</td><td></td><td></td><td></td></tr>    
</table>