Sass 选择器嵌套

学习使用 Sass 的选择器嵌套来编写更清晰、层级分明的样式。 · 难度：入门 · +15XP

选择器嵌套概述

Sass 允许在选择器内部嵌套子选择器，反映 HTML 结构，减少重复父选择器书写，提高代码可读性。

基本嵌套

nav {
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        text-decoration: none;
      }
    }
  }
}

父选择器引用 &

使用 & 符号引用父选择器，常用于伪类或组合选择器。

.button {
  background: blue;
  &:hover {
    background: darkblue;
  }
  &--primary {
    background: green;
  }
}

嵌套规则与限制

最佳实践

.card {
  &__header { /* BEM 风格 */ }
  &__body { }
  &__footer { }
  &--featured { }
}

练习提示

使用嵌套编写一个导航栏组件，包含 logo、菜单项和搜索框，并使用 & 引用父选择器处理悬停状态。