How to automatically generate less for HTML?

Question

Layout

Is there a tool that will make me a less framework for my written html?
either with gulp or maybe there is such an extension in sublime?
i.e. I write html:

<div class="panel">
              
              <div class="panel-body">
                <div class="cart">
                  
                  
                  <div class="caption">
                    <h3>Квартира-студия</h3>
                    <div class="text">
                      Отличный вариант для молодой семьи! Простой, чистый цвет отделки стен подходит под любой дизайн интерьера.
                    </div>
                    <a href="" class="btn btn-danger">Подробнее</a>
                  </div>

                </div>
              </div>          
              
            </div>

and somewhere I get a less structure:
something like:

.panel{
  .panel-body{
      .cart{
        .caption{
        
      }
    }
  }
}