Carregamento autom√°tico de Sass em Sinatra

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.