Sass 嵌套 CSS 规则

在本章中，我们将深入探讨 Sass 的嵌套规则。通过使用嵌套规则，我们可以更有效地组织和管理样式代码，使得 CSS 文件更加简洁、易于维护。

简介

嵌套规则允许我们在一个选择器内部定义另一个选择器。这不仅有助于减少重复的代码，还可以帮助我们更好地理解各个元素之间的关系。

基础嵌套规则

假设我们有一个 HTML 结构如下：

// www.javascriptcn.com code example
<div class="container">
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</div>

为了给这些元素添加样式，我们可以在 Sass 中使用嵌套规则：

// www.javascriptcn.com code example
.container {
  header {
    nav {
      ul {
        li {
          a {
            color: blue;
            &:hover {
              color: red;
            }
          }
        }
      }
    }
  }
}

编译后的 CSS 如下：

.container header nav ul li a {
  color: blue;
}

.container header nav ul li a:hover {
  color: red;
}

嵌套属性

除了嵌套选择器外，Sass 还支持嵌套属性。例如，我们经常需要为同一个元素设置多个与边距相关的属性，这时可以使用嵌套属性来简化代码：

.box {
  border: {
    style: solid;
    width: 1px;
    color: black;
  }
}

编译后的 CSS 如下：

.box {
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

嵌套部分选择器

有时候，我们可能希望对某个选择器的特定部分应用样式。在这种情况下，可以使用 & 符号来引用父选择器：

// www.javascriptcn.com code example
.button {
  background-color: #4CAF50;

  &:hover {
    background-color: #45a049;
  }

  &-primary {
    color: white;
  }
}

编译后的 CSS 如下：

// www.javascriptcn.com code example
.button {
  background-color: #4CAF50;
}

.button:hover {
  background-color: #45a049;
}

.button-primary {
  color: white;
}

使用嵌套规则的注意事项

虽然嵌套规则可以使我们的代码更加简洁，但过度使用它可能会导致代码难以阅读和维护。因此，在使用嵌套规则时，需要注意以下几点：

• 不要将过多的选择器嵌套在一起。通常建议将嵌套层级限制在 3 层以内。
• 使用嵌套规则时，保持代码结构清晰，避免不必要的复杂性。
• 对于简单的样式，直接编写 CSS 可能会比使用嵌套规则更直观。

嵌套规则的实际应用场景

嵌套规则非常适合用于复杂的 HTML 结构，尤其是在处理大量子元素或多个层级的元素时。通过合理地使用嵌套规则，可以显著提高代码的可读性和可维护性。

示例：导航菜单

假设我们需要为一个具有多级菜单的导航栏编写样式。使用嵌套规则可以帮助我们更有效地组织代码：

// www.javascriptcn.com code example
.navbar {
  background-color: #333;
  color: white;

  .menu {
    display: flex;
    justify-content: space-around;

    > li {
      position: relative;

      &:hover {
        background-color: #555;
      }

      .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;

        > li {
          padding: 10px;
        }

        &:hover {
          display: block;
        }
      }
    }
  }
}

编译后的 CSS 如下：

// www.javascriptcn.com code example
.navbar {
  background-color: #333;
  color: white;
}

.navbar .menu {
  display: flex;
  justify-content: space-around;
}

.navbar .menu > li {
  position: relative;
}

.navbar .menu > li:hover {
  background-color: #555;
}

.navbar .menu > li .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

.navbar .menu > li .submenu > li {
  padding: 10px;
}

.navbar .menu > li .submenu:hover {
  display: block;
}

总结

通过本章的学习，我们了解了如何在 Sass 中使用嵌套规则来简化和优化 CSS 代码。嵌套规则不仅使代码更具可读性，还能帮助我们更好地组织和管理样式。不过，在实际项目中，应根据具体情况灵活使用嵌套规则，以确保代码既简洁又易维护。