SASS 中如何使用 & 符号

SASS 中如何使用 & 符号

SASS 是 CSS 的一种预处理语言，极大地提高了 CSS 的编写效率，其中 & 符号在 SASS 中扮演着非常重要的角色，本文介绍如何在 SASS 中使用 & 符号。

1. SASS 中 & 符号的基本用法

& 符号在 SASS 中表示“父选择器”，例如：

.btn {
  &-primary {
    background-color: blue;
  }
}

编译后：

.btn-primary {
  background-color: blue;
}

在这个例子中，& 符号代表了.btn 父选择器，将 btn 和 primary 两个字符串连接起来，生成了最终的选择器 .btn-primary。

1. & 符号的嵌套用法

& 符号可以用在嵌套选择器当中，例如：

.btn {
  &:hover {
    background-color: red;
  }
}

编译后：

.btn:hover {
  background-color: red;
}

这个例子中，& 符号用在了嵌套选择器中，表示了.btn:hover 这个选择器。

1. & 符号的多层嵌套用法

& 符号还可以用在多层嵌套选择器中，例如：

// javascriptcn.com 代码示例
.menu {
  li {
    &:hover {
      background-color: gray;
    }
    &.active {
      background-color: blue;
    }
  }
}

编译后：

.menu li:hover {
  background-color: gray;
}
.menu li.active {
  background-color: blue;
}

这个例子中，& 符号用在了多层嵌套选择器中，表示了 .menu li:hover 和 .menu li.active 两个选择器。

1. & 符号的指令用法

& 符号还可以用在 SASS 指令中，例如：

.btn {
  @media screen and (max-width: 768px) {
    &-small {
      font-size: 12px;
    }
  }
}

编译后：

@media screen and (max-width: 768px) {
  .btn-small {
    font-size: 12px;
  }
}

这个例子中，& 符号用在了 @media 指令中，表示了 .btn-small 这个选择器。

1. & 符号的特殊用法

& 符号还可以用在一些特殊的场景中，例如：

// javascriptcn.com 代码示例
.parent {
  .child {
    /* 不使用 & 符号 */
    background-color: yellow;
  }
  &.active {
    .child {
      /* 使用 & 符号 */
      background-color: blue;
    }
  }
}

编译后：

.parent .child {
  background-color: yellow;
}
.parent.active .child {
  background-color: blue;
}

这个例子中，& 符号用在了一些特殊的场景中，例如表示 .parent 或者 .parent.active 这两个选择器。

1. 总结

& 符号在 SASS 中扮演了非常重要的角色，可以用在基本用法、嵌套用法、多层嵌套用法、指令用法、特殊用法等多种场景中，可以帮助我们快速地生成复杂的选择器。使用 & 符号需要注意的是，在某些情况下不使用 & 符号也可以达到相同的效果，需要根据具体情况选择是否使用 & 符号。

示例代码：

// javascriptcn.com 代码示例
.btn {
  &-primary {
    background-color: blue;
  }
  &:hover {
    background-color: red;
  }
  @media screen and (max-width: 768px) {
    &-small {
      font-size: 12px;
    }
  }
  .child {
    /* 不使用 & 符号 */
    background-color: yellow;
  }
  &.active {
    .child {
      /* 使用 & 符号 */
      background-color: blue;
    }
  }
}

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6549beb77d4982a6eb3fea0a