SASS 编译时的 "&-" 问题和解决方法

在使用 SASS 进行前端开发时，我们经常会遇到 "&-" 这个符号，它表示的是父级选择器。但是在编译的时候，这个符号会出现一些问题，本文将会详细讲解这个问题的出现原因以及解决方法。

问题描述

在 SASS 中，我们可以使用 "&" 符号来表示父级选择器，例如：

.parent {
  &-child {
    color: red;
  }
}

编译后的 CSS 代码为：

.parent-child {
  color: red;
}

这个例子中，"&" 符号将父级选择器 ".parent" 和子级选择器 "-child" 连接起来，生成了 ".parent-child" 的选择器。

但是，如果父级选择器中包含了 "&" 符号，例如：

.parent {
  &-child {
    color: red;
    &-grandchild {
      font-size: 16px;
    }
  }
}

编译后的 CSS 代码为：

.parent-child-grandchild {
  color: red;
  font-size: 16px;
}

这个例子中，"&" 符号在子级选择器中出现了两次，导致编译后的选择器 ".parent-child-grandchild" 不符合预期。

问题原因

在编译 SASS 代码时，编译器会将 "&" 符号替换为父级选择器，例如：

.parent {
  &-child {
    color: red;
  }
}

编译后的代码为：

.parent-child {
  color: red;
}

编译器将 "&" 符号替换为了父级选择器 ".parent"，生成了 ".parent-child" 的选择器。

但是，在子级选择器中出现 "&-" 这个组合符号时，编译器会将它识别为一个新的选择器，例如：

.parent {
  &-child {
    color: red;
    &-grandchild {
      font-size: 16px;
    }
  }
}

编译后的代码为：

.parent-child-grandchild {
  color: red;
  font-size: 16px;
}

编译器将 "&-" 符号识别为了一个新的选择器 "-grandchild"，生成了 ".parent-child-grandchild" 的选择器。

解决方法

为了解决这个问题，我们可以使用 "@at-root" 指令来避免 "&-" 符号的重复替换。例如：

.parent {
  &-child {
    color: red;
    @at-root &-grandchild {
      font-size: 16px;
    }
  }
}

编译后的代码为：

.parent-child {
  color: red;
}
.parent-child-grandchild {
  font-size: 16px;
}

在这个例子中，"@at-root" 指令将 "&-" 符号的替换限制在了父级选择器中，避免了重复替换的问题。

除了 "@at-root" 指令，我们还可以使用 "@extend" 指令来避免 "&-" 符号的重复替换。例如：

-- -------------------- ---- -------
------- -
  ------- -
    ------ ----
  -
-
----------- -
  ---------- -----
  ------- --------------
-

编译后的代码为：

.parent-child,
.grandchild {
  color: red;
}
.grandchild {
  font-size: 16px;
}

在这个例子中，"@extend" 指令将 ".grandchild" 选择器扩展到了 ".parent-child" 选择器中，避免了重复替换的问题。

总结

在使用 SASS 进行前端开发时，"&-" 符号的重复替换问题是一个常见的问题。为了避免这个问题，我们可以使用 "@at-root" 指令或者 "@extend" 指令来限制 "&-" 符号的替换范围，从而避免重复替换的问题。希望本文的介绍能够帮助读者更好地理解 SASS 的编译机制，提高前端开发的效率。

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