Importing

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:

• CSS Triangle mixin
• Hamburger Icon mixin
• Background triangle
• Clearfix
• Auto width children
• Disable Mouse Outline
• Element Invisible
• Element Invisible Off
• Vertical Center
• Horizontal Center
• Absolute Center

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:

• Border Box
• Border None
• Bordered
• Box
• Display
• Font Wide
• Font Normal
• Font Bold
• Font Italic
• Style Type Unordered
• Style Type Ordered
• Overflow
• Overflow-x
• Overflow-y
• Position
• Position Fixed Top
• Position Fixed Bottom
• Rotate
• RotateX
• RotateY
• RotateZ
• Border Radius
• Border Rounded
• Separator
• Shadow
• Max Width 100%
• Margin
• Padding
• Text Decoration
• Text Transform
• Text Hide
• Text Truncate
• Text Nowrap
• Nth Child