compass/doc-src/content/tutorials/best_practices.haml

---
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 &mdash; 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:
  
      <body>
        <div id="root">
          <div id="root_footer"></div>
        </div>
        <div id="footer">
          Footer content goes here.
        </div>
      </body>

%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 )
-												Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.

											
										
										
											2010-02-04 23:13:57 +00:00
+								---
 								title: Best practices
 								crumb: Best practices
-												Move the tutorials to the new layout.

											
										
										
											2010-04-24 17:03:34 +00:00
+								layout: tutorial
-												Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.

											
										
										
											2010-02-04 23:13:57 +00:00
+								---
 								%h3
 								  Use a Base stylesheet file
 								%p
 								  Create a
 								  %code
-												Upgrade docs to work on sass 3

											
										
										
											2010-04-12 09:46:33 +00:00
+								    _base.scss
-												Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.

											
										
										
											2010-02-04 23:13:57 +00:00
+								  %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
-												Upgrade docs to work on sass 3

											
										
										
											2010-04-12 09:46:33 +00:00
+								  _base.scss
-												Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.

											
										
										
											2010-02-04 23:13:57 +00:00
+								%pre
-												Move the tutorials to the new layout.

											
										
										
											2010-04-24 17:03:34 +00:00
+								  \$blueprint_grid_columns = 24
 								  \$blueprint_grid_width   = 30px
 								  \$blueprint_grid_margin  = 10px
 								  \$font_color              = #333
-												Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.

											
										
										
											2010-02-04 23:13:57 +00:00
+								  \
-												Upgrade docs to work on sass 3

											
										
										
											2010-04-12 09:46:33 +00:00
+								  @import compass/reset.scss
 								  @import compass/utilities.scss
 								  @import blueprint/screen.scss
-												Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.

											
										
										
											2010-02-04 23:13:57 +00:00
+								  \
 								  \// etc.
 								%p
 								  The
 								  %code
-												Upgrade docs to work on sass 3

											
										
										
											2010-04-12 09:46:33 +00:00
+								    _base.scss
-												Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.

											
										
										
											2010-02-04 23:13:57 +00:00
+								  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
-												Upgrade docs to work on sass 3

											
										
										
											2010-04-12 09:46:33 +00:00
+								  application.scss
-												Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.

											
										
										
											2010-02-04 23:13:57 +00:00
+								%pre
-												Upgrade docs to work on sass 3

											
										
										
											2010-04-12 09:46:33 +00:00
+								  @import base.scss
-												Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.

											
										
										
											2010-02-04 23:13:57 +00:00
+								  \
 								  \#wrapper
 								  \  +container
 								  \
 								  \// etc.
 								%p
-												Upgrade docs to work on sass 3

											
										
										
											2010-04-12 09:46:33 +00:00
+								  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
-												Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.

											
										
										
											2010-02-04 23:13:57 +00:00
+								  %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
-												Upgrade docs to work on sass 3

											
										
										
											2010-04-12 09:46:33 +00:00
+								    _base.scss
-												Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.

											
										
										
											2010-02-04 23:13:57 +00:00
+								  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 &mdash; 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
-												Move the tutorials to the new layout.

											
										
										
											2010-04-24 17:03:34 +00:00
 								: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:
 								      <body>
 								        <div id="root">
 								          <div id="root_footer"></div>
 								        </div>
 								        <div id="footer">
 								          Footer content goes here.
 								        </div>
 								      </body>
-												Ported following pages from the github wiki to the docs: Adding Frameworks to Compass, Supported Frameworks, Compass Plugins. Added some styles where necessary so the content was readable. Used html2haml with some manual adjustment so likely not super perfect.

											
										
										
											2010-02-04 23:13:57 +00:00
+								%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
-												Move the tutorials to the new layout.

											
										
										
											2010-04-24 17:03:34 +00:00
+								  \  @include attach_footer( 54px )