CSS only treeview built in SASS

example.html

<div class="Treeview">
    <ul>
        <li>
            <a class="Treeview__Item" href="#">Equipos</a>

            <ul>
                <li><a href="#" class="Treeview__Item">Fuentes</a></li>
                <li><a href="#" class="Treeview__Item">Dispensadores</a></li>
                <li><a href="#" class="Treeview__Item">Osmosis</a></li>
                <li><a href="#" class="Treeview__Item">Descalcificadores</a></li>
            </ul>
        </li>
        <li>
            <a class="Treeview__Item" href="//localhost:3000/config/product-category/6/edit">Productos</a>
        </li>
        <li>
            <a class="Treeview__Item" href="//localhost:3000/config/product-category/7/edit">Accesorios</a>
        </li>
    </ul>
</div>

treeview.sass

$treeview-line-color: $brand-warning
$treeview-item-color: $body-color
$treeview-item-bg: white
$treeview-item-decorator-color: $brand-success-light
$treeview-border-radius: $border-radius

.Treeview
    ul
        list-style: none
        padding-left: $spacer

        li
            padding-top: $spacer
            padding-left: $spacer
            border-left: 3px solid $treeview-line-color

.Treeview__Item
    position: relative
    &:before
        @include vertical-align
        content: " "
        position: absolute
        background: $treeview-line-color
        width: $spacer + 0.1
        height: 3px
        left: -$spacer - 0.1

    display: inline-block
    border-radius: $treeview-border-radius
    padding: $spacer / 2
    background: $treeview-item-bg
    color: $treeview-item-color
    border-right: 5px solid $treeview-item-decorator-color

    &:hover
        text-decoration: none
        color: $treeview-item-color
        background: darken($treeview-item-bg, 5%)