An overview of SASS/Compass architecture in Rails. Know which styles affect which pages, avoid CSS kudzu.

Rails SASS Architecture.textile

Rails SASS Architecture

Libraries

• Compass
• Selectivizr
• CSS3PIE
• html5shiv
• Considering the addition of Flexie

Compass

Compass is installed as a gem, we are using it as a collection of mixins for SASS.

gem install compass

Selectivizr

This will give you some attribute and pseudo selectors in older browsers. It will need to be added to /public/javascripts. It will also need to be included in /app/views/layouts/_javascripts.html like so:

<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
  <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

CSS3PIE

Aids in providing CSS3 capabilities to older versions of IE that don’t natively support them. Compass already supports CSS3PIE. Read this for installing the library if it isn’t already. Adds a bit of loading time (~10ms) to each element you apply it to (in browsers that need it – ie6/7).

html5shiv

This gives us HTML5 elements and allows them to be styled in older browsers. Can be downloaded or pulled from google code. Put this in /app/views/layouts/_stylesheets.html

<!--[if lte IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Structure

First we’ll start by setting up a directory structure for the sass files, then we’ll connect them to the application.

The general structure has the following directories:

application.sass – core styles, included in every page, imports all of /base
- application
- – layout – layout specific styles (header, footer, forms, tables, typography)
- – patterns – design elements without context (containers, icons, buttons)
- – views – view specific styles (spacing, positioning, non-patterns)
- browsers – browser specific styles (typically IE)

A quick overview of the files/directories.

TODO: post urls to github directories based on project

application.sass: This file imports all of the base application styles. It does this by importing application/_all, which in turn imports all of the other files inside of application/ (layout, patterns, views).

application/layout: The core files for the site. Styles within application are common for the site (the exception being application/views which are accessed via a body class). Every file within the base directory is a partial. None of these files are every called directly, they are all imported into the main application.sass file. The partials may include files that handle styles for _reset, _colors, _headings, _typography, _icons, _buttons, _forms, _tables, _header, _footer.

application/patterns: Patterns used throughout the site. These could be _buttons, _containers, _icons, _links, etc. They may also be somewhat contextual, such as _articles, _goals, _groups, or _reviews. When used as a more contextual pattern, they may be a combination of a few different /application/patterns. All of the files in the application/patterns directory are partials.

application/views: Styles used by specific views, constrained by a body.class. Often times they will be as simple as a few margins as the patterns will already be declared and will just need to be spaced according to the current page. If there is something a bit unique to that view that code can also be placed in the view file. They are only implemented when a view is given a specific body class (typically based off of controller_name and action_name. Any code written into a view file should be unique. If the code needs to be used elsewhere it should be abstracted (to application/patterns).

browsers/: Actual files (not partials) used for different browsers. Files could be ie7.sass, ie8.sass, etc. These files would be called by conditional statements from the of the document in /app/views/layouts/_stylesheets.html. As an example, a stylesheet used for IE7.

<!--[if IE 7]>
  <link href="/stylesheets/browsers/ie7.css" rel="stylesheet" type="text/css">
<![endif]-->

Efficiency

So long as these guidelines are followed, only one CSS file will be produced (application.css via application.sass). Keeping requests down allows for much speedier page loads.

Note: When a browser specific stylesheet is in use you’ll also be brining in that stylesheet (totaling two stylesheets). This is typically only in use for IE6/IE7.