Jul 28, 2015:  ~ 1 min read

SASS' Mixins

I recently saw a nice example of Mixins for SASS. So I went ahead and created a few, since I really dig them:

@mixin responsive_width($width) {
  @media screen and (max-width: $width) { @content; }

@include responsive_width(475px) {
  // Custom styles for width <= 475px

@mixin light_bottom_border($size) {
  border-bottom: $size solid $light_gray;

blockquote {
  @include light_bottom_border(5px);
  @include light_top_border(5px);

article {
  @include light_bottom_border(1px);

I also unified most of the website's colors with variables like $link_color, $gray_color and $text_color. Maybe one day I will try to unify the paddings and margins as well.

This was fun, and surprisingly satisfying.

Subscribe to my monthly newsletter.
No spam, unsubscribe at any time.