109 replies

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

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

I want

_forms.scss

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

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

@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;
}

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

KP-C

Kevin Powell - Community•17mo 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

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

I want

_forms.scss

_forms.scss

@use "@shared/forms" as f;

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

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

@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;
}

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

Sass Mixin vs Extends

Similar Threads

Sass Mixin vs Extends

Similar Threads

Similar Threads

Similar Threads