Question

I have personally found that since using Rails, the complexity of the database access and logic of my application has been minimized significantly vs. client-side markup and CSS. More often than no I find myself struggling to understand a glitch in my CSS and my CSS code often contains more lines than my controller!

My webdesign needs are minimal as I am content with a plain, but clean look. Is there anything out there for Rails programmers that would make CSS easier or eliminate the need for manual CSS coding altogether?

Answer 1

Rails 3.1 brought Sass into core. It sounds kinda like… exactly what you’re looking for.

Prior to 3.1 you can still use Sass. Also helpful is Compass which provides somewhat similar functionality to Rails 3.1’s asset pipeline for organizing/compiling CSS, and additionally a bunch of useful, oft-needed mixins (clearfixes, CSS3 hacks, grid frameworks, sprite mapping, and so on).

Sass gives you the ability to organize your CSS in a modular, programmatic way (or however you like, really). Behind the scenes your Sass files are compiled into CSS, which can be minified and concatenated as you wish. Sass also allows you to express the same rules more concisely, and re-use code through mixins.

From the docs:

/* nesting */
table.hl {
  margin: 2em 0;

  /* this rule compiles to "table.h1 td.ln { text-align: right; }" */
  td.ln {
    text-align: right;
  }
} 

/* mixins */
@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}