Hello, fellow Hamlites!
In an effort to tell you guys about the cool new features coming up in
future Haml versions (1.5 is coming up next), Hampton and I wanted to start
giving periodic notifications about the various features being added to the
upcoming release. Ideally, we'd send out one of these every time a new
feature gets implemented, but there are already tons of new features in
trunk, so there's a bit of catching up to do first.
First, I wanted to introduce something that many of you may have already
heard about (in fact, there's another thread about it active right now):
Sass, the crowning jewel of Haml 1.5. It's probably best described as "Haml
for CSS"... a way to beatifully, concisely, and powerfully describe CSS,
similar to what Haml does for XHTML. For example,
#list
:background-color #4444bb
:color #aaaaff
:width 15em
makes
#list { background-color: #4444bb; color: #aaaaff; width: 15em; }
Like Haml, it's indentation-sensitive, using indentation to signify
attributes for given rules (as well as other stuff which I'll get to in a
second). It also uses Haml-like characters at the beginning of the line to
differentiate attributes from new rule declarations.
"But wait," you say... "why would you have a rule declaration inside another
rule declaration? That's not valid CSS!" Well, my friend, Sass is more than
just CSS. You can, in fact, put rules within rules. For example,
#list
:width 15em
ul
:font-size 2em
:font-weight bold
makes
#list { width: 15em; }
#list ul { font-size: 2em; font-weight: bold; }
Sass makes it easy to nest CSS rules so that you don't have to keep
repeating yourself over and over again with "#list ... #list ul ... #list ul
li ...".
Another pet peeve on mine with CSS shows up in the previous example: there
are all these CSS "namespaces", like "font", "border", and "text", that you
have to repeat over and over again in attribute declarations. Sass fixes
that problem as well:
ul
:font
:size 2em
:weight bold
makes
ul { font-size: 2em; font-weight: bold; }
On the subject of CSS pet peeves, I think all of us have been annoyed by the
lack of ability to define keyword values in CSS. Why can't we set
"off-white" to "#ffeecc"? Why can't we set "main-width" to "15em"? Well, in
Sass, you can.
!off-white = #ffeecc
!main-width = 15em
p
:width= !main-width
:border
:style solid
:width 1px
:color= !off-white
makes
p { width: 15em; border-style: solid; border-width: 1px; color: #ffeecc; }
Constants aren't a whole lot of use unless you can deal with them like
variables. Sure, you can say the width is 15em, but you can't make the
paragraph 2em smaller than that. Right? Wrong!
!main-width = 15
!units = em
#main
:width= !main-width + !units
p
:width= (!main-width - 3) + !units
makes
#main { width: 15em; }
#main p { width: 12em; }
You can do constant arithmetic with strings, numbers, even colors!
Now, you may have noticed that the CSS output is in a particular style...
probably not the style you're used to. If that's so, then you're in luck -
Sass will support three or four separate output styles, with a stylistically
wonderful default. This isn't implemented yet, but it will be in there for
version 1.5.
If you want to give Sass a try, check out the development version of Haml
from svn://hamptoncatlin.com/haml/trunk and put your stylesheets in .sass
files in public/stylesheets/sass. Matching CSS files will automatically be
added to public/stylesheets.
- Nathan
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Haml" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at http://groups.google.com/group/haml?hl=en
-~----------~----~----~----~------~----~------~--~---
