Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

$list-tree-chain-base: '.list-tree__list';
$list-tree-chain: '';
$list-tree-chain-tail: '.list-tree__item';
$max-supported-tree-depth: 30;

$arrow-width: 22px;

// Indent the view tree by generating a bunch of nested
// selectors. We use this approach instead of using
// normal list margin/padding because we want the hover
// effect to use 100% width.
//
// Output:
// http://sassmeister.com/gist/856f20d9a060afbe89db
@for $i from 1 through $max-supported-tree-depth {
  $list-tree-chain: 'ul ' + $list-tree-chain;

  #{$list-tree-chain-base + ' ' + $list-tree-chain + ' ' + $list-tree-chain-tail} {
    padding-left: ($arrow-width / 2) * $i;

    &--no-children {
      // Items without children get extra padding
      // since there is no dropdown arrow.
      padding-left: ($arrow-width / 2) * $i + $arrow-width;
    }
  }
}

SassMeister-output.css

.list-tree__list ul .list-tree__item {
  padding-left: 11px;
}
.list-tree__list ul .list-tree__item--no-children {
  padding-left: 33px;
}

.list-tree__list ul ul .list-tree__item {
  padding-left: 22px;
}
.list-tree__list ul ul .list-tree__item--no-children {
  padding-left: 44px;
}

.list-tree__list ul ul ul .list-tree__item {
  padding-left: 33px;
}
.list-tree__list ul ul ul .list-tree__item--no-children {
  padding-left: 55px;
}

.list-tree__list ul ul ul ul .list-tree__item {
  padding-left: 44px;
}
.list-tree__list ul ul ul ul .list-tree__item--no-children {
  padding-left: 66px;
}

.list-tree__list ul ul ul ul ul .list-tree__item {
  padding-left: 55px;
}
.list-tree__list ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 77px;
}

.list-tree__list ul ul ul ul ul ul .list-tree__item {
  padding-left: 66px;
}
.list-tree__list ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 88px;
}

.list-tree__list ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 77px;
}
.list-tree__list ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 99px;
}

.list-tree__list ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 88px;
}
.list-tree__list ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 110px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 99px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 121px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 110px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 132px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 121px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 143px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 132px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 154px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 143px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 165px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 154px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 176px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 165px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 187px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 176px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 198px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 187px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 209px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 198px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 220px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 209px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 231px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 220px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 242px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 231px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 253px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 242px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 264px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 253px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 275px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 264px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 286px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 275px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 297px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 286px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 308px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 297px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 319px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 308px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 330px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 319px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 341px;
}

.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item {
  padding-left: 330px;
}
.list-tree__list ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul .list-tree__item--no-children {
  padding-left: 352px;
}