Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Currently, we've implemented element-invisible and element-focusable as mixins. This is slightly inefficient because we have to apply all 6 properties each time the mixin is used.
With the release of Sass 3.2 we know have the ability to use %placeholder selectors that can be @extend-ed. That means we create one %element-invisible ruleset and any time we use @extend %element-invisisble; the selector is copied up to the placeholder's ruleset. (Rather then the other way around.)
| Comment | File | Size | Author |
|---|---|---|---|
| #7 | 1734124-7-element-invisible.patch | 1.91 KB | JohnAlbin |
Comments
Comment #1
JohnAlbinFixed. http://drupalcode.org/project/zen.git/commitdiff/eb2d60b
Comment #2
mgiffordCool. Thanks for pointing this out.
Comment #4
echoz CreditAttribution: echoz commentedI ran into a glitch with this when further separating stylesheets.
While it makes sense that the %placeholder selectors created for tabs and messages would only be extended from their same stylesheet, and would not be used elsewhere, something like element-invisible is likely to need to be extended from another stylesheet.
An extended class or placeholder selector can not be extended from a different stylesheet from where the class or %placeholder selector is found.
It will correctly group the selectors in the combined styles.css but will not show up in the individual compiled css files and results in a command line "failed to extend" warning, which I assume is about it not extending to the individual compiled css.
I'm a big fan of extends but the things I want to extend %element-invisible with don't necessarily belong grouped with it in modular-styles.scss.
Does this warrant reversing element-invisible back to a mixin?
Comment #5
barraponto CreditAttribution: barraponto commentedthere's a legend about a @mixin that defines a %placeholder selector the first time around (if there's none) and starts to @extend it from then on. @clearfix is expected to start behaving like that anytime soon.
Comment #6
echoz CreditAttribution: echoz commented#4 is resolved by #1839526: Convert all Sass files to be partials as I thought it would be, when we no longer had separate css files compiled for non sass users. Nice!
Comment #7
JohnAlbinI haven't started using separate aggregates for performance reasons yet. But that's a good point. What about this patch?
Comment #8
echoz CreditAttribution: echoz commentedBut with the new - all scss are partials except styles.scss - plan, I get only the one styles.css compiled, and as I thought would happen as well, anything @extend-ing %element-invisible; now works correctly, the selectors grouping once with the ruleset, and no warning triggered. Confused with #7.
Comment #9
JohnAlbinI've committed the patch in #7. If anything, it gives us flexibility if we want to use the mixin or the extend selectors. It doesn't change any of the compiled CSS.