Using LESS to recursively style an inner class of the same name?

微信扫一扫,分享到朋友圈

Using LESS to recursively style an inner class of the same name?

I just started working with LESS but haven’t been able to find an answer to this anywhere.

Can less support some sort of nesting or recursion for the same class?

My requirement is that I may have a div nested somewhere under another div of the same name (it won’t necessarily always be a direct first level child of the parent div).

I need to style the 2nd div differently to the first… is this possible.

NOTE: I’m tied to using LESS due to the project I’m on so other frameworks are not an option.
I realize defining different classes for each div would work but also not an option.
I know this is a strange one but working within the limitations of the project I’m on unfortunately.

Problem courtesy of: user1389920

Solution

You should be able to do it like this:

div.someClass {
    div.someClass {

    }
}

You will probably have to “reset” any original styles you no longer want within the nested div like this:

div.someClass {
    color: red;
    div.someClass {
        color: #333;
    }
}

Solution courtesy of: bottens

Discussion

of course you can nest your selectors. Here is an example, if you want mydiv display differently if it is inside or outside the parent. .mydiv
will display red if it is somewhere inside the .outerdiv
, and red everywhere else on the page.

LESS:

.mydiv {
    height:100px;
    width:200px;
    background:green;
}
.outerdiv {
    width:300px;
    background:orange;
    .mydiv {
        background:red;
    }
}

the output CSS:

.mydiv {
  height: 100px;
  width: 200px;
  background: green;
}
.outerdiv {
  width: 300px;
  background: orange;
}
.outerdiv .mydiv {
  background: red;
}

and the selector .outerdiv .mydiv
will work on all object of class .mydiv
inside the outerdiv, no matter the nesting leve.

DEMO

and it should work the same with nesting classes with the same name
, like so (I add some fanciness with the variable and calculation =)

LESS:

@width:300px;

.mydiv {
    height: 100px;
    width: @width;
    background: green;
    .mydiv {
        width:(@width - 100px);
        background:red;
    }
}

output CSS:

.mydiv {
  height: 100px;
  width: 300px;
  background: green;
}
.mydiv .mydiv {
  width: 200px;
  background: red;
}

The multileveled selector will automatically inherit the properties from the simple selector in the stylesheet.

DEMO 2

hope this helps!

Discussion courtesy of: Martin Turjak

This recipe can be found in it’s original form on Stack Over Flow
.

微信扫一扫,分享到朋友圈

Using LESS to recursively style an inner class of the same name?

Sharing Integration Runtimes Among Azure Data Factories

上一篇

通报:关于罗克韦尔工业软件存在严重安全漏洞的风险预警

下一篇

你也可能喜欢

Using LESS to recursively style an inner class of the same name?

长按储存图像,分享给朋友