parent selector ala SASS #127

TomasM · 2010-10-12T04:32:59Z

So in sass you can use the parent select as such:

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

which is compiled to:

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

Is this planned for less.js?

EtienneLem · 2010-10-12T04:51:38Z

Referring to the .clearfix example in the Wiki, I guess it is already supported:

You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin (& represents the current selector parent):

.clearfix {
display: block;
zoom: 1;

&:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}

}

TomasM · 2010-10-12T05:45:46Z

Yes that works in less.js, but lets take the example where you dynamically add classes on the html or body element (serverside or with js) referring to the user agent such as .ie ie6 .ie7 .mozilla etc...

So your html looks like:

<html class="ie6">

And now in your css you can target styles only for say ie6 like this:

.ie6 button {
    ...
}

So now say have a mixin for buttons and I want that conditional for ie to be in it:

.mixin {
    ...
    &:hover {
        ...
    }

    .ie6 & {
        // Fix for ie6
    }
}

This is supported in SASS and I read somewhere this is planned for lesscss, perhaps in dotless (lesscss for .NET)

So is this planned? Should I try to take a stab at it and try to implement it?

Thanks

rzhw · 2011-02-16T11:10:02Z

This would be awesome for things like Modernizr. +1

oscar-b · 2011-03-29T11:18:16Z

This would be very very useful for things like Modernizr. I would prefer some other syntax though, but that might just be me..

subtleGradient · 2011-04-09T02:41:38Z

Yes please!

gerrit · 2011-04-26T14:28:38Z

+1

rosshadden · 2011-04-27T18:22:44Z

The proposed syntax in #251 is the best I can imagine for this.
"[.canvas]", for instance, would be treated as "html.canvas", which would be extremely useful (and much more intuitive than nesting "body" or "html" tag selectors).

~Ross

neonstalwart · 2011-04-27T19:21:13Z

@rosshadden i don't think #251 is suggesting that [.canvas] be interpreted as html.canvas. with the syntax proposed in this ticket, body or html tag selectors were used in one example but are not necessary. the important part of the syntax is that you can use nesting and place & after a nested selector and it generates output like below (notice the last rule that was generated).

a {
  font-weight: bold;
  &:hover { text-decoration: underline; }
  .selector & { font-weight: normal; }
}

compiles to

a {
  font-weight: bold;
}
a:hover {
  text-decoration: underline;
}
.selector a {
  font-weight: normal;
}

rosshadden · 2011-04-27T19:25:42Z

@neonstalwart: I understand, thank you for your clarification. You are right, I was greatly limiting the capabilities by my assumption! Now the syntax proposed in this issue makes more sense than the one in #251, and fits better with the existing LESS syntax.

~Ross

webxl · 2011-04-27T22:54:03Z

I'm fine with either syntax: "[.selector]" or ".selector &". I guess the brackets might cause confusion because they can be used to select attributes in regular CSS.

Has anyone implemented this?

bobthecow · 2011-04-28T11:19:17Z

+1 for .selector & syntax.

oscar-b · 2011-04-28T11:31:02Z

One thing I can't see is how it would handle this code:

section {
    article {
        h1 {
            .no-boxshadow & { border: 1px solid red; }
        }
    }
}

Where I would like that to render as:

.no-boxshadow section article h1 { border: 1px solid red; }

Should the "&" return all parents? That is not how "&" works today, right?

bobthecow · 2011-04-28T11:54:44Z

I would be least surprised if this:

.foo {
    .bar, .baz {
        & .qux {
            display: block;
        }
        .qux & {
            display:inline;
        }
    }
}

Expanded to this:

.foo .bar .qux,
.foo .baz .qux {
    display: block;
}
.qux .foo .bar,
.qux .foo .baz {
    display: inline;
}

Or, in other words, just like & .qux expands to mean "all current selector permutations + .qux", .qux & should expand to ".qux + all current selector permutations"

webxl · 2011-04-28T16:06:42Z

An alternative might be to prepend some character to & to bring what's before it all the way up to the top of the current selector rather than just the parent.

Maybe that could be < &, so using Oscar's example:

.no-boxshadow < & {} would translate to .no-boxshadow section article h1 {}, and .no-boxshadow & {} would translate to section article .no-boxshadow h1 {}

OR perhaps use [.no-boxshadow] & {} to put .no-boxshadow in front of the parents.

bobthecow · 2011-04-28T16:18:56Z

It looks like SASS uses & the way I outlined:

& will be replaced with the parent selector as it appears in the CSS. This means that if you have a deeply nested rule, the parent selector will be fully resolved before the & is replaced.

If we use it some other way, we should prob'ly use some other symbol...

gillesv · 2011-05-13T11:59:23Z

Was about to request the same feature. Mordernizr.js and HTML5 Boilerplate both have awesome CSS3 and Internet Explorer detection tricks that rely on classes added to the html tag. If this feature would be implemented it would greatly reduce the amount of LESS CSS I'd have to write ànd improve the legibility/portability of my code.

+1

joeldbirch · 2011-05-14T06:50:21Z

I too am constantly finding the need for this feature for the reasons mentioned by gillesv. I really hope this gets in. It just feels messy and somehow disappointing to create a nice self-contained nested block of LESS to describe a module and then have to create a separate block for when that module is a child of an alternative ancestor.

+1

jamesfoster · 2011-05-18T15:56:58Z

This is one of the first issues I raised on this project #9

I'd love to see this implemented.

+1

jamesfoster · 2011-05-18T17:30:20Z

Ok. So I've implemented it in dotless here

https://github.com/dotless/dotless/tree/commit/468e650c

it was quite straight forward so should be easy enough for someone to back port into less.js

Have fun :)

jamesfoster · 2011-05-20T12:40:53Z

Ok. So I just ported this over to less.js, here's the pull request.

#268

Enjoy.

rosshadden · 2011-05-20T12:56:02Z

Thank you!

cloudhead closed this as completed Dec 17, 2011

lukeapage mentioned this issue Jul 20, 2012

[.conditionalSelector] support for libraries like Modernizr #251

Closed

seven-phases-max mentioned this issue Feb 11, 2014

Can't extend, if I import a less file from within a class, because class is written twice in output #1850

Closed

seven-phases-max mentioned this issue Jan 15, 2015

Nested File-Import with Sub-Element Selector has unexpected result #2395

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

parent selector ala SASS #127

parent selector ala SASS #127

TomasM commented Oct 12, 2010

EtienneLem commented Oct 12, 2010

TomasM commented Oct 12, 2010

rzhw commented Feb 16, 2011

oscar-b commented Mar 29, 2011

subtleGradient commented Apr 9, 2011

gerrit commented Apr 26, 2011

rosshadden commented Apr 27, 2011

neonstalwart commented Apr 27, 2011

rosshadden commented Apr 27, 2011

webxl commented Apr 27, 2011

bobthecow commented Apr 28, 2011

oscar-b commented Apr 28, 2011

bobthecow commented Apr 28, 2011

webxl commented Apr 28, 2011

bobthecow commented Apr 28, 2011

gillesv commented May 13, 2011

joeldbirch commented May 14, 2011

jamesfoster commented May 18, 2011

jamesfoster commented May 18, 2011

jamesfoster commented May 20, 2011

rosshadden commented May 20, 2011

parent selector ala SASS #127

parent selector ala SASS #127

Comments

TomasM commented Oct 12, 2010

EtienneLem commented Oct 12, 2010

TomasM commented Oct 12, 2010

rzhw commented Feb 16, 2011

oscar-b commented Mar 29, 2011

subtleGradient commented Apr 9, 2011

gerrit commented Apr 26, 2011

rosshadden commented Apr 27, 2011

neonstalwart commented Apr 27, 2011

rosshadden commented Apr 27, 2011

webxl commented Apr 27, 2011

bobthecow commented Apr 28, 2011

oscar-b commented Apr 28, 2011

bobthecow commented Apr 28, 2011

webxl commented Apr 28, 2011

bobthecow commented Apr 28, 2011

gillesv commented May 13, 2011

joeldbirch commented May 14, 2011

jamesfoster commented May 18, 2011

jamesfoster commented May 18, 2011

jamesfoster commented May 20, 2011

rosshadden commented May 20, 2011