Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Nesting LESS

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #155234
    emaildano
    Participant

    I was curious about nesting classes using less.

    For example if I’m using the following mark-up, why wouldn’t the following LESS styles work?

    <div>
      2007
    </div>
    
    .year {
    
        h2 {
        /* this doesn't work */
        }
    }
    
    
    .year h2 { /* but this does */ }
    
    #155240
    Paulie_D
    Member

    Where is the h2 in your example…because there isn’t one in your HTML

    How does this

    .year {
    
        h2 {
    
        }
    }
    

    compile in output CSS.

    #155447
    emaildano
    Participant

    Missed the tag in the first post, oops.

    How about this example:

    <body class="wrap-up"></body>

    body { .wrap-up { background: @lightblue; } }

    That doesn’t work. But if I modify the CSS to the following, it works.

    body.wrap-up { background: @lightblue; }

    #155451
    Josh
    Participant

    In your last example, your Less is targeting an element with a class of .wrap-up inside of the body element ( so, body .wrap-up instead of body.wrap-up). What you’re after there is the parent selector:

    body {
     &.wrap-up {
        background: @lightblue;
      }
    }
    
    #155520
    emaildano
    Participant

    @Josh, thanks!

    I’m just digging into LESS and I’m loving it, so this is helpful.

    Thanks again.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.