Stats on SCSS usage of control flow, conditional logic, nesting, custom functions

[LeaVerou]

This is part of a series of issues (previous: Color manipulation) about our findings wrt SCSS usage in the wild, as a data-driven way to inform future directions of CSS evolution. While studying CSS usage tells us a lot about what authors are currently doing, preprocessor usage tells us a lot about what authors want to be doing. We studied nearly 300K SCSS stylesheets, extracted from HTTPArchive's corpus of 6 million websites through sourcemaps.

Findings:

• Inline if() is the second most used function (after darken()), and accounts for 14.5% of all function calls. It was used 2 million times in our corpus, or an average of 7 times per sheet. We did not measure what percentage of pages it appears on (but we can, if that's of interest) source
• SCSS supports block conditionals and loops. Of those, @if is by far most popular, appearing in 63% of SCSS sheets. Out of all control flow blocks, @if accounted for 62% of them. source
• Out of the three looping constructs, the simpler @each was by far the most popular, accounting for 31% of all control flow blocks (83% of all looping constructs) and appearing on 54% of sheets. source
• We did not measure how many SCSS sheets use mixins overall (we could, upon request), but the number is well above half, since the most popular mixin, clarfix, appears on 52% of sheets. source
• Over half of SCSS sheets use custom functions, since the median sheet defines two of them source
• Nesting is hugely common. We only looked at explicit nesting, i.e. with the & selector, which is used on 85% of all SCSS sheets. About half of its usage is to set pseudo-class or pseudo-element variants, e.g. &:hover. One quarter of & usage is for classes (e.g. &.foo). Not only is it common across sheets, but it's used very frequently within the same sheet: Out of the 300K SCSS sheets we studied, we found 57 million uses of &, which means it was used about 200 times per sheet on average. source

In terms of relation to existing work, these stats:

• Support the work on inline and block conditionals done in [css-values] Iverson bracket functions: if(), media(), supports(), defined() #4731 [css-values]: Express conditional values in a more terse way  #5009 [css-variables?] Higher level custom properties that control multiple declarations #5624, since both forms of conditionals were very highly used.
• Support the work on CSS Nesting, which will hopefully encourage implementations.
• Support Houdini's work on custom functions
• Indicate that mixins are highly needed. [css-variables?] Higher level custom properties that control multiple declarations #5624 would make a limited form of mixins possible, albeit as a side effect of sorts, and not a primary focus.