Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

The problem with SASS mixins*

  1. mixins with SASS can balloon your css files quickly.
  2. mixins stop it being clear where stuff came from (can't search for class names for instance).

WARNING: The below is pseudo-code as I'm too lazy to double-check the APIs, output etc:

@mixin flexThing {
  color: red;
  height: 100px;
  width: 100px;
  display: flex;
}

.button {
  @include flexThing;
  border: 1px solid;
  
}

.avatar {
  @include flexThing;
}

Compiles to

.button {
  color: red; // Where did this line come from? A mixin? Which one?
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid; // Is this line from a mixin? Where do I edit in my code?
}

.avatar {
  color: red;
  height: 100px;
  width: 100px;
  display: flex; // So much repetition! Lots of lines of CSS added!
}

CSS Modules saves you

In CSS modules composes solves this

// Example components

import avatarStyles from "./avatarStyles.css";
import buttonStyles from "./buttonStyles.css;

// avatarStyles.css

.avatar {
  composes: flexThing from "./flexThing.css"
}

// buttonStyles.css

.button {
  composes: flexThing from "./flexThing.css"
  border: 1px solid;
}

// flexThing.css

.flexThing {
  color: red;
  height: 100px;
  width: 100px;
  display: flex;
}

// ------- Output ----------

// output.css

.__flexThing_asd234 {
  color: red;
  height: 100px;
  width: 100px;
  display: flex;
}

.__buttonStyles_234o8d {
  border: 1px solid;
}

// HTML

<img className="__flexThing_asd234" />

<button className="__buttonStyles_234o8d __flexThing_asd234" />

... something like that anyway. As I say, I didn't double check :D

* Ok what about SCSS @extend. Isn't that the same?

Yep. It's just mixins that have the above problems.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.