SASS 如何实现样式表的多层嵌套

在前端开发中，样式表是一个非常重要的部分。而 SASS 是一个非常流行的 CSS 预处理器，它可以让我们更加高效地编写样式表。其中，多层嵌套是 SASS 中非常重要的一个特性，它可以让我们更加方便地组织样式表。

基本语法

在 SASS 中，我们可以使用嵌套语法来组织样式表。比如，我们可以这样写：

// javascriptcn.com 代码示例
.container {
  width: 100%;
  height: 500px;
  background-color: #fff;

  .header {
    height: 100px;
    background-color: #f00;
  }

  .content {
    height: 300px;
    background-color: #0f0;

    .sidebar {
      width: 200px;
      background-color: #00f;
    }

    .main {
      width: calc(100% - 200px);
      background-color: #f0f;
    }
  }

  .footer {
    height: 100px;
    background-color: #ff0;
  }
}

这样，我们就可以将 .container 下的样式和 .header、.content、.footer 下的样式都组织在一起。在编译之后，它会被转换成以下的 CSS 代码：

// javascriptcn.com 代码示例
.container {
  width: 100%;
  height: 500px;
  background-color: #fff;
}

.container .header {
  height: 100px;
  background-color: #f00;
}

.container .content {
  height: 300px;
  background-color: #0f0;
}

.container .content .sidebar {
  width: 200px;
  background-color: #00f;
}

.container .content .main {
  width: calc(100% - 200px);
  background-color: #f0f;
}

.container .footer {
  height: 100px;
  background-color: #ff0;
}

父元素选择器

在 SASS 中，我们还可以使用 & 符号来引用父元素选择器。比如，我们可以这样写：

// javascriptcn.com 代码示例
.container {
  width: 100%;
  height: 500px;
  background-color: #fff;

  .header {
    height: 100px;
    background-color: #f00;

    &:hover {
      background-color: #00f;
    }
  }

  .content {
    height: 300px;
    background-color: #0f0;

    .sidebar {
      width: 200px;
      background-color: #00f;

      &.active {
        background-color: #f00;
      }

      &:hover {
        background-color: #0ff;
      }
    }

    .main {
      width: calc(100% - 200px);
      background-color: #f0f;

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

  .footer {
    height: 100px;
    background-color: #ff0;

    a {
      color: #fff;

      &:hover {
        color: #f00;
      }
    }
  }
}

这样，我们就可以在 .header、.sidebar、.main、.footer a 中使用 & 符号来引用它们的父元素选择器。在编译之后，它会被转换成以下的 CSS 代码：

// javascriptcn.com 代码示例
.container {
  width: 100%;
  height: 500px;
  background-color: #fff;
}

.container .header {
  height: 100px;
  background-color: #f00;
}

.container .header:hover {
  background-color: #00f;
}

.container .content {
  height: 300px;
  background-color: #0f0;
}

.container .content .sidebar {
  width: 200px;
  background-color: #00f;
}

.container .content .sidebar.active {
  background-color: #f00;
}

.container .content .sidebar:hover {
  background-color: #0ff;
}

.container .content .main {
  width: calc(100% - 200px);
  background-color: #f0f;
}

.container .content .main:hover {
  background-color: #ff0;
}

.container .footer {
  height: 100px;
  background-color: #ff0;
}

.container .footer a {
  color: #fff;
}

.container .footer a:hover {
  color: #f00;
}

继承

在 SASS 中，我们还可以使用 @extend 来实现样式的继承。比如，我们可以这样写：

// javascriptcn.com 代码示例
.button {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #000;
  font-size: 16px;
  text-align: center;

  &.primary {
    background-color: #f00;
    color: #fff;
  }

  &.danger {
    background-color: #f0f;
    color: #fff;
  }
}

.submit-button {
  @extend .button;
  @extend .button.primary;
}

这样，我们就可以将 .submit-button 继承 .button 和 .button.primary 的样式。在编译之后，它会被转换成以下的 CSS 代码：

// javascriptcn.com 代码示例
.button, .submit-button {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #000;
  font-size: 16px;
  text-align: center;
}

.button.primary, .submit-button {
  background-color: #f00;
  color: #fff;
}

.button.danger {
  background-color: #f0f;
  color: #fff;
}

混合器

在 SASS 中，我们还可以使用混合器来实现样式的复用。比如，我们可以这样写：

// javascriptcn.com 代码示例
@mixin button {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #000;
  font-size: 16px;
  text-align: center;
}

@mixin primary-button {
  @include button;
  background-color: #f00;
  color: #fff;
}

@mixin danger-button {
  @include button;
  background-color: #f0f;
  color: #fff;
}

.button {
  @include button;
}

.primary-button {
  @include primary-button;
}

.submit-button {
  @include primary-button;
}

这样，我们就可以将样式的复用抽象成混合器。在编译之后，它会被转换成以下的 CSS 代码：

// javascriptcn.com 代码示例
.button, .primary-button, .submit-button {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #000;
  font-size: 16px;
  text-align: center;
}

.primary-button, .submit-button {
  background-color: #f00;
  color: #fff;
}

.danger-button {
  background-color: #f0f;
  color: #fff;
}

总结

在 SASS 中，多层嵌套是一个非常重要的特性，它可以让我们更加方便地组织样式表。除此之外，父元素选择器、继承和混合器也是非常实用的特性。希望本文可以帮助大家更加深入地了解 SASS，提高样式表的编写效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650aa56295b1f8cacd4ffa23