Skip to content

Instantly share code, notes, and snippets.

@alexdiliberto
Created May 4, 2014 20:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexdiliberto/f779b11b075b677d7c8c to your computer and use it in GitHub Desktop.
Save alexdiliberto/f779b11b075b677d7c8c to your computer and use it in GitHub Desktop.
DRY CSS output using Sass
/**
Placeholder - Contains all static mixin name value pairs for a particular mixin
*/
%box {
border: 1px solid;
padding: 1em;
margin: 1em;
}
/**
Mixin - Contains the dynamic user-provided variables only
*/
@mixin module($bgcolor, $border) {
background-color: $bgcolor;
border-color: $border;
@extend %box;
}
/**
End Result: DRY CSS
*/
.thisbox {
@include module(Tomato, #888);
}
.thatbox {
@include module(slategray, Tomato);
color: white;
}
.anotherbox {
@include module(beige, green);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment