Question

我为每个项目使用SASS，我模块化地工作。我几乎把所有东西都嵌套了，因为我发现它的组织在你的scss文件中设置它的风格很大。我遵循我的嵌套元素中不应超过3个括号的规则。

但我发现也许我过度使用它并且失去了它的真正优势。在下面我添加一个示例，其中我创建了一个类，它取代了原始的CSS规则，一旦点击了一个按钮就改变了它的属性，在代码的末尾是login-dropdown-open。

对于我自己的组织，我想将它嵌入login-dropdown中，但我会得到以下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;
   }
}

使用&父参考

与SASS嵌套的优点

1 个答案: