Extended CSS


I discovered a few tools for extending CSS while reading the comments to Different Ways to Format CSS on CSS Tricks:

  • LESS — “LESS extends CSS with: variables, mixins, operations and nested rules. Best of all, LESS uses existing CSS syntax. This means you can rename your current .css files to .less and they’ll just work.” LESS is a compiler that runs on ruby and needs both ruby and ruby-gems installed.
  • Sass — “Sass is CSS, plus nested rules, variables, mixins, and more all in a concise, readable syntax.” Sass (for Syntactically Awesome StyleSheets) is also a compiler that runs on ruby. Although its syntax is simplified, it is incompatible with CSS; CSS files will need to be modified before they can be be used with Sass.
  • Scaffold — “CSS Scaffold is a framework written in PHP. … You can drop Scaffold into your site and you’ll instantly have access to all of its functionality. Constants, mixins, nested selectors, expressions caching and gzipping, [and is] extendable through plugin.” Scaffold runs on your site in your CSS directory. You modify your .htaccess file to redirect CSS requests through Scaffold.

I like the features of LESS. I wish I didn’t have to install (and learn some) ruby to get it going. That’s likely still easier than getting Scaffold installed and running.

Other CSS-related sites I discovered today:

  • CSSTidy — “CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).”
  • Text Sizing — “I’d had enough. Being unhappy with the current wisdom and distrustful of our browsers, I wanted to have the font sizing options laid out so I could see where they did and didn’t work. So I made 264 screenshots. This collection is posted for anyone else who is unhappy and distrustful.”
  • Sane CSS Sizes — “..wherein we present a method of text sizing in CSS that actually works consistently across our browsers without offending designers.”
  • List of CSS Tools — “What can be better than simple, useful and handy tools you can use “on the fly” in the development process?”

Do you use a CSS extender?