将HTML转换为less / sass结构

Question

我经常创建一些html结构，然后为此创建less / sass样式。通常，结构中的每个元素都需要一些样式，它需要我将'html结构'重写为less / sass。

重写时只有一个规则 - 在html中多次出现的元素只在less / sass中声明一次。

是否有任何工具可以让我将HTML粘贴到其中并生成相应的较少/ sass结构，以便进行样式设计？

示例：

这样的html：

<div class="container">
    <div class="elem"></div>
    <div class="elem">
        <div class="sub"></div>
        <div class="sub"></div>
    </div>
    <div class="elem">
        <img class="other-sub"/>
    </div>
</div>

会导致这么少：

.container {

    .elem {

        .sub {

        }
        img.other-sub {

        }
    }
}