html - 使用 SCSS 添加并保持 div 的宽度值？

Question

基本上我有一个 div，我试图弄清楚如何根据选中的复选框增加宽度，并在选中更多复选框时增加该宽度。

HTML 示例(抱歉，我凭内存写的语法有点不对):

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

示例 SCSS:

$add: 0px;

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

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

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

如果我写得正确，那么我的设置可以单独工作，但我希望宽度为 80px，当两者都被选中时，它只是在两个宽度之间切换。我知道我已经看到用 LESS 完成了这个，我希望它也可以用 SCSS 完成。感谢您的帮助!

Answer 1

1. 为此，您需要将 .barDiv 显示在 DOM 中的两个复选框下方(~ 选择器用于下一个 sibling ，而不是上一个)。
2. 您还需要为同时选中两个复选框创建规则。

这是一个纯 css 的例子(注意 sass 最终被编译成 css)，我希望它是你正在寻找的:

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