5 Sass Mixins & Sass Mixin Libraries

5 Sass Mixins & Sass Mixin Libraries

Posted by Rainey

Lately I have been looking into various Sass mixin libraries and mixin snippets.  These are among the best I have found.

Bourbon

bourbon

Bourbon is a Sass library that you can install to run with your Sass projects. With Bourbon you will be able to code things like:

ol {
    > li {
      background-color: #F4F5F7;
      @include background-image( linear-gradient(to left, #FFF, #F4F5F7) );
      float: left;
      font-family: $lucida-grande;
      position: relative;
      @include transition( all 0.8s );
}

To become:

ol {
    > li {
      background-color: #F4F5F7;
      background-image: -webkit-linear-gradient(   left, #FFF, #F4F5F7);
      background-image:         linear-gradient(to left, #FFF, #F4F5F7);
      float: left;
      font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
      position: relative;
      -webkit-transform: rotate(45deg) skew(20deg, 30deg);
         -moz-transform: rotate(45deg) skew(20deg, 30deg);
          -ms-transform: rotate(45deg) skew(20deg, 30deg);
           -o-transform: rotate(45deg) skew(20deg, 30deg);
              transform: rotate(45deg) skew(20deg, 30deg);
}

Of course this is only scratching the surface of what can be done with Bourbon.

Learn more and download from Bourbon.io

Bourbon Neat

bourbon-neat

“A light-weight semantic grid framework for Sass and Bourbon.” And, ” it relies entirely on Sass mixins and does not pollute your HTML with presentation classes and extra wrapping div‘s.” Ok, I’m interested and it seems pretty clever. So this:

<!-- HTML markup for the section right below this code block -->
<section>
  <aside>What is it about?</aside>
  <article>Neat is an open source semantic grid framework built on top of Sass and Bourbon…</article>
</section>

Would be styled like this:

section {
  @include outer-container;
  aside { @include span-columns(3); }
  article { @include span-columns(9); }
}

Learn more and download from neat.bourbon.io

Sassy Buttons

sassy-buttons-2

Sassy Buttons is a compass extension for creating that “CSS3 button look with none of the work.”   The options for these look pretty nice so this could be worth while if compass is already in your workflow.

Learn more and download from the Sassy Buttons project

 

Compass

sass-compass

Compass is obviously more than a Sass mixin library but does include a good foundation of Sass mixins. The Compass documentation is pretty thorough and each section links directly to the source  being referenced on Github.

Learn more and download from compass

 

 

Handy Sass Mixins

This is a sweet set of Sass mixins by Jake Bresnehan. This set includes:

  • Responsive Breakpoints
  • Retina Images
  • Clearfix
  • Border Radius
  • Opacity
  • Center Align a Block Level Element
  • Text Overflow
  • Absolute Position
  • Font Size
  • Line Height

I think my favorite in this stack is going to be the Responsive Breakpoints and here is a quick example of how those work.

@mixin breakpoint($point) {
  @if $point == large {
    @media (min-width: 64.375em) { @content; }
  }
  @else if $point == medium {
    @media (min-width: 50em) { @content; }
  }
  @else if $point == small {
    @media (min-width: 37.5em)  { @content; }
  }
}

Usage:

.page-wrap {
  width: 75%;
  @include breakpoint(large) { width: 60%; }
  @include breakpoint(medium) { width: 80%; }
  @include breakpoint(small) { width: 95%; }
}

Output:

.page-wrap {
  width: 75%;
}
@media (min-width: 64.375em) {
  .page-wrap {
    width: 60%;
  }
}
@media (min-width: 50em) {
  .page-wrap {
    width: 80%;
  }
}
@media (min-width: 37.5em) {
  .page-wrap {
    width: 95%;
  }
}

Download from Github

If you have a favorite Sassy mixin favorite, I would love to know about it.

Like what you are reading? Subscribe to receive monthly tips & updates!

A Monthly Roundup of Articles and a Sweet Deal

Get the latest tips, tricks, tutorials and freebies in your inbox once a monthly.

Join our growing community of front-end web developers and designers. We are constantly publishing new industry tips, tricks and tutorials to help you take your game to the next level. We are also going to include a freebie or deal on something cool each month. Enter your email below and you will only receive this email once a month, nothing else.

Subscribe to our mailing list

* indicates required


    Today in Web Design - Resources