Hinzufügen und Halten einer div's width Wert mit SCSS?

Question

Im Grunde habe ich eine Div, die ich versuche herauszufinden, wie die Breite basierend auf ausgewählten Kontrollkästchen zu erhöhen, und zu dieser Breite hinzufügen, wie mehr überprüft werden.

Beispiel HTML (sorry, wenn die Syntax ein bisschen weg ist, ich bin aus dem Speicher zu schreiben):

<div class="barDiv"></div> 

<label for="cb50"><h2>Click me to add 50!</h2></label> 
<input type="checkbox" id="cb50"> 

<label for="cb30"><h2>Click me to add 30!</h2></label> 
<input type="checkbox" id="cb30"> 

Beispiel SCSS:

$add: 0px; 

.barDiv { 
    width: $add; 
    height: 10px; 
    background-color: #444; 
} 

#cb50:checked { 
    ~ .barDiv { 
     width: $add + 50px; 
    } 
} 

#cb30:checked { 
    ~ .barDiv { 
     width: $add + 30px; 
    } 
} 

Wenn ich es geschrieben habe Recht dann mein Setup funktioniert individuell , aber ich möchte, dass die Breite 80px beträgt, wenn beide überprüft werden und stattdessen nur zwischen den beiden Breiten gewechselt wird. Ich weiß, dass ich das mit LESS gesehen habe und ich hoffe, dass es auch mit SCSS machbar ist. Danke für jede Hilfe!

Answer 1

1. Dazu Sie die .barDiv unter beiden Kontrollkästchen in dem DOM erscheinen müssen arbeiten (der ~ Selektor ist für die nächsten Geschwister, nicht prev).
2. Sie müssen auch die Regel erstellen, wenn beide Kontrollkästchen aktiviert sind. Hier

ist ein Beispiel mit reinem CSS (man beachte die sass wird schließlich zu CSS kompiliert), ich hoffe, es ist das, was Sie suchen:

.barDiv { 
 
    width: 0; 
 
    height: 10px; 
 
    background-color: #444; 
 
} 
 
#cb50:checked ~ .barDiv { 
 
    width: 50px; 
 
} 
 
#cb30:checked ~ .barDiv { 
 
    width: 30px; 
 
} 
 
#cb50:checked ~ #cb30:checked ~ .barDiv { 
 
    width: 80px; 
 
}

<label for="cb50"><h2>Click me to add 50!</h2></label> 
 
<input type="checkbox" id="cb50"> 
 

 
<label for="cb30"><h2>Click me to add 30!</h2></label> 
 
<input type="checkbox" id="cb30"> 
 

 
<div class="barDiv"></div>