80beans

Syntactically Awesome StyleSheets

Syntactically Awesome StyleSheets, or simply “Sass” is a great way of structuring your CSS using Ruby syntax. It spices up writing your CSS in several ways (use constants, do calculations, etc), with the most notable feature being the ability to use nested rules. This turns this:

#main
  :width 97%

  p, div
    :font-size 2em
    a
      :font-weight bold

  pre
    :font-size 3em

into

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

Just save your Sass file as public/stylesheets/sass/application.sass (filename may vary), and Sass will generate a public/stylesheets/application.css. This file will be re-generated after making changes to your *.sass file. Don’t forget to set an ignore property on your *.css files, since you don’t want to have those under version control.

We decided to use it for all our new projects, which has boosted our CSS productivity. Because of the structured syntax, also the not-so-CSS-savvy programmers can easily find what they are looking for in the CSS file. Highly recommended! See the above mentioned website for detailed installation and usage instructions.

Tip: to convert your plain old CSS to Sass, use the “css2sass” command line tool (included with haml): css2sass oldfile.css newfile.sass.

IE8 version targeting

A lot has been written about it on a lot of blogs, but as a standards aware front-end developer I just have to comment on the matter. Although pretty much everything has been said about it, both pro and con (mostly con).

For those of you who don’t know what it’s all about (I can’t imagine you missed it), I’ll sumarize it. On the IEBlog the IE development team announced how IE8 will handle backwards (and forwards) compatibility. Credit where credit is due, the IE development team has been doing a great job lately with IE8 even passing the Acid 2 test. But, only if you set the special <meta http-equiv="X-UA-Compatible" content="IE=8" /> element. IE8 will render pages by default using the IE7 rendering engine, because MS doesn’t want to break websites with every new version of IE.
Read the rest of this entry »