在 Sass 中，你可以使用嵌套属性来更清晰地组织和表示一组相关的 CSS 属性。以下是嵌套属性的基本语法和示例：

1. 基本嵌套属性
// 基本嵌套属性
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;
  };
}

在这个例子中，font 和 background 都是嵌套属性，分别包含了相关的子属性。这使得代码更加结构化和易读。

2. 嵌套中的属性
// 嵌套中的属性
nav {
  ul {
    list-style: none;
    margin: {
      top: 0;
      bottom: 0;
    };

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

      a {
        color: #333;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

在这个例子中，margin 包含了 top 和 bottom 子属性，使得样式表更加结构化。

3. 使用父选择器的属性嵌套
// 使用父选择器的属性嵌套
button {
  border: {
    width: 1px;
    style: solid;
    color: #ccc;
  }

  &:hover {
    border: {
      color: #3498db;
    }
  }
}

在这个例子中，:hover 伪类中的 border 嵌套继承了 button 的基本 border 属性，只改变了 color 子属性。

嵌套属性可以帮助你更清晰地组织和表示一组相关的 CSS 属性，提高样式表的可读性。然而，要谨慎使用嵌套，避免创建过深层次的结构，以免生成的 CSS 规则变得过于具体和难以维护。


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