使用 SASS 嵌套的优点

Posted 2023-03-06

【中文标题】使用 SASS 嵌套的优点

【英文标题】：advantages of nesting with SASS

【发布时间】：2014-05-19 16:53:48

【问题描述】：

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

【参考方案1】：

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

.login-dropdown 

   ...

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

带有&父引用

【讨论】：

该类将在单击按钮时添加 javascript。这是“-open”的好习惯吗？我从来没有见过这个。感谢您的回答

如何命名一个类由您决定（这只是一个偏好问题）：您可以重命名该类或在现有类旁边添加一个 state 类。在这里，我的答案只是与定义类的 sass 方式有关

我喜欢这个答案，只是我的编辑将它设置为红色，因为它无法识别标签、ID 或类名。但效果很好。