SCSS Mixin Function for UL LI nested list-CodePudding

I have UL li nested structure for tree and I wanted to write dynamic code using SCSS Mixin that left value can update accordingly. Here is my code

<ul>
  <li><span>Level 1: Item 1</span>
    <ul>
      <li><span>Level 2: Item 1</span></li>
      <li><span>Level 2: Item 2</span>
        <ul>
          <li><span>Level 3: Item 1</span></li>
          <li><span>Level 3: Item 2</span></li>
          <li><span>Level 3: Item 3</span></li>
        </ul>
      </li>
      <li><span>Level 2: Item 3</span></li>
    </ul>
  </li>
  <li><span>Level 1: Item 2</span></li>
  <li><span>Level 1: Item 3</span></li>
</ul>
ul{
  list-style:none;
}
ul li{
  position:relative;
  margin:4px 0;
}
ul li span{
  display:block;
}
ul li span:before{
  content: "";
  height: 100%;
  z-index: 0;
  position: absolute;
  left:0;
  right:0;
  background:blue;
  z-index:-1;
}
ul li span{
  position:relative;
  color:white;
}
ul li span::before {
        left: -8px;
    }
    ul li li span::before {
        left: -48px;
    }
    ul li li li span::before {
        left: -88px;
    }
    ul li li li li span::before {
        left: -128px;
    }
    ul li li li li li span::before {
        left: -168px;
    }
    ul li li li li li li span::before {
        left: -208px;
    }

My fiddle

Can you please help me to add dynamic left value using SCSS Mixin so that left value will update as per number of levels. Thanks

CodePudding user response：

use this

li:nth-child(2) {
   padding-left: 48px;
}

with the value in brackets you can select the li and and with padding-left you set the left space of li and you don't need the span

CodePudding user response：

Here is a simple mixin:

@mixin leftPosition($startingValue: 0, $increment: 40, $max: 10) { $selector: '';

@for $i from 0 through $max - 1 {
  $selector: $selector   ' li';
  #{$selector} span::before {
    left: #{$startingValue - $i * $increment}px;
  }
}

It takes few parameters:

$startingValue is the first value for your left property. It defaults to 0, but in your example you'd want -8.
$increment is the incremental value you want, heree you want 40.
$max is the number of li you'll get.

You can use it like this:

ul {
    @include leftPosition($startingValue: -8)
}

And it will output:

ul li span::before {
  left: -8px;
}
ul li li span::before {
  left: -48px;
}
ul li li li span::before {
  left: -88px;
}
ul li li li li span::before {
  left: -128px;
}
ul li li li li li span::before {
  left: -168px;
}
ul li li li li li li span::before {
  left: -208px;
}
ul li li li li li li li span::before {
  left: -248px;
}
ul li li li li li li li li span::before {
  left: -288px;
}
ul li li li li li li li li li span::before {
  left: -328px;
}
ul li li li li li li li li li li span::before {
  left: -368px;
}

Of course, you can't get the value of $max from the HTML. It's a value you'll have to define yourself.