In the spirit of DRY — and making our lives easier — Foundation comes with a series of "mixins" that let you turn ordinary elements into amazing components like side-nav menus, tabbed lists, buttons and more. Here's how to use mixins to quickly add style to your product design.

Foundation's mixins, which you add to Sass files with @include statements, put tried-and-tested CSS into your selectors with just a line of code. For example, Compass turns this sample SCSS:

.element-name {
  @include panel();
}

 

into this (sample) CSS:

.element-name {
  border: 1px solid #EFEFEF;
  background: #CFCFCF;
  color: #333333;
  padding: 1.1rem;
  margin-bottom: 1.1rem;
}

 

Presto, an instant formatted panel. All you have to do is supply @include example-mixin();.

Even better, you can adjust exactly what that mixin produces. Color, for example. Mixins accept arguments between those two (parenthesis). Let's say we want red links instead of blue in a side navigation list. To spell it out:

But that's academic — just an example. Now we'll use that to create a series of buttons using Foundation's @button mixin.

1. Define your element in HTML

To start, we create an area to become a sidebar. Nothing fancy, just a few anchors and classes.

<a href="#" class="button first">A button Button</a>
<a href="#" class="button second">Another Button</a>
<a href="#" class="button third">And a Third Button</a>

 

2. Define the element in CSS.

The CSS empty. That's on purpose. You won't need to write any CSS — just to include the Sass in a minute.

.button.first {
}
.button.second {
}
.button.third {
}

 

3. Add the Mixins.

Turning .sidebar into a Foundation-based sidebar is easy. Just use the proper @include.

.button.first {
  @include button();
}
.button.second {
  @include button();
}
.button.third {
  @include button();
}

 

We did it three times to demonstrate how custom arguments work.

.button.first (
  $button-med: rem-calc(12); // Change the button's size
  $button-font-color: #fff; // Text color inside the button
  $button-border-width: 1px; // Surrounding edge of the button
  $button-radius: 0.25rem; // Curved corners
);
.button.second (
  $button-sml: rem-calc(16);
  $button-font-color: ##631200;
  $button-margin-bottom: rem-calc(10);
  $bg: #d0d0d0;
);
.button.third (
  $full-width: true;
  $button-margin-bottom: rem-calc(10);
  $button-round: 1rem;
);

 

What else can you do? Check out the button's recognized arguments. We’ve also put together a list of all Foundation 5’s mixins, just for you.

And that's it. When Compass compiles the CSS, you'll get a host of tried-and-true responsive CSS. Styling is easy when you mix in a little Sass.

---