当前位置: 动力学知识库 > 问答 > 编程问答 >

less - LessCss generate css from parent class until nested caller

问题描述:

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?

网友答案:

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.

网友答案:

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%;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: