---
title: "SASS' Mixins"
slug: sass-mixins
section: tech
date: 2015-07-28T17:06:00.000Z
canonical: https://roland.leth.ro/blog/tech/sass-mixins
---

I recently saw a [nice example](http://code.runnable.com/UogTLVjwPBRrAAAO/how-to-use-mixins-in-sass-for-ruby-on-rails-and-css) of Mixins for `SASS`. So I went ahead and created a few, since I really dig them:

```scss
@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.*