randy randy - 6 months ago 24
CSS Question

Scss - element depth recursive styles

Is there a way to make Scss check the element depth, and apply recursively added

margin
to that element?

So say I've got this:

<span>
<span>
<span>


Then I would like to have this, but without me typing the resursion:

span {
margin:10px;

span {
margin:20px;

span {
margin:30px;


I don't know the element depth and need this a lot, that's why I don't want to type this by hand. I don't know if I need a depth of 3, or a depth of up to 100.

Answer

Just use the direct ancestor operator >:

span > span {
    margin: 10px;
}
Comments