Adding to and holding a div's width value with SCSS? - html

Question

Basically I have a div that I'm trying to figure out how to increase the width based on checkboxes selected, and add to that width as more become checked.
Example HTML (sorry if the syntax is a bit off I'm writing from memory):
<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">
Example SCSS:
$add: 0px;
.barDiv {
width: $add;
height: 10px;
background-color: #444;
}
#cb50:checked {
~ .barDiv {
width: $add + 50px;
}
}
#cb30:checked {
~ .barDiv {
width: $add + 30px;
}
}
If I wrote it right then my setup works individually, but I want the width to be 80px when both are checked and instead it just switches between the two widths. I know I've seen this done with LESS and I'm hoping it's doable with SCSS as well. Thanks for any help!

Answer 1

For this to work you need the .barDiv to appear under both checkboxes in the DOM (the ~ selector is for next siblings, not prev).
You will also need to create the rule for when both checkboxes are checked.
Here is an example with pure css (note the sass is eventually compiled to css), I hope it is what you are looking for:
.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>