在 Sass 中，你可以使用嵌套来表示 CSS 规则的层次结构，这使得样式表更加清晰和易读。以下是如何在 Sass 中使用嵌套的基本语法：

1. 基本嵌套
// 基本嵌套
nav {
  background-color: #333;

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

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        text-decoration: none;
        color: white;
      }
    }
  }
}

在这个例子中，Sass 的嵌套结构反映了 HTML 中 nav、ul、li 和 a 元素的层次结构。这使得样式表更加易读和维护。

2. 伪类和伪元素的嵌套
// 伪类和伪元素的嵌套
a {
  color: #3498db;

  &:hover {
    text-decoration: underline;
  }

  &::before {
    content: "\2022"; // Unicode 编码表示圆点
    margin-right: 5px;
  }
}

在这个例子中，& 符号表示对父选择器的引用。例如，&:hover 引用的是 a:hover，而 &::before 引用的是 a::before。

3. 嵌套属性
// 嵌套属性
button {
  font: {
    weight: bold;
    size: 16px;
    family: 'Helvetica Neue', sans-serif;
  };

  background: {
    color: #3498db;
    image: url('button-bg.png');
    position: top right;
    repeat: no-repeat;
  };
}

在这个例子中，嵌套属性使得可以更清晰地组织字体和背景属性。

请注意，虽然 Sass 的嵌套可以使得样式表更易读，但过度的嵌套可能导致生成的 CSS 过于具体和难以维护。保持适度的嵌套，避免出现过深的层次结构，有助于维护代码的可读性和可维护性。


转载请注明出处：http://www.zyzy.cn/article/detail/4324/sass