SASS |选择器功能

选择器函数有助于检查和更改样式表中的 CSS 选择器。除了 selector-nest() 之外的所有函数都阻止使用父选择器。

1. selector-nest($selectors…)：此方法返回一个新的选择器，其中包含基于给定列表的 CSS 选择器的嵌套列表。
   • 例子：

     selector-nest(".warning", "alert", "div")
     

   • 输出：

     .warning div, alert div

2. selector-parse($selector)：此方法使用与父选择器相同的格式返回包含在“选择器”中的字符串列表。
   • 例子：

     selector-parse("h1 .myInput .warning")
     

   • 输出：

     ('h1' '.myInput' '.warning')

3. selector-unify($selector1, $selector2)：这个方法返回一个新的选择器，它只匹配被 selector1 和 selector2 匹配的元素。
   • 示例 1：

     selector-unify("myInput", ".disabled")
     

   • 输出：

     myInput.disabled

   • 示例 2：

     selector-unify("p", "h1")
     

   • 输出：

     NULL

4. simple-selectors($selector)：此方法返回“selector”中存在的单个选择器的列表，它应该是一个复合选择器。
   • 例子：

     simple-selectors("div.myInput")
     

   • 输出：

     div, .myInput

5. is-superselector($super, $sub)：这个方法返回一个布尔值，告诉“super”中给出的选择器是否匹配“sub”中给出的所有元素。
   • 示例 1：

     is-superselector("div", "div.myInput")
     

   • 输出：

     true

   • 示例 2：

     is-superselector("div.myInput", "div")
     

   • 输出：

     false

6. selector-replace($selector, $original, $replacement)：这个方法返回一个新的选择器，用“replacement”中给出的选择器代替“original”中给出的选择器。
   • 例子：

     selector-replace("p.hello", "p", "q")
     

   • 输出：

     q.hello

7. selector-append($selectors)：这个方法返回一个新的选择器，第二个和下一个选择器被附加到第一个没有任何空格。
   • 示例 1：

     selector-append("div", ".myInput")
     

   • 输出：

     div.myInput

   • 示例 2：

     selector-append(".warning", "__a")
     

   • 输出：

     warning__a

8. selector-extend($selector, $extendee, $extender)：此方法将 $selector 扩展为 @extend 规则。它返回使用以下@extend 规则修改的 $selector 副本：

   #{$extender} {
       @extend #{$extendee};
   }