Kevin Powell - CommunityKP-C
Kevin Powell - Community•15mo ago•
109 replies
vince

Sass Mixin vs Extends

I had a quick question I wanted to ask regarding this.

I have some files in a shared directory that I want to namespace.

>scss
->shared/
-->_forms.scss


I want _forms.scss to have reusable styling that I can use in other classes around the codebase. I don't need any argument features that mixin supports - I really just need it to work like extends. The problem is, I can't namespace extends. So if I try to do:

@use "@shared/forms" as f;

.form {
  @extend f.%form; // error!


This doesn't work. I can however do this with mixins:
@use "@shared/forms" as f;

.form {
  @include f.form; // success!


The problem is, this is leading to single line mixins:
@mixin commerce-layout-padding() {
  padding: t.$sp-xs;
}


My question is, is this a totally valid use case, or am I in the complete wrong direction and I should quit as a webdev? 😂
Was this page helpful?