Денис Бирюков

Генерирование структуры LESS из HTML кода

02.01.2015 HTML, LESS

Хочу в двух словах рассказать об одном онлайн-сервисе, который позволяет генерировать LESS-структуру из заранее созданного HTML кода - это HTML to LESS converter (html2less). Данный сервис может пригодится и новичкам, которые только осваивают LESS, и тем, кто уже давно использует этот препроцессор.

Для примера, представим, что мы изначально создали такую HTML-разметку:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Супер-сайт</title>
</head>
<body>
  
    <header>
      <nav>
        <ul class="head-menu">
          <li><a href="/home.html" class="active-item">Главная</a></li>
          <li><a href="/catalog.html">Каталог</a></li>
          <li><a href="/contacts.html">Контакты</a></li>
        </ul>
      </nav>
    </header>
  
    <div id="middle">
      <section class="content"></section>
      <aside class="sidebar">
        <nav>
          <ul class="side-menu">
            <li><a href="/item1/">Item 1</a></li>
            <li><a href="/item2/" class="active-item">Item 2</a></li>
          </ul>
        </nav>
      </aside>
    </div>

    <footer>
      <span class="copyright">&copy; 2015 My Company, inc.</span>
    </footer>

</body>
</html>

Теперь мы переходим на вышеуказанный сервис, копируем в правое окно наш HTML-код, жмём "Convert" и получаем в правом окне такой результат:

header {
  nav {
    .head-menu {
      li {
        .active-item {
        }
        a {
        }
      }
    }
  }
}
div {
  .content {
  }
  .sidebar {
    nav {
      .side-menu {
        li {
          a {
          }
          .active-item {
          }
        }
      }
    }
  }
}
footer {
  .copyright {
  }
}

Такой костяк можно скопировать в свой less-файл, подредактировать (если нужно) и начать прописывать необходимые стили. Кроме онлайн-сервиса, можно взять код этого плагина на github, однако надо учитывать, что он написан на Python.