Какой сервис, программа или плагин для webstorm может автоматически экспортировать структуру html в css?

Question

Drm @Drm

HTML
CSS

Какой сервис, программа или плагин для webstorm может автоматически экспортировать структуру html в css?

Здравствуйте.

Сейчас довольном много приходится верстать страниц, пишу обычно в websorm. Сначала я пишу html-код, а уже после него css. Поскольку я пользуюсь препроцессором less, то структура less документа полностью повторяет html. Отсюда вопрос, можно ли как-то автоматически перенести структуру html-документа в css-вид

если совсем на пальцах. Я хочу автоматически получить из

<body>
<div class="wrapper">
    <div class="left-box"></div>
    <div class="right-box">
        <p><span></span></p>
    </div>
</div>
</body>

вот это

body{
  .wrapper{
    .left-box{
 
    }
    .right-box{
      p{
        span{
 
        }
      }
    }
  }
}

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

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

Подписаться 7 Оценить 8 комментариев

kapuletti @kapuletti

Но ведь так нельзя писать CSS

Написано более трёх лет назад
Ильяс Галиев @MrGaliev

kapuletti: вы знаете что речь идет о LESS?

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

MrGaliev: какая разница, сам принцип наследования будет жесткий и неудобный для дальнейшей поддержки.

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

kapuletti: Вы наверное, не знакомы с less, проблему, про которую Вы говорите спокойно решают переменные, а в качестве переменной может быть любой кусок кода, с любым количеством вложенных элементов.

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

Drm: похоже на то, можете поподробнее рассказать, я не понимаю о чем речь.

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

Вот, хорошая статья об основных функциях less
habrahabr.ru/post/136525

Но если коротко, то я имею ввиду возможности Примесей (mixins)
Пример:

.rounded_top {
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.tab {
background: #333;
color:#fff;
.rounded_top;
}
.submit {
.rounded_top;
}

В итоге у блока с классом .submit будут скругленные вверху углы и цвет фона #333

А в дальнейшем я могу оперировать миксом .submit и спользовать конструкцию типа:

.bottom{
.submit;
}

И так далее...

Помимо этого можно использовать многоуровневые миксы

.text{
p{
color:red;
a{
text-transform:uppercase;

span{
text-decoration:none;
}
}

}
}

В итоге подставив микс .text к любому абзацу я получу цвет красного цвета с сылкой заглавными буквами, и не подчеркнутым спаном в ней.

Благодаря примесям я выношу однотипные элементы в начало документа, а потом их использую в каждом месте.

Но основную структуру html документа все-таки приходится повторять.

На выходе же я получу привычный Вам css документ, который можно будет редактировать

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

Drm: А если элементы повторяются несколько раз, зачем хардкодить чтобы примешивать одно и тоже по 100 раз в разные блоки в разные места? Можете показать примеры такой, описанной вами верстки, только не на одностраничном сайте, а на крупном.

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

хардкорить совсем не обязательно, данный пример просто показывает гибкость препроцессора Less

на вскидку недавно законченный проект m.vseinstrumenti.ru

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

Решения вопроса 1

Комментировать

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

Ответы на вопрос 2

Комментировать

2 комментария

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

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

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

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 20 часов назад
- 122 просмотра
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 94 просмотра
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 90 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 72 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 61 просмотр
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 98 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 81 просмотр
2

ответа
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 35 просмотров
0

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Интеграция бэкэнда с фронтендом и доработка (react + next + laravel)

24 нояб. 2024, в 20:45

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

Сверстать веб приложение на vue

24 нояб. 2024, в 19:46

1000 руб./в час

Стили/дизайн/верстка приложения на QT

24 нояб. 2024, в 19:43

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

kapuletti: вы знаете что речь идет о LESS?
MrGaliev: какая разница, сам принцип наследования будет жесткий и неудобный для дальнейшей поддержки.
kapuletti: Вы наверное, не знакомы с less, проблему, про которую Вы говорите спокойно решают переменные, а в качестве переменной может быть любой кусок кода, с любым количеством вложенных элементов.
Drm: похоже на то, можете поподробнее рассказать, я не понимаю о чем речь.
Вот, хорошая статья об основных функциях less
habrahabr.ru/post/136525

Но если коротко, то я имею ввиду возможности Примесей (mixins)
Пример:

.rounded_top {
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.tab {
background: #333;
color:#fff;
.rounded_top;
}
.submit {
.rounded_top;
}

В итоге у блока с классом .submit будут скругленные вверху углы и цвет фона #333

А в дальнейшем я могу оперировать миксом .submit и спользовать конструкцию типа:

.bottom{
.submit;
}

И так далее...

Помимо этого можно использовать многоуровневые миксы

.text{
p{
color:red;
a{
text-transform:uppercase;

span{
text-decoration:none;
}
}

}
}

В итоге подставив микс .text к любому абзацу я получу цвет красного цвета с сылкой заглавными буквами, и не подчеркнутым спаном в ней.

Благодаря примесям я выношу однотипные элементы в начало документа, а потом их использую в каждом месте.

Но основную структуру html документа все-таки приходится повторять.

На выходе же я получу привычный Вам css документ, который можно будет редактировать
Drm: А если элементы повторяются несколько раз, зачем хардкодить чтобы примешивать одно и тоже по 100 раз в разные блоки в разные места? Можете показать примеры такой, описанной вами верстки, только не на одностраничном сайте, а на крупном.
хардкорить совсем не обязательно, данный пример просто показывает гибкость препроцессора Less

на вскидку недавно законченный проект m.vseinstrumenti.ru

Answer 1 · 2015-01-02 16:59:10

Собственно проблема была решена просто, как я и предполагал.

Все решается одним питоновским скриптом https://github.com/antennaio/html2less

Всем огромное спасибо.

Answer 2 · 2015-01-02 01:46:34

Госпади какой ужас... Пощадите тех кто будет эту верстку потом поддерживать. Почитайте про модульный CSS, BEM и т.д.

В селекторах вида body .wrapper нет ровным счетом никакого смысла.

Но если вы хотите, рекомендую вам перейти на jade вместо html и stylus вместо less, это почти полностью решит вашу проблему.

Ваш пример на Jade

body
  .wrapper
     .left-box
     .right-box
       p
          span

и Stylus (color взял просто так...)

body
  color: #fff;
  .wrapper
     color: #f00;
     .left-box
         color: #0f0;
     .right-box
       color: #ff0;
       p
           color: #f0f;
         span
           color: #34f;

Как видите - мы просто копируем шаблон jade и... все

Но еще раз хочу заметить - вообще это все очень плохо. Даже less вам не поможет в этом случае нормально организовать структуру стилей. Не соблюдается семантика и т.д. Приоритеты стилей в разнобой - сложно поддерживать...

Answer 3 · 2015-01-02 12:01:29

name surname @symbol

short

очень простецкий сервис, но может полезным будет bearcss.com

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

2 комментария

Какой сервис, программа или плагин для webstorm может автоматически экспортировать структуру html в css?

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

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

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