如何检索混合中的不透明度值

Question

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

现在，如果我使用混音，我可以用不同的方式设计我的css。但是，如何从rgba-string获得不透明度来确定字符串是否应该是透明的呢？正则表达式可以在混入中工作吗？

即:我会这样(我知道，regex部分是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>

​