Sass 选择器函数

Sass 提供了一些内置的选择器函数，这些函数可以帮助你在编写 CSS 时更高效地处理选择器。通过使用这些函数，你可以减少重复代码，提高代码的可维护性，并且可以更好地控制样式。

匹配所有子元素

>

> 符号用于选择直接子元素。在 Sass 中，你可以使用这个符号来创建一个只选择直接子元素的选择器。虽然这本身不是一个函数，但了解它的使用方式对于理解选择器函数是非常有帮助的。

.parent {
  > .child {
    color: red;
  }
}

生成的 CSS：

.parent > .child {
  color: red;
}

@at-root

@at-root 可以让你将一个选择器或一组规则从当前的根节点移动到外层。这对于改变选择器的层次结构非常有用。

.parent {
  @at-root .child {
    color: blue;
  }
}

生成的 CSS：

.child {
  color: blue;
}

匹配特定元素

:matches()

:matches() 函数允许你在一个选择器中匹配多个元素。这在你希望对多个元素应用相同样式时非常有用。

:matches(.class1, .class2) {
  background-color: yellow;
}

生成的 CSS：

.class1, .class2 {
  background-color: yellow;
}

:not()

:not() 函数允许你排除某些元素。这对于需要对一组元素进行样式化，但排除其中一部分元素的情况非常有用。

:matches(.class1, .class2):not(.exclude-me) {
  border: 1px solid black;
}

生成的 CSS：

.class1:not(.exclude-me), .class2:not(.exclude-me) {
  border: 1px solid black;
}

模糊匹配和选择

:is()

:is() 函数类似于 :matches()，它允许你选择多个不同的元素或状态。这在你需要处理多种情况时非常有用。

:is(.class1, .class2:hover) {
  color: green;
}

生成的 CSS：

.class1, .class2:hover {
  color: green;
}

:has()

:has() 函数允许你根据某个元素是否包含其他元素来选择该元素。这对于需要根据内部结构来设置样式的场景非常有用。

:has(.inner-class) {
  border: 2px solid red;
}

生成的 CSS：

/* :has() 不被所有浏览器支持 */

注意：:has() 目前不是所有浏览器都支持。因此，在实际项目中使用时，请确保检查兼容性。

伪类和伪元素

::before 和 ::after

::before 和 ::after 是伪元素，它们允许你在元素的内容前后插入额外的内容。在 Sass 中，你可以使用这些伪元素来添加装饰性的内容。

.element::before {
  content: "Before ";
}

.element::after {
  content: " After";
}

生成的 CSS：

.element::before {
  content: "Before ";
}

.element::after {
  content: " After";
}

:nth-child(), :nth-of-type()

:nth-child() 和 :nth-of-type() 允许你选择基于其位置的元素。这对于需要为列表中的某些项设置特殊样式的场景非常有用。

li:nth-child(2n) {
  background-color: lightgray;
}

li:nth-of-type(3n+1) {
  font-weight: bold;
}

生成的 CSS：

li:nth-child(2n) {
  background-color: lightgray;
}

li:nth-of-type(3n+1) {
  font-weight: bold;
}

总结

通过使用这些选择器函数，你可以更加灵活和高效地编写 CSS。无论是为了提高代码的可读性和可维护性，还是为了实现更复杂的布局和样式效果，掌握这些选择器函数都是必不可少的技能。记住，虽然 Sass 提供了强大的功能，但在使用时也需要考虑浏览器的支持情况，以及最终生成的 CSS 的可读性和性能。