Adding Your Own Mixins

Finally, let's quickly add a mixin of our own into our project structure.

You've certainly noticed that we are - repeatedly! - using lots of code for retina-optimized images:

background-size: $teaser-image-width $teaser-image-height;
background-repeat:no-repeat;
background-image:url(../img/chevron-teaser.png);
@media
  screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {
  background-image:url(../img/chevron-teaser@2x.png);
}

This makes for a nice example mixin:

@mixin retina-image($width, $height, $base-path, $extension:png) {
  background-size: $width $height;
  background-repeat:no-repeat;
  background-image:url('#{$base-path}.#{$extension}');
  @media
    screen and (-webkit-min-device-pixel-ratio: 2),
    screen and (min-resolution: 192dpi),
    screen and (min-resolution: 2dppx) {
      background-image:url('#{$base-path}@2x.#{$extension}');
  }
}

Custom mixin - GitHub

Now, the only question that remains is: where should we put our custom mixins?

  • Bourbon (a mixin library) and Neat (a grid framework) should not be changed. If you do, you will lose the possibility to easily upgrade to new versions. Once your own code is mingled with the framework code, it's hard to keep an overview.
  • Bitters, on the other hand, is a scaffold. It brings a set of sensible default styles and settings - but is made to be modified and extended.

Let's put our own mixins in a new file called _mixins.scss inside of the Bitters "base" folder. For a larger project, you'd probably create a couple of different files for different types of your mixins.

Then we need to import it in Bitter's _base.scss:

@import "variables";

@import "mixins";
@import "buttons";

That's it! We can now use our own mixins in our main _layout.scss declarations:

@include retina-image($width, $height, '../img/author', 'jpg');

Giveaways. Cheat Sheets. eBooks. Discounts.
And great content from our blog!

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.

Your Download is in Progress…

Giveaways. Cheat Sheets. eBooks. Discounts. And great content from our blog!