---
title: Best practices
crumb: Best practices
layout: tutorial
---
%h3
Use a Base stylesheet file
%p
Create a
%code
_base.scss
%a{ :href => "http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials" }
partial
to initialize your stylesheets with common variables and (
%a{ :href => "http://groups.google.com/group/compass-users/browse_frm/thread/0ed216d409476f88" }
often
) the framework utilities you plan to use:
%h4
_base.scss
%pre
\$blueprint_grid_columns = 24
\$blueprint_grid_width = 30px
\$blueprint_grid_margin = 10px
\$font_color = #333
\
@import compass/reset.scss
@import compass/utilities.scss
@import blueprint/screen.scss
\
\// etc.
%p
The
%code
_base.scss
file is also a great place to keep your own custom mixins, so they’re available to any stylesheet that includes it.
%p
Then you can include this file in all other stylesheets:
%h4
application.scss
%pre
@import base.scss
\
\#wrapper
\ +container
\
\// etc.
%p
It is important to define any compass/framework constants that you want to override in base.scss first, before @import-ing the framework files. See
%a{ :href => "http://wiki.github.com/chriseppstein/compass/overriding-constants" }
Overriding Constants
, for an example of where the number of grid columns for blueprint is overridden/set to 32.
%br
Note that you can refer to
%code
_base.scss
without the leading underscore, since it is a
%a{ :href => "http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials" }
partial
\.
%h3
Write your own Custom Mixins
%p
Mixins let you insert any number of style rules into a selector (and its descendants!) with a single line. This is a great way to
%a{ :href => "http://c2.com/cgi/wiki?DontRepeatYourself" }
%span.caps
DRY
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
:markdown
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:
%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:
%pre
\html
\ @include attach_footer( 54px )