SASS' Mixins

1 min read

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.