css - 使用 SASS 嵌套的优点

Question

我在每个元素中都使用 SASS，并且以模块化方式工作。我几乎嵌套了所有东西，因为我发现它的组织方式在你的 scss 文件中设置样式有很大的优势。我遵循的规则是我的嵌套元素中的括号不应超过 3 个。

但我发现也许我做得太过分了，我失去了对它真正优势的把握。在下面我添加了一个示例，在该示例中我创建了一个类，它否决了原始 CSS 规则以在单击按钮后更改其属性，即代码末尾的 login-dropdown-open。

对于我自己的组织，我想将它嵌套在登录下拉列表中，但我会得到以下 CSS 输出:login-dropdown.login-dropdown-open。这有效，但我认为它不正确。

有人可以向我解释一些有关此事的准则吗？

.login-dropdown{
    background: $grey-light-light;
    border: 0;
    @include box-sizing(border-box);
    display: block;
    height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    position: relative;
    @include transition(all, 0.25s, ease);
    z-index: 1;

    label, input, a{
        display: block;
    }

    label{
        font-size: 2rem;
        line-height: 3rem;
    }

    input:not([type=submit]){
        border: 1px solid $mint-dark;
        @include box-sizing(border-box);
        font-size: 1.4rem;
        height: 3.5rem;
        margin: 0 0 2rem 0;
        padding: 0 1rem;
        width: 100%;
    }

    input[type=submit]{
        background: $mint-dark;
        width: 100%;
        border: 0;
        border-radius: 5px;
        color: $white-main;
        font-size: 1.6rem;
        margin: 0 0 2rem 0;
        height: 4rem;
    }
}

.login-dropdown-open{
    border: 1px solid $mint-dark;
    height: auto;
    opacity: 1;
    overflow: auto;
    padding: 1rem;
}

Answer 1

我认为你应该像这样插入最后一条规则:

.login-dropdown {

   ...

   &-open{
      border: 1px solid $mint-dark;
      height: auto;
      opacity: 1;
      overflow: auto;
      padding: 1rem;
   }
}

使用 & 父引用