Re: [Sass] About referencing parent element

[Nathan Weizenbaum]

"&" refers to the entire parent selector, in this case "body div#content div#subcontents section.first".

On Fri, May 3, 2013 at 3:12 AM, Javier Garcia <tiren...@gmail.com> wrote:

Hi,

I have this:

        h2 {
          .first & {
            color: #EE7B15;
          }

and what is being generated is:

.first body div#content div#subcontents section h2 {
    color: #EE7B15;
}

what I expected:

body div#content div#subcontents section.first h2 {
    color: #EE7B15;
}

any help?

Javi

--
You received this message because you are subscribed to the Google Groups "Sass" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sass-lang+...@googlegroups.com.
To post to this group, send email to sass...@googlegroups.com.
Visit this group at http://groups.google.com/group/sass-lang?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Chris Eppstein]

It's worth noting two things:

1. There's no way you need a selector that specific. Your stylesheets should not be nested to match your document structure, this creates unnecessary coupling. 

2. In Sass 3.3 you'll be able to do this with code like:

body div#content div#subcontents section {

  h2 {

    #{all-but-last(&)}.first #{last(&)} {

      color: #EE7B15;

    }

  }

}

[Roy Tomeij]

That's awesome Chris. Is this already somewhat documented somewhere, or are there beta's we can play around with? :-)

[Chris Eppstein]

It's a work-in-progress on this branch: https://github.com/nex3/sass/commits/script-parent

Chris

[Chris Eppstein]

We decided against introducing any new syntax for this. We felt it would create forward compatibility issues and never meet the number of use cases that we had heard about. Exposing & to script manipulation lets us do whatever we want and with names that are more intuitive than non-standard syntax would be.

Chris

On Wed, May 8, 2013 at 3:44 PM, Lucas Constantino Silva <lucascs...@gmail.com> wrote:

This is a really nice feature you showed me, Chris. About a week ago I was thinking there should be a way to do exactly that. I don't know how hard my idea would be to implement (and I'm acctually very inclined to dive into the sass project and try to implement the idea myself, although Ruby isn't a language I feal confortable with), but please follow my thoughts:

1.: I would like to generated following sample CSS rules (please ignore the attributes):

.parent-selector .nested-selector { height: 100px; }
.parent-selector .nested-selector .deepest-selector { color: blue; }
.parent-selector:hover .nested-selector { height: 200px; }
.parent-selector:hover .nested-selector .deepest-selector { color: red; }
.parent-selector:active .nested-selector { height: 300px; }
.parent-selector:active .nested-selector .deepest-selector { color: green; }

2.: Today, to create this in SCSS I would do (trying to be simple here):

.parent-selector {
  .nested-selector {
    height: 100px;
    .deepest-selector {
      color: blue;
    }
  }
  &:hover .nested-selector {
    height: 200px;
    .deepest-selector {
      color: red;
    }
  }
  &:active .nested-selector {
    height: 300px;
    .deepest-selector {
      color: blue;
    }
  }
}

3.: What I would like to do is introduce a new referrer character "^" that would point to first parent, and that could be nested up to all ancestrals, ending up in something like:

.parent-selector {
  .nested-selector {
    height: 100px;
    ^:hover & { height: 200px; }
    ^:active & { height: 300px; }
    .deepest-selector {
      color: blue;
      ^:hover ^ & { color: red; }
      ^:hover ^ & { color: green; }
    }
  }
}

This way I coul'd keep all the so specific style aplied to the element in the same and now ONLY place they are defined.

How about that? If you like it (or even if you don't hehe), I would love if you could give me a place to start to try to implement it my self. A file in the SASS repository where you handle "&", or something like that.

Thanks, man, and thank you for the great work you've put on SASS so far.