Как автоматически сгенирировать less для HTML?

Question

[Yuri Kalnin]

Есть ли такой инструмент который сделает для меня каркас less для моего написанного html?
либо с помощью gulp или может в sublime есть такое расширение?

т.е пишу я 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>

а мне где то выдается less структура:

что то типа:

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

Comments

[sim3x]

0. emmet
1. BEM

Не нужно делать вложенность классов больше 2
Проще написать классы и чтоб еммет развернул их

[Yuri Kalnin]

sim3x, иммет делает из строки селектора html
если я напишу

.container>.row>.col-md-12>a.btn.btn-default{Иммет тут не поможет}

я получу HTML, а мне надо less развернуть.

еще не удобно писать длинные строки иммета. все равно я ограничиваюсь парой тройкой элементов, было бы отлично если выделил html тебе выдали less или sass древо стилей :)

[Толстый Лорри]

Не надо так. Если вам не нужны сильно специфичные селекторы, то не нужно их использовать. LESS-вложенность как способ визуальной структуризации кода - говно, ибо при попытке переиспользования начинаются !important и битва селекторов. Разделяйте свои мега-файлы, где без структуризации черт ногу сломит, на отдельные логически связанные кусочки (блоки - в терминах БЭМ) и используйте import для их объединения.

На самом деле вам нужен такой LESS

.some-panel {
    ...
    &__body { ... }
}

.cart {
    ...
    &__caption { ... }
}

.my-app-standard-button {
    &--danger { ... }
}

И такой HTML

<div class="some-panel">              
    <div class="some-panel__body">
        <div class="cart">
            <div class="cart__caption">
                <h3>Квартира-студия</h3>
                <span>Отличный вариант для молодой семьи! Простой, чистый цвет отделки стен подходит под любой дизайн интерьера.</span>
                <button class="my-app-standard-button my-app-standard-button--danger">Подробнее</button>
            </div>
        </div>
    </div>
</div>

P.S. Если вам нужна кнопка, то лучшее делать ее с помощью HTML-элемента button или указывать role="button", ибо семантика.

[toha_man]

Толстый Лорри, бэм штука конечно хорошо продуманная. но названия классов ужОс полный. вложенные классы css смотрятся в 100 раз лучше. разумеется у написания кода на чистом css нет гибкости

[Толстый Лорри]

toha_man, почему ужас-то?) Их редко бывает больше одного (использование модификаторов) куда проще делать уникальными и описательными, зависимости прослеживаются. Короткие имена и каскадирование убивают компонетность. Приходит с опытом и шишками)

вложенные классы css смотрятся в 100 раз лучше

Не надо делать их вложенными, это же CSS, а не HTML (= Вложенность означает каскадирование, а это не нужно так часто.

разумеется у написания кода на чистом css нет гибкости

Главное преимущество препроцессоров в том, что они генерят старый CSS. Это единственная объективная от них польза.

[sim3x]

Yuri Kalnin, Еще раз
Вам ну нужно делать вложенность классов в цсс больше двух

[Yuri Kalnin]

sim3x, буду на бэм переходить, вы правы, исходный CSS у меня получается с длинными вложенными селекторами,
т.е я не задумывался когда писал вложенный less а на выходе в CSS получается много лишних букв, это и на вес css сказывается (оптимизация) и на переопределении стилей. спасибо

[Игорь Забродин]

Ответ

[Yuri Kalnin]

Игорь Забродин, это то что мне и надо было! он и бэм разворачивает без проблем