New gem on the block: Holmes Markup Detective for Compass

April 18th, 2012
by Mark Boyd | Developer

Perhaps you've heard of CSS preprocessors. If not, you should go read up on them. This article might be a good place to start. Basicaly, CSS preprocessors allow you to write your styles in a special syntax that includes nested selectors, variables, and reusable sets of declarations known as mixins. This special syntax is then compiled into regular CSS by the preprocessor, eliminating a lot of the repetitiveness of writing regular CSS and in general making your life easier.

 

Until fairly recently, our team was using LESS as our preprocessor, but we've now fully switched to SASS. Above all else, the real reason SASS won us over was because of its brother Compass. Compass is basically a robust library of mixins and functions for use with SASS that makes writing your styles much more efficient and handles many of the common caveats familiar to any front-end developer. For example, want to use min-height but know it isn't reliable in old IE? Compass handles that. Need vendor prefixes for your CSS3 properties? Yeah, Compass does that too (it even includes the vendor prefixes for Opera and Konqueror). Want to have a CSS only sticky footer on your site? You guessed it: Compass does that too.

 

In addition to all of the core awesomeness provided by Compass, its developers also made it very easy for anyone to develop extensions. And the community has taken full advantage of that extensibility, creating extensions for all sorts of new and exciting features, often in step with emerging web standards. While I have been making full of use of all of this existing Compass gooodness, I also decided to join in on the fun myself.

 

It all started when our project manager Tom forwarded me a link to a cool CSS utility he had come across called the Holmes Markup Detective. It essentially acts a markup linter and uses CSS to highlight places where your markup is invaild, non-standard or deprecated and also includes CSS based messages to tell you specifically what the problems are. Immediately I recognized two things: one, this was a great tool for validating your markup with visual cues, and two, it could easily be ported to SASS. The initial port from CSS to SASS syntax (or SCSS more specifically) didn't take long, but as my understanding and awareness of Compass extensions grew, I recognized that was the best way to share it with everyone else. And finally, as of today, it is done.

 

So without further ado, I now present my newly minted Compass extension, Compass Holmes: https://github.com/markdboyd/Compass-Holmes. All Compass extensions are provided as Ruby gems, so you need Ruby to install and use it, but if you are using Compass, you should be doing that anyway. Further guidance on how to set up and use it can be found on my github page for the project linked above. Enjoy! And don't hesitate to give me your feedback in the comments.

Compass, css, Front End, Holmes, Ruby, SASS

Leave a Comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

Fill in the blank
To prevent automated spam submissions leave this field empty.