So erhalten Sie den Opazitätswert innerhalb eines Mixin

Question

So habe ich das folgende Problem, ich möchte in der Lage sein, eine Zeile in einer Tabelle auszuwählen, und wenn ich das mache, erhält eine Zeile eine aktive Hintergrundfarbe. Bis jetzt keine Probleme. Wenn der Benutzer jedoch die Hintergrundfarbe als transparent festlegen oder die Deckkraft in rgba() - string auf 0 setzen soll, dann möchte ich die darunterliegende Zeilenfarbe anzeigen.

Jetzt, wenn ich eine Mischung verwende, könnte ich meine CSS auf verschiedene Arten stylen. Aber wie kann ich die Opazität von der rgba-Zeichenkette erhalten, um zu bestimmen, ob die Zeichenkette transparent sein soll oder nicht? Funktioniert Regex innerhalb eines Mixins?

Ie: Ich würde so etwas wie (ich weiß, ist die regex Teil js aber somthing ähnlich für css/mixin):

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

So ist die Lösung stellte sich heraus, die folgenden sein (sollte jemand sein Interesse):

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

Link zur Lösung, die ich verwendet: The Sass Way

Answer 1

Klingt wie Sie einfach die Auswahl auf der tr definieren sollte, und fügen Sie den Benutzer gepflückt Farbe zur 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>