Logo

菜单

发布于 2026-01-06 0 阅读
0

Sass 中的嵌套

Sass 中的嵌套

还记得 HTML 中的嵌套吗？就是我们经常做的，把一个元素放在<p>一个标签里，再把<div>另一个元素放在另一个标签<span>里，像<p>这样？

    <body>
        <div>
            <p>
                <span></span>
            </p>
        <div>
    </body>
Enter fullscreen mode Exit fullscreen mode

我猜你肯定知道。SCSS 允许我们以类似的方式嵌套 CSS 选择器。嵌套是创建 CSS 规则的快捷方式。因此，我们无需编写大量 CSS 代码来精确地设置元素样式，只需将其嵌套即可。举个例子。在 CSS 中，我们想要li以某种方式设置特定侧边栏的样式，以下是我们的定位方式。

   #sidebar ul li {
      background-color: #F2F2F2;
      color: #404040;
    }
Enter fullscreen mode Exit fullscreen mode

利用嵌套，我们只需执行以下操作即可获得相同的结果。

   #sidebar {
       ul {
           li {
               background-color: #F2F2F2;
               color: #404040;
            }
        }
    }
Enter fullscreen mode Exit fullscreen mode

这样组织结构更清晰，层级结构也更容易理解。而且结果相同。你可以直接给选择器本身添加属性，而不仅仅是给嵌套的选择器添加属性。

   #sidebar {
        position: fixed;
        height: 100%;

        ul {
            list-style-type: none;
            padding: 0;

            li {
                background-color: #F2F2F2;
                color: #404040;
            }
        }
    }
Enter fullscreen mode Exit fullscreen mode

这将编译成

    #sidebar {
        position: fixed;
        height: 100%; }
    #sidebar ul {
        list-style-type: none;
        padding: 0; }
    #sidebar ul li {
        background-color: #F2F2F2;
        color: #404040; }
Enter fullscreen mode Exit fullscreen mode

你还可以嵌套媒体查询。

     #sidebar {
        position: fixed;
        height: 100%;

        @media (max-width:768px) {
            left: -9999;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }
    }
Enter fullscreen mode Exit fullscreen mode

这将编译成

    #sidebar {
        position: fixed;
        height: 100%; }
    @media (max-width: 768px) {
        #sidebar {
            left: -9999; } }
    #sidebar ul {
        list-style-type: none;
        padding: 0; }
Enter fullscreen mode Exit fullscreen mode

我们甚至可以嵌套 CSS 属性。

   li {
       background: {
           image: url("image.jpg");
           position: fixed;
           }
       margin : {
           top: 1rem;
           left: 2rem;
           right: 1rem;
           }
      }
Enter fullscreen mode Exit fullscreen mode

这将编译成

    li {
        background-image: url("image.jpg");
        background-position: fixed;
        margin-top: 1rem;
        margin-left: 2rem;
        margin-right: 1rem; }
Enter fullscreen mode Exit fullscreen mode

嵌套确实让事情变得简单得多。接下来我们来看看如何使用 & 符号&来嵌套伪类和元素，以及如何并排放置选择器。


在 Sass 中，嵌套中的 & 符号&是一个非常实用的功能。如果想要将选择器紧密连接在一起，中间没有任何空格，就必须使用 & 符号。这在嵌套伪类和伪元素时尤其有用。如果您想了解伪类和伪元素是什么，可以阅读这篇文章。&此外，当需要并排放置类来选择具有这些类的元素时，& 符号也很有用。让我们通过一个例子来理解它。

   .list {
       background-color: white;
       color: #404040;

       /* Pseudo-class */
       &:hover {
           background-color: blue; 
           color: white
       }

       /* Pseudo-element */
       &:before {
            content: "List ";
       }  

       /* Placing selectors side by side */
       &.active {
            border-left: 3px solid blue;
            color: blue;
       }
   }
Enter fullscreen mode Exit fullscreen mode

这将编译成

   .list {
       background-color: white;
       color: #404040; }

   .list:hover {
       background-color: blue;
       color: white; }

   .list:before {
       content: "List ";
       width: 30px; }

   .list.active {
       border-left: 3px solid blue;
       color: blue; }
Enter fullscreen mode Exit fullscreen mode

你看它们是如何并排连接在一起，中间没有任何空隙的？这就是句点的威力&。

注意！！！
嵌套非常有用，可以让我们的 CSS 代码更清晰，但我们不希望滥用它。过度嵌套选择器就是滥用嵌套的一种方式。请看一个过度嵌套的例子。

    div {
       .sidebar{
            position: fixed;
            height:  100%;

            ul {
                list-style-type: none;
                padding: none;

                .list {
                    background-color: white;
                    color: black;

                    a {
                        text-decoration: none;
                        i{
                           &:hover {
                                background:  transparent;
                            }
                        }
                    }
                }
            }
        }
    }
Enter fullscreen mode Exit fullscreen mode

这将编译成

   div .sidebar {
       position: fixed;
       height: 100%; }
   div .sidebar ul {
       list-style-type: none;
       padding: none; }
   div .sidebar ul .list {
       background-color: white;
       color: black; }
   div .sidebar ul .list a {
       text-decoration: none; }
   div .sidebar ul .list a i:hover {
          background: transparent; }
Enter fullscreen mode Exit fullscreen mode

看看最后一个选择器，它嵌套了六层。这也太多了吧。这里面有很多问题。

  1. 文件大小增加：查看它添加到 CSS 文件中的代码量。这反过来会增加文件大小并影响性能。
  2. 特异性问题：过于具体的样式本身就是一个问题。选择器中过于具体的样式很难被其他选择器覆盖。
  3. 可维护性：这也是个问题。顶层选择器中任何一个选择器的更改都会影响其他选择器。
  4. 样式也不容易重复使用。

一般来说，嵌套层数不要超过四层。最好少于四层。与其使用多层嵌套，不如利用嵌套来命名选择器，这样既能保证选择器的精确性，又能避免嵌套层数过多的问题。请参见以下示例。

   .sidebar {
       position: fixed;
       height: 100%;

       &-list {
           background-color: white;

           &-link {
               text-decoration: none;
            }
        }
    }
Enter fullscreen mode Exit fullscreen mode

这将编译成

   .sidebar {
      position: fixed;
      height: 100%; }
   .sidebar-list {
      background-color: white; }
   .sidebar-list-link {
      text-decoration: none; }
Enter fullscreen mode Exit fullscreen mode

看看这样改进了多少。我们充分利用了嵌套的优势，同时又保持了代码的可维护性和可重用性。所以关键在于如何巧妙地运用嵌套，既不影响性能，又能保证代码的可维护性。

到此结束。感谢阅读。:)
有任何问题或补充吗？请留言。

文章来源：https://dev.to/sarah_chima/nesting-in-sass-bme
在 Node 和 Express....
今日灵感：React Router...