与SASS嵌套的优点

丹尼尔·拉米雷斯·埃斯库德罗

我为每个项目使用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;
}

Fabrizio Calderan喜欢树木

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

.login-dropdown {

   ...

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

与&父母参考

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。