Как из верстки вытащить переменные в файл css?

Question

[vtaeke]

Как из верстки вытащить переменные в файл css? С помощью препроцессора?
Допустим, есть блок

<div class="pagination_view" >
                        <div id="loginHeader">Параметры входа</div>
                        <div id="credentialList" class="form-group">

Чтобы в файле css, появились loginHeader, credentialList и тд.
Давно как-то делал это, когда в универе учился, сейчас уже не помню.

Comments

[Rst0]

в виде списка с {} в конце?

Answer 1

[Роман]

Используйте расширение для редактора - eCSStractor.
Такое есть практически под любой редактор.
К примеру: eCSStractor for VSCode.

Answer 2

[Rst0]

вставьте в конец файла перед закрывающим тегом body или в консоль
скрипт создаст список всех классов и ID на странице и выведет текстовое поле - копируйте и вставляйте.
тегов div span и т.д. в списке не будет - сами справитесь)

const textarea = document.createElement('TEXTAREA');
 document.querySelector('body').appendChild(textarea);
 textarea.innerHTML = '';
 const el = document.querySelectorAll('*');
 var css_list = '';
 for(var i = 0; i < el.length; i++){
	if(el[i].id!==''){
               textarea.innerHTML += '#'+el[i].id+'{}\n';
	}
	if(el[i].classList.length > 0){
 	       for(var c = 0; c < el[i].classList.length; c++){
                       textarea.innerHTML += '.'+el[i].classList[c]+'{}\n';
                             console.log(el[i].classList[c]);
                       }
                }
	}