Uncategorized

Gerador de Css – Script que gera css em cascata

Navegando pela internet achei um script que poupa um bom tempo na criação dos arquivos de estilos.

É uma função jquery a ser inserida no console do Chrome ou firebug, que gerará em cascata as linhas de css. Poupa um bom tempo, em especial, se você gera primeiro o html e depois o css.

  1. Certifique-se que o jquery está linkado na sua página;
  2. No Chrome acesse: Menu > Ferramentas > Console Javascript.
  3. Execute o código a seguir (representado na imagem abaixo):
function copiarCSS(){var aa=prompt('A partir de qual setor o css deve ser criado?\nEx.: body ou .header\n\nFrom which sector the css should be created?\nEg: body or .header');if($(aa).size()==0){if(confirm('Setor não encontrado\nTentar novamente?\n\nSector not found\nTentar again?')){copiarCSS();} return;} var ba="";function entrar(aa){aa=$(aa)[0];var ca="";var da=$(aa).parents();for(i=da.size()-1;i>=0;i--){ca+=da[i].tagName.toLowerCase()+(da[i].id?'#'+da[i].id:'')+(da[i].classList.length>0?"."+da[i].classList[0]:'')+" ";}if(aa.tagName=='SCRIPT'||aa.tagName=='STYLE'||aa.tagName=='HEAD'||aa.tagName=='META'||aa.tagName=='LINK'||aa.tagName=='TITLE')return;ca+=aa.tagName.toLowerCase()+(aa.id?"#"+aa.id:"")+(aa.classList.length>0?"."+aa.classList[0]:"")+" {}";if(ba.indexOf(ca)==-1)ba+=ca+";";if($(aa).children().size()>0){$($(aa).children().get()).each(function(){entrar(this);});}};entrar(aa);ba=ba.split(';');saida="";for(i=0;i<ba.length;i++){saida+=(ba[i]+'\n');}console.log(saida);alert(saida);}copiarCSS();

imagem

 

4. Insira a classe que você deseja gerar (pode ser body):

imagem2

O resultado final será:

imagem3

 

 

Basta copiar e colar em seu editor. Ele gera um pouquinho de código desnecessário, mas pode facilmente ser editado e sem dúvida ganha um bom tempo.
A função é foi feita por Frederico de Castro aqui.

Anúncios
Padrão

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s