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

Question

Yuri Kalnin @Haotic

Full stack web developer

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

Есть ли такой инструмент который сделает для меня каркас 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{
        
      }
    }
  }
}

Вопрос задан более трёх лет назад
146 просмотров

9 комментариев

Подписаться 2 Простой 9 комментариев

sim3x @sim3x

0. emmet
1. BEM

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

Написано более трёх лет назад
Yuri Kalnin @Haotic Автор вопроса

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

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

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

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

Написано более трёх лет назад
Толстый Лорри @Free_ze
Не надо так. Если вам не нужны сильно специфичные селекторы, то не нужно их использовать. 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 @toha_man

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

Написано более трёх лет назад
Толстый Лорри @Free_ze

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

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

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

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

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

Написано более трёх лет назад
sim3x @sim3x

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

Написано более трёх лет назад
Yuri Kalnin @Haotic Автор вопроса

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

Написано более трёх лет назад
Игорь Забродин @Rapt0p7

Ответ

Написано более трёх лет назад
Yuri Kalnin @Haotic Автор вопроса

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 23 апр.
- 52 просмотра
0

ответов
Gulp.js

+1 ещё

Простой
Не применяются стили scss. Что делать?
- 1 подписчик
- 21 апр.
- 96 просмотров
0

ответов
Gulp.js

Сложный
Существует ли современный аналог gulp emitty?
- 1 подписчик
- 19 апр.
- 27 просмотров
0

ответов
Вёрстка

Средний
Как правильно вставлять изображения при наличии двух тем оформления сайта?
- 1 подписчик
- 19 апр.
- 109 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 18 апр.
- 89 просмотров
1

ответ
Gulp.js

+1 ещё

Средний
Не запускается gulp,пишет: styles errored after 144ms. Как лечить такое?
- 1 подписчик
- 17 апр.
- 93 просмотра
0

ответов
Вёрстка

Простой
В чем может быть проблема, верстка расплывается по экрану телефона?
- 5 подписчиков
- 17 апр.
- 5128 просмотров
7

ответов
Вёрстка

Средний
Что использовать для современной автоматизации верстки?
- 1 подписчик
- 15 апр.
- 158 просмотров
1

ответ
Вёрстка

Простой
Можно ли сверстать макет без JavaScript?
- 3 подписчика
- 15 апр.
- 808 просмотров
3

ответа
Gulp.js

Сложный
Можно ли в gulp-rigger как-то прописать абсолютную ссылку на шаблон?
- 1 подписчик
- 12 апр.
- 27 просмотров
1

ответ
Показать ещё Загружается…

Frontend Vue & Capacitor Developer Middle++

Parasol Software

от 2 000 до 2 500 $

Frontend программист-разработчик

Максавит • Нижний Новгород

До 200 000 ₽

PHP-программист (SEO-правки)

Demis Group

от 50 000 ₽

Прием WebRTC через Socket io в unity c#

26 апр. 2024, в 13:12

2000 руб./за проект

Настроить AmoCrm для туристического агентства

26 апр. 2024, в 13:06

500 руб./в час

Доработка функционала десктоп приложения (CRM) для Windows

26 апр. 2024, в 13:00

30000 руб./за проект

0. emmet
1. BEM

Не нужно делать вложенность классов больше 2
Проще написать классы и чтоб еммет развернул их
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", ибо семантика.
Толстый Лорри, бэм штука конечно хорошо продуманная. но названия классов ужОс полный. вложенные классы css смотрятся в 100 раз лучше. разумеется у написания кода на чистом css нет гибкости
toha_man, почему ужас-то?) Их редко бывает больше одного (использование модификаторов) куда проще делать уникальными и описательными, зависимости прослеживаются. Короткие имена и каскадирование убивают компонетность. Приходит с опытом и шишками)

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

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

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

Главное преимущество препроцессоров в том, что они генерят старый CSS. Это единственная объективная от них польза.
Yuri Kalnin, Еще раз
Вам ну нужно делать вложенность классов в цсс больше двух
sim3x, буду на бэм переходить, вы правы, исходный CSS у меня получается с длинными вложенными селекторами,
т.е я не задумывался когда писал вложенный less а на выходе в CSS получается много лишних букв, это и на вес css сказывается (оптимизация) и на переопределении стилей. спасибо
Игорь Забродин, это то что мне и надо было! он и бэм разворачивает без проблем

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт