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.)

Files: 
CommentFileSizeAuthor
#7 1734124-7-element-invisible.patch1.91 KBJohnAlbin

Comments

JohnAlbin’s picture

mgifford’s picture

Cool. Thanks for pointing this out.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

echoz’s picture

Status:Closed (fixed)» Active

I 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?

barraponto’s picture

there'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.

echoz’s picture

Status:Active» Fixed

#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!

JohnAlbin’s picture

Status:Fixed» Needs review
StatusFileSize
new1.91 KB

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?

I haven't started using separate aggregates for performance reasons yet. But that's a good point. What about this patch?

echoz’s picture

But 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.

JohnAlbin’s picture

Status:Needs review» Fixed

I'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.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.