如何通过单击复选框（没有 JavaScript）在 SCSS 中缩放另一个 div？

Question

尝试在不使用 Javascript 的情况下缩放 SCSS 中的 div。我知道如何在 CSS 中执行此操作，但我无法在 SCSS 中获得正确的语法。我该怎么办？

当复选框被切换时，外部 div 应该变换。我正在使用 transform: scale().

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><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></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

在css或scss/sass中没有冒泡行为。在您的情况下，需要获取同一级别的元素并使用 ~ 选择器获取它。 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><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </div>

如何通过单击复选框（没有 JavaScript）在 SCSS 中缩放另一个 div？

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

transform

sass