LessCss generate css from parent class until nested caller

Question

Lets start by giving an example,

Say for instance I have the class:

 <html class="browser-ie"> ...

then on some element, I would like to call my mixin:

.browser-ie(@mixin){
        html.browser-ie {
                 @mixin();
        }
}

and be able to call it from for instance an element :

.main {
         .nested {
              .morenested {
                     .browser-ie({ min-height:100% });
              }
         }
}

and have it generate the following css:

html.browser-ie .main .nested .morenested { min-height:100%; }

Is there anything in the toolbox that would allow for such a thing?

The Sass tag was deliberately removed. Do not ask about multiple unrelated languages in the same question (see: meta.stackoverflow.com/questions/272888/…). — cimmanon
– cimmanon, Commented Aug 28, 2015 at 18:43

anEffingChamp · Accepted Answer · 2015-08-28 19:06:34Z

2

I think that you are looking for the parent selector in your precompiler. This should output your desired CSS.

.main {
  .nested {
    .morenested {
      html.browser-ie & {
        min-height: 100%;
      }
    }
  }
}

Keep in mind that the parent selector can fall anywhere in a declaration, and it will inherit all of the classes you have nested into up to that point, and append them to your string.

edited Aug 28, 2015 at 19:06

answered Aug 28, 2015 at 18:44

anEffingChamp

1665 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mjs Over a year ago

I actually beat you too it by 1 second :P Good job. Thanks man! I have to wait 7 more minutes

mjs Over a year ago

However, I must say I am a bit dissapointed it doesn't work with mixins. I can't pass the code block to the mixin.

mjs Over a year ago

This doesn't work, but is there something that might? hastebin.com/ucivisinan.avrasm

mjs Over a year ago

I am not sure what you mean by "keep in mind". Isn't that what I am asking for? Are you talking about certain edge cases which might break things?

mjs Over a year ago

I turned the remaining discussion into a new question: stackoverflow.com/questions/32278206/…

|

Leo Javier · Accepted Answer · 2015-08-28 18:51:30Z

0

do you mean something like this?

.myColor{
    min-height:100%;
}


    .main{
        .nested{
            .morenested{
                .myColor;
            }
        }
    }

result:

/* Generated by less 2.4.0 */
.myColor {
  min-height: 100%;
}
.main .nested .morenested {
  min-height: 100%;
}

edited Aug 28, 2015 at 18:51

answered Aug 28, 2015 at 18:47

Leo Javier

1,41314 silver badges19 bronze badges

1 Comment

mjs Over a year ago

Yes, like that. Only I don't want my rule to be defined under html.browser-ie. I can't have code living in separate places for each browser, impossible to maintain. There is another answer to this question below.

Collectives™ on Stack Overflow

LessCss generate css from parent class until nested caller

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related