Editor de Estilos

O Editor de Estilos permite que você:

• veja e edite todas as folhas de estilo associadas com a página
• crie novas folhas de estilo e as aplique na página
• importe folhas de estilo existentes e as aplique na página

Para abrir o Editor de Estilos escolha a opção "Editar Estilos" no menu "Desenvolvedor Web" (que é um submenu do menu "Ferramentas" no Mac) (which is a submenu in the "Tools" menu on the Mac). A Caixa de Ferramentas aparecerá na parte de baixo da janela do navegador, com o Editor de Estilos ativado:

Na esquerda (ou no topo, se sua janela estiver muito estreita) há uma lista com todas as folhas de estilo usadas no documento, e na direita (ou em baixo se a janela estiver estreita) está a fonte para a folha de estilo que você selecionou no painel de folhas de estilo.

O painel de folha de estilos

O painel de folha de estilos, na esquerda, lista todas as folhas de estilo que estão sendo usadas no documento atual. Você pode rapidamente trocar o uso de determinada folha de estilos clicando no olho que fica a direita do nome da folha de estilos. Você pode salvar qualquer mudança que fez na folha de estilos no seu computador local clicando no botão Salvar que está no canto inferior direito de cada lista de folha de estilos.

O painel editor

Na direita fica o painel editor. Aqui é onde o código da folha de estilo seleciona fica disponível para você ler e editar. Quaisquer alterações que você faz são aplicadas na página em tempo real. Isso faz com que fique realmente fácil experimentar, revisar e testar mudanças na aparença de sua página. Uma vez que você estiver satisfeito com suas mudanças, você pode salver uma cópia localmente clicando no botão Salvar que fica no painel de folha de estilos.

O editor provê números de linha e marcação de sintaxe para ajudar a ficar fácil ler seu CSS. Veja Utilizando o Editor de Fonte para documentação do editor em si, incluindo atalhos de teclado úteis.

O Editor de Estilos automaticamente desminimiza folhas de estilo que ele detectar sem afetar o original. Isso faz com que fique muito mais fácil trabalhar em páginas que foram otimizadas.

Autocompletar

Do Firefox 29 em diante, o Editor de Estilos suporta o autocompletar. Apenas começa a digitar e ele oferecerá uma lista de sugestões.

Você pode desligar isso em  Configurações do Editor de Estilos.

Criando e importando folhas de estilos

Você pode cirar uma nova folha de estilos clicando no botão Novo na barra de ferramentas. Então você pode começar a inserir CSS em um novo editor e ver como os novos estilos são aplicados em tempo real assim como quaisquer mudanças em outras folhas de estilo.

Você pode carregar um estilo do disco e aplicá-lo na página clicando no botão Importar.

Suporte ao mapa de fonte

Desenvolvedores web frequentemente criam arquivos CSS usando pré-processadores como Sass, Less, ou Stylus. Essas ferramentas geram CSS de uma sintaxe mais rica e expressiva. Se você fizer isso,  ser capaz de ver e editar CSS gerado não é útil, porque o código que você mantém é a sintaxe do pré-processador, não o CSS gerado. Então você precisaria editar o CSS gerado e então manualmente descobrir como reaplicar na fonte original.

Mapas de fonte viabilizam as ferramentas para mapear o CSS gerado agté sua fonte original, então mostrá-la e permitir que você edite os arquivos na fonte original. Do Firefox 29 em diante o Editor de Estilos compreende mapas de fonte de CSS.

Isso significa que se você usa, por exemplo, Sass, então o editor irá mostrá-lo e permitir que você edite arquivos Sass, ao invés do CSS gerado por ele:

Para isso funcionar, você deve:

• usar um pré-processador de CSS que compreenda o Revisão 3 da Proposta do Mapa de fonte. Atualmente isso significa o urrently this means the Pré-release da versão 3.3.0 do Sass, ou a  versão 1.5.0 do Less. Outros pré-processadores estão ativamente trabalhando em adicionar suporte ou considerando isso.
• instruir o pré-processador a gerar um mapa de fonte, por exemplo passando o  argumento --sourcemap para a ferramenta de linha de comando do Sass.
• usar Firefox 29 ou superior.

Vendo as fontes originais

Agora, se você marcar "Mostrar fontes originais"  nas Configurações do Editor de Estilos, os links próximos as regras de CSS em ver Regras irão levar as fontes originais no Editor de Estilos.

Editando fontes originais

Você pode também editar fontes originais no Editor de Estilos e ver os resultas aplicados na página imediatamente. Para isso funcionar há dois passos extra:

Primeiro, configure seu pré-processador para que ele direcione a fonte original e automaticamente gere outro CSS quando a fonte original mudar. Com o Sass você pode fazer isso simplesmente passando a opção --watch:

sass index.scss:index.css --sourcemap --watch

Em seguida, salve a fonte original no Editor de Estilos clicando no botão Salvar, perto do arquivo para então salvar o arquivo original.

Agora quando você faz mudanças no arquivo fonte no Editor de Estilos é gerado um novo CSS você pode ver as mudanças em tempo real.