Habilitar mapas de origem CSS no Compass

Eu estava conversando com um colega de trabalho esta manhã sobre mapas de origem CSS. Eu nunca consegui fazer o Compass criar mapas de origem para mim. Tentei novamente esta manhã e finalmente está funcionando. Não consigo encontrar a documentação para isso em nenhum lugar, então eu só queria compartilhar o que fiz. Na verdade, é muito simples.

Caso você não saiba o que é um mapa de origem, é um arquivo que permite ao navegador mostrar de onde veio o CSS compilado originalmente. Ele mapeia o arquivo CSS compilado para onde a regra CSS foi originalmente declarada no arquivo SASS. Agora, quando você inspeciona um elemento, você vê o CSS compilado e sua localização no arquivo compilado.

Cen√°rio

Com um mapa de origem CSS, voc√™ v√™ de onde vem o c√≥digo. Isso significa que voc√™ n√£o precisa mais abrir o arquivo CSS compilado para definir o n√ļmero da linha de onde veio o CSS. Aqui est√° o mesmo elemento, mas com um mapa de origem sendo usado.

Cen√°rio

Consegui execut√°-lo usando o Sass 3.3.12 (Maptastic Maple) e o Compass 1.0.0.alpha.21. Os tutoriais que li sobre como habilitar mapas de origem no Compass mencionam que voc√™ precisa adicionar ao seu arquivo config.rb. Isso nunca funcionou para mim. Em vez disso, adicionei o seguinte par√Ęmetro ,, ao meu arquivo config.rb. O Compass agora cria mapas de origem conforme o esperado.sass_options = {:sourcemap => true}sourcemap = true

Aqui est√£o os par√Ęmetros do meu arquivo config.rb. Voc√™ pode ver a op√ß√£o de mapas de origem no final da lista.

http_path = "/"
css_dir
= "css"
sass_dir
= "css/sass"
images_dir
= "images"
javascripts_dir
= "js"
sourcemap
= true

Habilitando Mapas de Origem

Agora que você tem o Compass gerando mapas de origem para seus arquivos SASS, é necessário habilitar seu navegador para ler os mapas de origem. Cada navegador é diferente em como habilitar mapas de origem. O Chrome e o Firefox, é claro, suportam mapas de origem, mas apenas a versão mais recente das ferramentas de desenvolvimento do IE11 suportam mapas de origem.

cromada

Para o Chrome, abra as ferramentas de desenvolvimento e clique no √≠cone de engrenagem para abrir as configura√ß√Ķes das ferramentas. H√° uma se√ß√£o intitulada Fontes. Voc√™ ver√° a op√ß√£o “Habilitar mapas de origem CSS”. Apenas marque essa caixa e, se existir um mapa de origem, voc√™ come√ßar√° a ver seus arquivos scss em suas ferramentas de desenvolvimento.
Cen√°rio

Raposa de fogo

No Firefox √© um pouco diferente. Ao abrir as ferramentas de desenvolvimento nativas do Firefox, clique no √≠cone de engrenagem para abrir as op√ß√Ķes das ferramentas de desenvolvimento. Voc√™ encontrar√° a op√ß√£o de mapa de origem na se√ß√£o intitulada Editor de estilo.

Cen√°rio

Internet Explorer

N√£o tenho certeza se o IE11 oferece suporte a mapas de origem CSS. A vers√£o mais recente do IE11, que √© a vers√£o da atualiza√ß√£o do Windows 8.1, oferece suporte a mapas de origem Javascript. Voc√™ pode habilitar mapas de origem seguindo estas instru√ß√Ķes

** Atualização **

A sourcemaps = trueopção foi introduzida no Compass v1.0.0.alpha.16 . A documentação atual não menciona a nova opção. Você deve olhar a versão beta da documentação, http://beta.compass-style.org/help/documentation/configuration-reference/