Hi all,
I have been using Sass for quite some time now and it has greatly
helped me deal with the complexity of stylesheets for web
applications. However, I have a question concerning a problem that has
been over-complicating my Sass stylesheets for some time now. What I
usually do in my applications is use some kind of script that sets
classes on the <body> element (or, for that matter, the root element
of a particular UI control, for instance) that determines the
behaviour of underlying elements; for instance:
body {
div.button {
height: 10px;
}
}
body.is-touch {
div.button {
height: 20px;
}
}
(of course, 'is-touch' is not the best example, since I should use
media queries for that; but hey, support for that is not really common
yet among browsers, so setting it as class on the body tag sounds
reasonable, right?).
Now, if there are a lot of these 'state classes', the CSS gets really
messy (especially when you start mixing them up). I was wondering,
would it be possible to write something like this:
body {
div.button {
height:10px;
&.is-touch (on ancestor body tag) {
height: 20px;
}
}
}
This sort of syntax would make a lot of stuff much easier. Of course,
Sass needs to know exactly which parent element should be matched
(hence the syntax could be something like ^body for 'body > element'
and ^^body for 'body element').
Too bad you cannot use XPath...
--
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.
