An excellent example of why I consider mixins to be inept code-bloat, something that what they typically build/compile to only doubles-down on. Bloated trash for people who don't understand or are too poorly organized to use selectors.

Like your example, real-world the reason to use a mixin is for stuff that would be used more than once. Something like:

@mixin sample-mixin {
  padding:1rem;
  border:0.25rem solid blue;
}
body > header {
  @include sample-mixin;
  height:8em;
  width:25em;
  margin:0 auto;
}/
body > footer {
  @include sample-mixin;
}

The thing is, if you comma delimit a selector group, you get LESS code overall and a simpler way of maintaining it. Thus:

body > header,
body > footer {
  padding:1rem;
  border:0.25rem solid blue;
}
body > header {
  height:8em;
  width:25em;
  margin:0 auto;
}

Does the same thing without the pre-processor nonsense. This is why most everything other than CSS variables — which we now have native — that are provided by LESS/SASS/SCSS are as big a predatory gibberish time wasting dumbass derpitude as front end frameworks. To see merit in them is to be devoid of the most basic knowledge of HTML or CSS.

I actually find the latter clearer since I can see EXACTLY what things are being applied to. Same reason I find the “nested syntax” rubbish to be HARDER to work with despite all the wild unfounded ignorant claims to the contrary!

Nothing like learning a bunch of extra hard to use garbage thanks to fear-mongering of normal code being “harder”… despite it being demonstrably simpler. Just as with front-end frameworks, all the claims of “easier” or “better for collaboration” amount to nothing more than lies and fear-based manipulation of ignorance.

— edit — Oh and for the love of Christmas stop telling your users to F*** off by declaring all that stuff in pixels. They’re called EM/REM, use ‘em!

Same can be said of “screen and” — something that and decent coder would already have eliminated as a possibility on their <link> tag with the media=”” attribute. If you have to “screen and’ on a media query, you likely have failed to grasp a third of what CSS is even for.