Edite seus projetos CSS no navegador com CSS George
Você já quis fazer edições diretas no seu navegador sem voltar para seus arquivos CSS? Uma solução é o Chrome Developer Tools, mas alguns desenvolvedores prefira um fluxo de trabalho mais simples.
Isso e onde CSS George vem dentro Esta livre ferramenta de edição no navegador trabalho em cima do MENOS e é iniciado por um arquivo JavaScript simples.
A maioria dos desenvolvedores prefere editor baseado em navegador já que nem todo mundo usa o pré-compilador LESS. Mas CSS George funciona em um ambiente MENOS que pode ser instalado rapidamente via npm.
Se você tem npm instalado, então você pode executar este código simples para adicione os arquivos de origem para o seu projeto atual:
npm install --save-dev css-george
Ou você pode puxe o George.js Arquivo do GitHub, onde ele é hospedado ao lado de todos os outros arquivos de origem. Todo o projeto é gratuito e de código aberto para que você possa baixe uma cópia completa do GitHub se você não quiser usar o npm.
Com o .js arquivo adicionado ao cabeçalho do site, você pode começar executando funções de George diretamente do navegador. Para abra a janela do editor, Clique na tecla til que é acessível a partir de Shift + 'localizada no canto superior esquerdo da maioria dos teclados. UMA nova janela deve aparecer algo parecido com isto:
A partir desta tela, você pode editar as variáveis LESS usado para tudo, desde cores a tamanhos de fontes ou famílias de fontes.
É aqui que o plugin LESS torna-se uma necessidade porque você tem que dizer CSS George quais variáveis incluir. Uma vez que eles estão configurados, você pode apenas abra o editor do navegador CSS George e ir para a cidade.
Espero que seja óbvio que esta ferramenta não deveria ser incluído em tempo de execução. A menos que você queira especificamente deixar visitantes editar a cor e o estilo da página, o que geralmente não é uma boa ideia. Mas pelo teste local, CSS George é uma ferramenta rara que oferece utilidade para todos os desenvolvedores frontend.
Você pode veja ao vivo na página de demonstração CSS George, ou baixe uma cópia completa via npm ou a partir do repositório do GitHub.
