Sass and CSS selectors

[Evgeny]

Greetings All,

A short example of what does not work :

p
  :text-align justify
  :first-letter
    :margin-left 1em

And a short example of how to make it work, nevertheless :

p
  :text-align justify
p:first-letter
  :margin-left 1em


This small example raises the question of how Sass supports CSS selectors ... if sass would use a bit different syntax, with : coming after the attribute and not before -- then there might not even be a problem at all. But since the first example is something that I would expect to work - sass probably needs some kind of 'css selector reserved words' knowledge, or perhaps handle parameter-less selectors in a special way.


Regards,


- evgeny

[Nathan Weizenbaum]

Pseudo-selectors, like :first-letter, are an interesting case. Even if Sass didn't use the beginning colon as an identifier for an attribute, the selector you'd end up getting would be "p :first-letter", which isn't what you want.

There's a way to deal with this nicely, though. In trunk, you can use the ampersand character (&) to control exactly how the parent is used in the selector. The ampersand is literally replaced with the parent element. Your example, then, would be:

p
  :text-align justify
  &:first-letter
    :margin-left 1em

Hope that helps!
- Nathan

[weepy]

would the alternate syntax I suggested still have this problem ? I.e.
would you need the & to be able to specify properly ?

p
text-align: justify
:first-letter
margin-left: 1em

On Apr 11, 11:35 pm, "Nathan Weizenbaum" <nex...@gmail.com> wrote:
> Pseudo-selectors, like :first-letter, are an interesting case. Even if Sass
> didn't use the beginning colon as an identifier for an attribute, the
> selector you'd end up getting would be "p :first-letter", which isn't what
> you want.
>
> There's a way to deal with this nicely, though. In trunk, you can use the
> ampersand character (&) to control exactly how the parent is used in the
> selector. The ampersand is literally replaced with the parent element. Your
> example, then, would be:
>
> p
> :text-align justify
> &:first-letter
> :margin-left 1em
>
> Hope that helps!
> - Nathan
>

[Nathan Weizenbaum]

Yes, it would; for compatibility reason, we'd want to allow both
syntaxes, so the issue would persist. In addition, I'm not sure we'd
want to add special-case behavior for pseudo-selectors (although if we
had gone with a: b syntax initially, we might have decided to do so).

- Nathan

[weepy]

if i wanted to try and hack a a: b syntax into a local version - where
would i start ? - or is it going to be v hard ?

i understand u dont want to start providing alternate syntax's at this
stage in the project, - but i'd like to give it a go :)

[Nathan Weizenbaum]

In lib/sass/engine.rb, you'll find all the parsing code. Adding the "a:
b" syntax is going to be a bit tricky, precisely because it doesn't have
the identifying starting character, but I'll leave that up to you to
figure out. The parse_line method is probably where you want to start,
though.

As for inclusion in trunk, I want to wait for Hampton to weigh in to say
for sure, but I'd be fine with adding it if you can make a patch.

- Nathan

[weepy]

yes i'd found it already - and implemented. it's pretty easy really.
just have an extra regex.
seems to work fine on simple stuff. i guess there's some other knobbly
bits like &: and :hover
that i haven't looked at yet.

do you have any ideas where we could put a configuration switch to
turn in on/off ?

[weepy]

i guess we could just set a SASS_SYNTAX = :alternate in environment.rb

[Nathan Weizenbaum]

The typical way to set options in both Haml and Sass is using the
@options hash. However, the idea was that this syntax not be toggled; it
would just be available in all Sass files.

One simple way to get around the ambiguity about pseudo-selectors would
be to require that attributes have a space after the colon.

- Nathan

[weepy]

ok - I've got a patch and converted complex.sass

only one problem with lines like :

a:link, a:visited

but I think it should be easy to fix