Sass rocks! Here's a puzzle for me. You'll probably see the problem
right away. Given:
!menu_background = #fff
!menu_text_color = #000
!menu_text_over = #653715
#menu
:background= !menu_background
:font-size 13px
#menu-container
:margin 20px 0 20px 144px
a, a:link, a:visited
:color= !menu_text_color
a:hover
:color= !menu_text_over
div
:display table-cell
:padding 0 25px 0 25px
I'd expect something like:
#menu { background: #fff; font-size: 13px; }
#menu #menu-container { margin: 20px 0 20px 144px; }
#menu #menu-container a, a:link, a:visited { color: #000; }
#menu #menu-container a:hover { color: #653715; }
#menu #menu-container div { display: table-cell; padding: 0 25px 0
25px; }
What I get is:
#menu { background: #ffffff; font-size: 13px; }
#menu menu-container { margin: 20px 0 20px 144px; }
#menu menu-container a, #menu menu-container a:link, #menu menu-
container a:visited { color: #0f0f0f; } /* <-- here's the
puzzling output */
#menu menu-container a:hover { color: #653715; }
#menu menu-container div { display: table-cell; padding: 0 25px 0
25px; }
Any thoughts about this?
Thanks and thanks again for Haml and Sass.
Steve
On Feb 1, 2007, at 4:51 PM, Nathan Weizenbaum wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
