Você pode usar injeção de estilo ao desenvolver aplicativos sinatra, permitindo que você veja as alterações de css / sass sem atualizar seu navegador.

Isso é especialmente útil ao fazer um design responsivo, uma vez que você pode ter janelas de navegador de tamanhos diferentes abertas ao mesmo tempo e ver como cada mudança afeta uma janela de visualização específica.

Preparação

1. Clone e agrupe um aplicativo de amostra pré-configurado
2. Instale a extensão do navegador livereload apropriada – há uma para Chrome, Firefox e Safari
3. No diretório public / css, execute sass --watch style.scss:style.css(este comando pode mudar à medida que mais arquivos sass são adicionados ao projeto)
4. No diretório raiz do projeto, execute guard
5. No diretório raiz do projeto, execute rackup
6. Você Terminou! Agora, sempre que você salvar uma alteração style.scss, o style.cssarquivo será atualizado e seu navegador mostrará as alterações sem recarregar a página.

Há uma versão mais detalhada deste artigo no leia-me do projeto . Agradecimentos especiais ao excelente post de Matt Brictson no blog , sem o qual esta dica não seria possível.