up your stylesheet source code and make it much more maintainable. Using mixins will also make your stylesheet look like self-documented source code — like using descriptive method names in a programming language. It’s much more obvious to read something like
%code
+round_corners(6px, #f00)
than the whole list of rules which define that appearance.
%h4
Mixin Example
%pre
\// Mixin for the html element, so the footer stays at the bottom of the screen.
\// Relies on the following html structure, and a fixed-height #footer element:
\//
\// %body
\// #root
\// #root_footer
\// #footer
\
\=attach_footer( !footer_height )
\ :height 100%
\
body
\ :height 100%
\
\#root
\ :min-height 100%
\ :margin-bottom = -!footer_height
\
\#root_footer
\ :clear both
\ :height = !footer_height
\
\#footer
\ :clear both
\ :position relative
\ :height = !footer_height
%p
A single line is all that’s needed to use the mixin, which moves the implementation details out of the way and replaces them with a clear and concise label: