Does LESS have a "parent" selector (ala SASS's "&" operator)

eric's Avatar

eric

01 Dec, 2010 05:37 PM

I'd like to say something like:


.employee {
    &.part-time { .. }
    &.full-time { .. }
}

Which would let me define styles for elements like div class="employee part-time" as opposed to nesting part-time under employee.

Does LESS support this? Thanks!

  1. 1 Posted by Fazal on 02 Dec, 2010 01:56 PM

    Fazal's Avatar

    Hi Eric,

    Yes you can, as per your own example. you can also do the same for pseudo selectors:

    a{ &:hover{ .. } &:visited { .. } }

  2. 2 Posted by eric on 06 Dec, 2010 11:58 PM

    eric's Avatar

    Thanks! I hadn't seen it in any of the docs and assume (wrongly!) that it was absent. This will help DRY out some of my less code a bit! Thanks.

  3. 3 Posted by edbrannin on 07 Dec, 2010 09:04 PM

    edbrannin's Avatar

    Is this in the Ruby gem, or only in less.js?

    I'm getting an error when I try this from Ruby's lessc:
    : Change detected... ! Syntax Error: on line 403: expected one of @import * - @ :: : . # [ @media @font-face /* // } got & after:

  4. 4 Posted by Nik on 10 Dec, 2010 03:32 AM

    Nik's Avatar

    Hi everyone, I was just about to write a question about this when I saw this post. Commenter edbrannin asked my question: I am using the less gem at version 1.2 with the More plugin, both are up to date. and I do get that same error

    on line 21: expected one of @import * - @ :: : . # [ @media @font-face /* // } got & after:

    where line 21 is where the "&", the parent referencer, is.

    So is this a LESS issue? or More's issue?

  5. 5 Posted by rafa200 on 04 Jan, 2011 07:49 PM

    rafa200's Avatar

    lessc 1.2.21

    ! Syntax Error: on line 11: expected one of @import * - @ :: : . [ @media @font-face /* // got # after :

    Input file had a vim line started with the wrong comment file at the end:

    vim: filetype=css :

    I erase the line and it worked perfectly.

    replaced that line with:

    // vim: filetype=css :

    Maybe that can be of some help here.

  6. 6 Posted by lagrz on 05 Jan, 2011 06:54 PM

    lagrz's Avatar

    I was also getting the same error on the gem version of lesscss but as soon as i switched over to the JS version it all works fine.

  7. 7 Posted by nicholas.jakobs... on 06 Jan, 2011 07:08 PM

    nicholas.jakobsen's Avatar

    The parent selector is not available in the Ruby Gem, only in the Node JS version. It is the same operator as in SASS.
    eg.

    .dog{
      color: black;

      &.good{
        color: green;
      }
    }

  8. 8 Posted by mkoistinen on 18 Jan, 2011 06:04 PM

    mkoistinen's Avatar

    This is a major feature, IMHO, of LESS and should be added to the documentation here: http://lesscss.org/docs

  9. 9 Posted by adrian on 18 Jan, 2011 06:30 PM

    adrian's Avatar

    I agree, the parent selector is a huge feature. But they've created a split between the versions as the Ruby Gem, which is still the primary tool documented on the website, lacks this very useful feature and it doesn't look like there is any desire to put more work into the Ruby Gem.

    That's rather unfortunate since the JS version isn't ready by any means. For example, not only wouldn't it compile our 5k+ lines of Less that the Ruby Gem could, the error was so vague (no context or line numbers) that we had no choice but to stick with the Ruby Gem.

    If the Less team is watching this... please please please consider adding the parent selector to the Ruby Gem!

  10. 10 Posted by leon.lukashevsk... on 02 Feb, 2011 06:40 PM

    leon.lukashevsky's Avatar

    Here, here. I'd also be very grateful if support for the parent selector was added to the Ruby Gem.

    Thanks.

  11. 11 Posted by Zach Hale on 07 Feb, 2011 11:57 PM

    Zach Hale's Avatar

    If nothing else, please update the less site to mention what isn't supported in the ruby gem. I almost tore my hair out trying to figure out what I was going wrong only to find it's actually not supported.

  12. 12 Posted by Nik So on 09 Feb, 2011 10:40 PM

    Nik So's Avatar

    Can the LessCSS ruby gem be forked so that it may be worked on by others to
    include stuff like @media query, parent-selector sort of things? These are
    really nice and time-savers ,and saving time is why we used LessCSS in the
    first place. Just a suggestion.

    On Mon, Feb 7, 2011 at 3:57 PM, Zach Hale <
    [email blocked]> wrote:

  13. 13 Posted by Joel Parker Hen... on 18 Mar, 2011 07:06 PM

    Joel Parker Henderson's Avatar

    PLEASE document this on the website to show that & parent selector doesn't work in the gem. And ideally, please add it to the gem because & is a great feature.

  14. 14 Posted by Christian on 26 Apr, 2011 02:46 PM

    Christian's Avatar

    It took me 1h to figure out that this doesn't work :(

  15. 15 Posted by WilliamNit on 15 Jun, 2016 03:05 PM

    WilliamNit's Avatar

    Thanks for sharing, this is a fantastic forum.Really looking forward to read more. Keep writing. Worst

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac