My Digital Buildings

Sass Mixins

Mixins allow us to reuse code in various parts of the framework. Foundation includes mixins for clearfixes, visibility, icons, shapes, and more.


Foundation’s Sass mixins are all kept in one file: scss/util/_mixins.scss. To import it in Sass, use this line of code:

@import 'util/mixins';

Note: These mixins are included by default when using the ZURB Stack and Basic Template Starter Projects.

General Mixins

Foundation includes some handy Sass mixins to quickly create styles or to extend and truly customize an existing component. Here is a list of available mixins:

Prototyping Utility Mixins

Quickly prototype layouts and UI with Foundation’s Prototyping Utility mixins. These mixins are great realizing your sketches and mockups into hi-fi coded prototype’s ultra fast. Learn more about Prototyping Utilities

Here is a list of available mixins: