1

Is there any way I can reference the element within a nest of one of it's children?

I have the following:

div.chem_stage {
    position: relative;

    html.no-canvas {
        display: none;
    }
}

Of course this doesn't work, is there a method using LESS to allow me to do this? I could do 

html.no-canvas {
    .chem_stage {

    }
    .another_element {

    }
    etc...
}

But I have lots of elements I need to apply this rule to and I'd rather keep my rules in situ

Edit:

Using ScottS's techqniue, it doesn't seem to mix with @media queries

div.chem_stage {
    html.no-canvas &, @media only screen and (max-width : @respChem) {

produces

html.no-canvas div.chem_stage,
div.chem_stage $media only screen and (max-width : @respChem) {
Titan
  • 5,567
  • 9
  • 55
  • 90

1 Answers1

2

Answer to Original Question

I believe what you are seeking is the & combinator in LESS:

LESS

div.chem_stage {
    position: relative;

    html.no-canvas & {
        display: none;
    }
}

CSS Output

div.chem_stage {
  position: relative;
}
html.no-canvas div.chem_stage {
  display: none;
}

For a more detailed discussion of the particular use you refer to, see my answer to this stack overflow question, where I label it "End Target Grouping."

Update for Media Query Addition

Media queries in LESS are temperamental. They do not like to be mixed with regular selectors. This answer addressed some of those issues, and how you might combine code. However, in your case, probably a mixin is best, as you need to keep them separate and you cannot really use the html.no-canvas call as a mixin. So something like this:

LESS

div.chem_stage {
    position: relative;

    .groupedCode() {
        display: none;
    }

    html.no-canvas & {
        .groupedCode()
    }

    @media only screen and (max-width : @respChem) { 
        .groupedCode()
    }
}

CSS Output (Assuming @respChem is 300px here)

div.chem_stage {
  position: relative;
}
html.no-canvas div.chem_stage {
  display: none;
}
@media only screen and (max-width: 300px) {
  div.chem_stage {
    display: none;
  }
}
Community
  • 1
  • 1
ScottS
  • 71,703
  • 13
  • 126
  • 146
  • Ah perfect! I've always used & but never thought to put it after a rule! Thank you! – Titan Dec 27 '12 at 11:27
  • Had some issues mixing it with @media queries, I've updated my question – Titan Dec 27 '12 at 11:40
  • @GreenGiant: added thoughts regarding `@media`. – ScottS Dec 27 '12 at 14:13
  • a nice use of mixins for this solution thank you. I presume the mixins scope is limited to that nest, so I could use .no-animation() for my grouped code in multiple nests elsewhere (with different rules). – Titan Dec 27 '12 at 14:37
  • @GreenGiant: Yes, if it is defined locally in a nest, it can be redefined in another nest (or you can set one globally to handle any global aspects, and another per nest to modify it locally as needed). – ScottS Dec 27 '12 at 14:38