Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass Modifiers Mixin
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
// Sass modifiers mixin by Sarah Dayan
// Generate All Your Utility Classes with Sass Maps: frontstuff.io/generate-all-your-utility-classes-with-sass-maps
// http://frontstuff.io
// https://github.com/sarahdayan
$colors: (
red: #ff3538,
grey: (
base: #404145,
light: #c7c7cd
),
yellow: (
base: #ecaf2d
),
green: (
base: #5ad864
)
);
$font-sizes: (
small: 12px,
medium: 14px,
large: 16px,
x-large: 18px,
xx-large: 20px
);
@mixin modifiers($map, $attribute, $prefix: '-', $separator: '-', $base: 'base') {
@each $key, $value in $map {
&#{if($key != $base, #{$prefix}#{$key}, '')} {
@if type-of($value) == 'map' {
@include modifiers($value, $attribute, $separator);
}
@else {
#{$attribute}: $value;
}
}
}
}
.text {
@include modifiers($colors, 'color', $separator: ':');
@include modifiers($font-sizes, 'font-size', '--');
}
.text-red {
color: #ff3538;
}
.text-grey {
color: #404145;
}
.text-grey:light {
color: #c7c7cd;
}
.text-yellow {
color: #ecaf2d;
}
.text-green {
color: #5ad864;
}
.text--small {
font-size: 12px;
}
.text--medium {
font-size: 14px;
}
.text--large {
font-size: 16px;
}
.text--x-large {
font-size: 18px;
}
.text--xx-large {
font-size: 20px;
}
@onetrev

This comment has been minimized.

Copy link

@onetrev onetrev commented Jun 26, 2018

Thanks for the article and making this gist. Using Sass mixins for utility classes in order to keep things leaner and simpler than say Tachyons or Tailwind is a great idea! Only thing I wondered, as I can't see any easy way to do this, would it be at all possible to also incorporate @media queries in this mixin for handy breakpoint changes to your utilities?

@mattfelten

This comment has been minimized.

Copy link

@mattfelten mattfelten commented Jul 3, 2018

This is great, Sarah. Do you have any ideas for how to modify this to support passing multiple attributes to the mixin? For instance, I'm iterating through our spacing scale and creating .padding-x-<size> classes that would include both padding-left and padding-right attributes.

Edit: I figured it out. Basically adding another check to see if $attribute is a list and looping through them. See here: https://gist.github.com/mattfelten/5c6ad6edb70c6ab10f5c377c21eda2f2

@zachbryant

This comment has been minimized.

Copy link

@zachbryant zachbryant commented Jun 9, 2020

Why isn't separator used in the modifiers mixin?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment