SASS | Funciones del selector

Las funciones de selector ayudan a verificar y cambiar los selectores de CSS en la hoja de estilo. Todas las funciones, excepto selector-nest(), impiden el uso del selector principal.

1. selector-nest($selectors…): Este método devuelve un nuevo selector que contiene una lista anidada de selectores CSS basados ​​en la lista dada.
   • Ejemplo:

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

   • Producción:

     .warning div, alert div

2. selector-parse($selector): este método devuelve una lista de strings contenidas en «selector» usando el mismo formato que el selector padre.
   • Ejemplo:

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

   • Producción:

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

3. selector-unify($selector1, $selector2): este método devuelve un nuevo selector que coincide solo con los elementos que coinciden con selector1 y selector2.
   • Ejemplo 1:

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

   • Producción:

     myInput.disabled

   • Ejemplo 2:

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

   • Producción:

     NULL

4. selectores simples ($selector): este método devuelve una lista de los selectores individuales presentes en «selector», que debe ser un selector compuesto.
   • Ejemplo:

     simple-selectors("div.myInput")

   • Producción:

     div, .myInput

5. is-superselector($super, $sub): este método devuelve un valor booleano que indica si el selector dado en «super» coincide con todos los elementos dados en «sub».
   • Ejemplo 1:

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

   • Producción:

     true

   • Ejemplo 2:

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

   • Producción:

     false

6. selector-replace($selector, $original, $replacement): este método devuelve un nuevo selector con el selector dado en «reemplazo» en lugar del selector dado en «original».
   • Ejemplo:

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

   • Producción:

     q.hello

7. selector-append($selectors): este método devuelve un nuevo selector con el segundo y los siguientes selectores agregados al primero sin espacios.
   • Ejemplo 1:

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

   • Producción:

     div.myInput

   • Ejemplo 2:

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

   • Producción:

     warning__a

8. selector-extend($selector, $extendee, $extender): Este método extiende el $selector como regla @extend. Devuelve una copia de $selector modificada con la siguiente regla @extend:

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