Какой сервис, программа или плагин для 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

+1 ещё

Средний
Как правильно сделать переключение темы?
- 1 подписчик
- 8 часов назад
- 94 просмотра
2

ответа
HTML

+3 ещё

Простой
Почему третья карточка не становиться в ряд?
- 1 подписчик
- вчера
- 155 просмотров
1

ответ
HTML

+1 ещё

Простой
Как добиться срабатывания transition для checkbox?
- 1 подписчик
- 02 нояб.
- 79 просмотров
3

ответа
CSS

Простой
Как сделать общий градиент для двух блоков?
- 1 подписчик
- 02 нояб.
- 99 просмотров
1

ответ
HTML

Простой
Как преобразовать HTML в exe?
- 2 подписчика
- 02 нояб.
- 332 просмотра
4

ответа
HTML

+1 ещё

Простой
Как сделать Second Picker?
- 1 подписчик
- 02 нояб.
- 103 просмотра
2

ответа
HTML

Простой
Чем и как вы тестируете WAI-ARIA?
- 1 подписчик
- 01 нояб.
- 60 просмотров
0

ответов
HTML

+1 ещё

Простой
Как исправить эффект при наведении?
- 1 подписчик
- 01 нояб.
- 107 просмотров
0

ответов
HTML

Простой
Чему равна высота и ширина элемента .content в следующем коде?
- 1 подписчик
- 31 окт.
- 49 просмотров
0

ответов
CSS

Простой
Как сверстать нестандартный грид блок?
- 1 подписчик
- 30 окт.
- 126 просмотров
2

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

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend Developer

Wanted. • Санкт-Петербург

До 180 000 ₽

Drupal. Перенос сайта с домена на поддомен

05 нояб. 2024, в 16:31

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

Разработать макет для email рассылки

05 нояб. 2024, в 16:24

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

Виджет для OBS связанный с FaceIT

05 нояб. 2024, в 16:12

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

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?

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

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

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