Overriding nesting, to stay in scope

Question

I was wondering if I could override the nesting in LESS, to stay in my scope - just because it's simpler... :-)

If I have an element which has two states, depending on let's say a body-class, I need to define two CSS objects. I would like to have only one, per module.

.module {
    h1 {
        float: left;
    }
}

body.secondary {
    .module {
        h1 {
            float: right;
        }
    }
}

Like when you define the parent with &, is there any way to overwrite that parent?? So maybe it could look like this:

.module {
    h1 {
        float: left;
    }

    &=body.secondary {
        h1 {
            float: right;
        }
    }
}

Where the & is defined as another selector...

This could be awesome, and make my CSS more simple in terms of one CSS object per module.

Thanks... :-)

score 1 · Accepted Answer · edited May 23 '17 at 12:04

I've done some extensive commentary on this both in this answer and this answer. In your particular case, it would be this:

LESS

.module {
    h1 {
        float: left;
       body.secondary & {
          float: right;
       }  
    }
}

CSS Output

.module h1 {
  float: left;
}
body.secondary .module h1 {
  float: right;
}

The key is to realize that the & is not just for targeting the "parent" per se in the html structure, but rather is a string replacement for the entire nested structure it sits within. So in my solution above, the nested LESS "parent" is .module h1 which is the string replaced at the & point in the body.secondary & construct nested within it.

Overriding nesting, to stay in scope

1 Answers1