How to scale another div in SCSS by clicking checkbox (without JavaScript)? - sass

Question

Trying to scale a div in SCSS without using Javascript.
I know how to do this in CSS, but I can't get the syntax right in SCSS. How do I do?
When the checkbox is toggled, the external div should transform. I am using transform: scale().
Codepen link.
HTML:
<input type="checkbox" id="toggle" class="toggle" />
<div id="container">
<label for="toggle" class="nav-toggle-label">
Toggle me
</label>
</div>
<div class="responsive">
<ul class="nav-links">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
SCSS:
#container {
background: lightblue;
width: 10vw;
height: 10vh;
&:checked + .responsive {
transform: scale(1, 1);
}
}
.responsive {
background: orange;
width: 10vw;
height: 10vh;
transform: scale(1, 0);
}

Answer 1

In the css or scss/sass doesn't have bubbling behavior. In your case need to get the element in same level and get it with ~ selector. codepen example
#container {
background: lightblue;
width: 10vw;
height: 10vh;
}
.responsive {
background: orange;
width: 10vw;
height: 10vh;
transform: scale(1, 0);
}
#toggle:checked ~ .responsive {
transform: scale(1, 1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.1/sass.min.js"></script>
<input type="checkbox" id="toggle" class="toggle">
<div id="container">
<label for="toggle" class="nav-toggle-label">
Toggle me
</label>
</div>
<div class="responsive">
<ul class="nav-links">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>