Question

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

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

即：我会喜欢（我知道，正则表达式部分是js，但对于css / mixin来说类似）：

＆＃13;

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

＆＃13;

所以解决方案结果如下（任何人都应该感兴趣）：

＆＃13;

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

＆＃13;

链接到我使用的解决方案：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

＆＃13;

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 }

＆＃13;

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

＆＃13;

如何在mixin

1 个答案: