Undefined selector warning during @extend compilation
0 reputation · 11 Jun 2022, 16:12 UTC
Sass Selector Inheritance
The @extend directive is designed to allow a selector to inherit rules from another existing selector, merging them into a single rule in the final CSS output. However, the compiler behavior varies when the target selector is not defined within the same stylesheet or is missing from the current scope.
Scope and Compilation Constraints
When using @extend, the target selector must be defined prior to the extension call. If the compiler cannot locate the referenced selector, it may trigger a compile warning rather than a hard error, potentially leading to silent failures where styles are not applied to the intended elements.
Technical Uncertainty
In modern Sass versions, specifically when utilizing @use for module scoping, the visibility of placeholder selectors (%.example) across different partials is restricted. This creates uncertainty regarding how the compiler handles extensions of placeholders that are defined in a module but not explicitly exported or accessible to the extending file.
- Does the Sass compiler treat an undefined placeholder selector differently than an undefined standard CSS selector during
@extend? - What is the specific mechanism for verifying that a cross-module extension has failed silently versus being successfully compiled?