Sass Funciones de Selector
Sass FuncionesLas funciones de selector de Sass se utilizan para inspeccionar y manipular selectores.
La siguiente tabla enumera las funciones de selector de Sass:
| Función | Descripción y ejemplos |
|---|---|
| is-superselector(super, sub) | Compara el alcance de coincidencia de dos selectores, es decir, determina sisuperel selector contienesubel alcance que coincide con el selector; si es así, devuelve true; de lo contrario, devuelve false. Ejemplo: is-superselector("div", "div.myInput") Resultado: true is-superselector("div.myInput", "div") Resultado: false is-superselector("div", "div") Resultado: true |
| selector-append(selectors) | Añade el segundo (o también puede haber varios) al final del primer selector.
selector. Ejemplo: selector-append("div", ".myInput") Resultado: div.myInput selector-append(".warning", "__a") Resultado: .warning__a |
| selector-extend(selector, extendee, extender) | |
| selector-nest(selectors) | Devuelve un nuevo selector que genera una lista anidada a partir de la lista de selectores proporcionada. Ejemplo: selector-nest("ul", "li") Resultado: ul li selector-nest(".warning", "alert", "div") Resultado: .warning div, alert div |
| selector-parse(selector) | Convierte el selector de cadenaselectoren una cola de selectores. Ejemplo: selector-parse("h1 .myInput .warning") Resultado: ('h1' '.myInput' '.warning') |
| selector-replace(selector, original, replacement) | Dado un selector, reemplaza original con replacement y devuelve una nueva cola de selectores. Ejemplo: selector-replace("p.warning", "p", "div") Resultado: div.warning |
| selector-unify(selector1, selector2) | Combina dos grupos de selectores en un selector compuesto. Si los dos selectores no se pueden combinar, devuelve null. Ejemplo: selector-unify("myInput", ".disabled") Resultado: myInput.disabled selector-unify("p", "h1") Resultado: null |
| simple-selectors(selectors) | Divide el selector compuesto en selectores individuales. Ejemplo: simple-selectors("div.myInput") Resultado: div, .myInput simple-selectors("div.myInput:before") Resultado: div, .myInput, :before |
Otras extensiones