Usar pré-processadores de CSS no Dreamweaver

Saiba como você pode trabalhar com arquivos de pré-processador de CSS e compilá-los dentro do Dreamweaver.

CSS é uma linguagem que descreve o estilo de um documento HTML. Os pré-processadores de CSS compilam código escrito em uma linguagem pré-processada para o CSS, que é mais familiar. A linguagem pré-processada eleva o CSS a um nível mais próximo de uma linguagem de programação.

Especificamente, os pré-processadores permitem usar variáveis, combinações, funções e várias outras técnicas que
não são possíveis no CSS. Usando os pré-processadores de CSS, você pode definir todos os elementos uma única vez e reutilizá-los repetidamente, produzindo um código CSS extensível e passível de manutenção.

Com um pré-processador de CSS, também é possível produzir um código CSS limpo e de fácil manutenção. Se você estiver criando sites que façam referência a vários arquivos CSS, o uso de pré-processadores de CSS, como Sass ou Compass, pode reduzir as codificações manuais e as ações de copiar e colar.

O Dreamweaver usa um compilador Ruby-Saas incorporado para compilar arquivos SCSS e LESS. Ele também oferece suporte a estruturas Compass e Bourbon para compilar arquivos Sass. 

LESS é baseado em JavaScript, e Sass é baseado em Ruby. No entanto, você não precisa ter conhecimento sobre nenhuma dessas linguagens, nem saber usar a linha de comando para compilar arquivos como CSS. O Dreamweaver compila esses arquivos automaticamente em CSS usando a biblioteca JavaScript less.js quando você os carrega, edita ou salva.

Versões compatíveis:

  • Sass: 3.4.25
  • LESS: 2.7.2
  • Compass: 1.0.3
  • Bourbon: 4.2.6
  • Bourbon Neat: 1.7.3
  • Bourbon Bitters: 1.2.0

Como o Dreamweaver lida com os pré-processadores de CSS

A maneira como o Dreamweaver lida com pré-processadores de CSS varia de acordo com a definição ou não de um site. Se você tiver definido um site, configure as preferências do pré-processador de CSS e use as estruturas Compass e Bourbon diretamente no Dreamweaver.

Ao definir um site, você pode personalizar a maneira como os pré-processadores de CSS funcionam dentro do Dreamweaver pela definição de preferências específicas do site para o pré-processador de CSS. Definir as preferências específicas do site do pré-processador de CSS permite que você especifique opções de compilação baseadas no site. Você pode também personalizar o local de arquivos SASS e CSS e as opções do pré-processador específicas para cada site.

Leia mais para saber como usar o Dreamweaver com pré-processadores de CSS:

Dreamweaver 2017 e pré-processadores de CSS

No Dreamweaver 2017, o suporte a pré-processadores de CSS é integrado ao Dreamweaver. Ou seja, você pode trabalhar com arquivos Sass/LESS/SCSS diretamente no Dreamweaver. Basta pressionar Ctrl + S ou Cmd + S para compilar CSS automaticamente no Dreamweaver. Você também pode compilar manualmente arquivos CSS individuais usando Ferramentas > Compilar (ou F9). As alterações também são refletidas em todos os arquivos HTML abertos nos quais o CSS compilado está vinculado ou anexado.

Aqui está um fluxo de trabalho de alto nível das tarefas envolvidas ao usar pré-processadores de CSS:

  • Instale o compilador apropriado se você deseja usar Compass ou Bourbon diretamente no Dreamweaver. Essa instalação é um processo de apenas um clique. Defina as configurações do pré-processador de CSS.

Instale o compilador somente se você deseja uma cópia dos arquivos de estrutura (Bourbon) ou se deseja gerar arquivos scss padrão e arquivos de configuração baseados em Ruby (Compass). É recomendado manter uma cópia dos arquivos de estrutura. Se determinadas funções ou mixins da estrutura de criação forem removidos em revisões posteriores, você ainda poderá acessar os arquivos do pré-processador no seu site.

  • Verifique se a compilação automática está ativada. Em seguida, pressione Salvar para atualizar os arquivos CSS.
  • (Opcional) Use a Exibição dinâmica ou a Exibição em tempo real para ver as alterações refletidas em todas as páginas HTML nas quais o código CSS gerado é usado.

Dreamweaver 2015 e pré-processadores de CSS

No Dreamweaver 2015 e em versões anteriores da CC, era possível usar arquivos Sass, LESS e SCSS no Dreamweaver. No entanto, você precisava compilar esses arquivos fora do aplicativo do Dreamweaver.
O fluxo de trabalho continha as seguintes etapas:

  1. Baixar e instalar um compilador.
  2. Configurar uma tarefa grunt (Gruntfile.js) para o compilador ler o arquivo Sass/LESS/SCSS.
  3. Configurar outra tarefa grunt para compilar o arquivo CSS que seria importado no Dreamweaver posteriormente.

Essas etapas deveriam ser seguidas todas as vezes que você fizesse alterações no arquivo Sass/LESS/SCSS.

Observação:

Consulte este tutorial em vídeo para saber como aprimorar seu CSS usando pré-processadores.

Se você não tiver um site definido, poderá optar por compilar manualmente seus arquivos Sass e LESS. No entanto, não há suporte para as estruturas Compass e Bourbon.

Como usar pré-processadores de CSS no Dreamweaver?

Aqui está um fluxo de trabalho de alto nível das tarefas envolvidas ao usar pré-processadores de CSS:

  1. Defina um site no Dreamweaver. Verifique se o arquivo Sass ou LESS que você está tentando compilar está incluído na pasta raiz do site. Se você já definiu um site e verificou que o arquivo Sass/LESS está incluído na raiz do site, vá para a próxima etapa. Para obter mais informações sobre a configuração de um site no Dreamweaver, consulte Sobre sites no Dreamweaver.
  2. Defina as preferências para os pré-processadores de CSS (por exemplo, o local dos arquivos CSS gerados). Essas preferências são específicas do site. Para obter mais informações, consulte Definir as preferências específicas do site do pré-processador de CSS.
  3. Se você quiser usar estruturas específicas, como Compass ou Bourbon, é possível especificar as configurações para essas estruturas. Para obter mais informações, consulte: Usar a estrutura Compass ou Usar a estrutura Bourbon.
  4. Configure a compilação automática ou compile manualmente seus arquivos Sass e LESS. Para obter mais informações, consulte Compilar arquivos do pré-processador de CSS.

Definir preferências dos pré-processadores de CSS

Você pode definir preferências de pré-processadores de CSS específicas para um site na caixa de diálogo Sites > Gerenciar sites.

Configurar preferências de pré-processador de CSS específicas para um site permite que você gerencie pré-processadores por site. Essa ação também permite que você controle o pré-processador de CSS para cada site, sem precisar atualizar as preferências todas as vezes que mudar de site.

Observação:

As configurações nas subseções Geral e Origem e saída são aplicáveis para a estrutura Ruby-Saas por padrão. 

Para definir as preferências para Compass, você deve marcar a caixa de seleção Usar Compass na seção Compass

Definir configurações gerais do pré-processador de CSS

Você pode definir as seguintes configurações gerais do pré-processador de CSS na caixa de diálogo Sites > Gerenciar sites > Pré-processadores de CSS. Por padrão, essas configurações são aplicáveis à estrutura Saas.

Configurações gerais do pré-processador de CSS
Configurações gerais do pré-processador de CSS

Ativar compilação automática ao salvar arquivo

Marque esta caixa de seleção para ativar a compilação automática de pré-processadores de CSS. Se essa opção for selecionada, o Dreamweaver gerará automaticamente um arquivo CSS quando você salvar arquivos Sass, LESS ou SCSS. Se essa opção ficar desmarcada, você precisará compilar manualmente os arquivos sempre que fizer uma alteração.

Opções de LESS

Ativar matemática restrita

Processa somente os cálculos que estão entre parênteses. Por exemplo, (100px/25px) é processado com êxito, enquanto 20% + 10% (sem parênteses) não é processado. Quando esta opção está desativada, todos os cálculos no arquivo são processados.

Ativar unidades restritas

Sem essa opção, o LESS tenta adivinhar a unidade de saída ao processar os cálculos. Por exemplo:

.class {
  property: 1px * 2px;
}

Nesse caso, o resultado de um comprimento multiplicado por um comprimento é uma área, mas o CSS não oferece suporte à especificação de áreas. O Dreamweaver acha que o usuário utilizou um dos valores como um valor, não uma unidade de comprimento.

Se você ativar as unidades restritas, o Dreamweaver achará que houve uma falha nos cálculos e gerará um erro.

Reescrever URLs como URLs relativos

Essa opção permite reescrever URLs no arquivo CSS gerado para que os URLs sejam sempre relativos ao arquivo gerado. 

Gerar mapa de origem

Cria um mapa de origem. Mapa de origem é um arquivo que cria uma ponte entre a diferença entre linguagens de alto nível, como Sass e LESS, e a linguagem de baixo nível em que serão compiladas, como o CSS.

Opções de SASS/SCSS

Estilo do arquivo de saída

Especifica o estilo do arquivo de saída CSS:

  • Aninhado – formata o CSS compilado na estrutura modular conhecida.
  • Compacto – formata o CSS compilado em uma estrutura compacta que ocupa menos espaço do que o Aninhado ou Expandido.
  • Compactado – gera o CSS em uma estrutura simples.
  • Expandido – gera o CSS de forma expandida, com cada propriedade e regra ocupando uma linha. As propriedades são recuadas nas regras, mas as regras não são recuadas de forma alguma. 

Criar comentários de origem

Cria comentários no arquivo CSS de saída que mapeia o código CSS para a linha na qual ele foi gerado.

Gerar mapa de origem

Cria um mapa de origem, o arquivo que cria uma ponte entre a diferença entre linguagens de alto nível, como Sass e LESS, e a linguagem de baixo nível em que serão compiladas, como o CSS). 

Definir a origem CSS e as preferências de saída

Você pode definir o local em que os arquivos CSS gerados devem ser colocados e o caminho que o Dreamweaver deve monitorar para acionar a compilação automática quando um arquivo Sass/LESS no caminho for modificado usando um editor externo.

Observação:

Por padrão, as opções na seção Origem e saída são aplicáveis para Saas. Para ativar essas opções para Compass, você deve marcar a caixa de seleção Usar Compass na seção Compass .

Depois de modificar essas configurações e instalar o Compass, todas as configurações serão migradas para config.rb. Posteriormente, se desejar modificar as configurações, edite-as diretamente no arquivo config.rb. As alterações feitas na caixa de diálogo Configurações do site não afetarão a compilação.

Definir configurações de origem e saída para Compass
Definir configurações de origem e saída para Compass

Você pode definir as seguintes configurações de origem e de saída do pré-processador de CSS na caixa de diálogo Sites > Gerenciar sites.

Configurações de origem e de saída do pré-processador de CSS
Configurações de origem e de saída do pré-processador de CSS

Saída de CSS

Especifique o local do arquivo de saída CSS gerado.

Na mesma pasta dos arquivos de origem

Selecione essa opção se quiser que os arquivos CSS gerados sejam salvos na mesma pasta dos arquivos Sass e LESS de origem.

Definir pasta de saída

Selecione essa opção e especifique uma pasta onde você deseja salvar os arquivos CSS gerados.

Substituir o segmento do caminho de entrada

Essa opção permite que você substitua uma parte do caminho usando as linhas De e Para. Por exemplo, se você definir De: scss e Para: css, o arquivo de saída será colocado na mesma estrutura de árvore depois de substituir o SCSS no CSS do caminho.

Pasta de origem

Especifica a subpasta na raiz do site que precisa ser monitorada. Geralmente, essa subpasta contém todos os seus arquivos SCSS ou LESS. 

Se você ativou a compilação nas Configurações gerais, o Dreamweaver automaticamente aciona o pré-processador de CSS. O Dreamweaver aciona a compilação automática quando qualquer arquivo na pasta é modificado externamente ou diretamente no Dreamweaver.

Usar a estrutura Compass

Compass é um Authoring Framework de CSS de código aberto que permite que você crie folhas de estilo CSS3 usando o SASS.

O Dreamweaver oferece suporte a Compass. Se você criar folhas de estilo usando Compass, poderá compilar essas folhas e gerar arquivos CSS no Dreamweaver.

  1. Usar arquivos do Compass.

    Se você não tiver o Compass já instalado, poderá instalá-lo diretamente do Dreamweaver.

    Na caixa de diálogo Configuração de site, selecione Pré-processadores de CSS > Compass. Selecione Usar Compass e clique em Instalar arquivos.

    Instalar arquivos do Compass
    Instalar arquivos do Compass

    Todos os arquivos do Compass e o arquivo de configuração *.rb são instalados na pasta do site, e você pode exibi-los no painel Arquivos.

    Arquivos do Compass instalados
    Arquivos do Compass instalados

  2. Especificar um arquivo de configuração baseado em Ruby existente

    Se você já tiver o Compass instalado no seu computador e tiver o arquivo de configuração *.rb do Compass, na caixa de diálogo Configuração do site do Dreamweaver, especifique o caminho para o arquivo *.rb do Compass dentro da raiz do site atual.

    1. Na caixa de diálogo Configuração de site, selecione Pré-processadores de CSS > Compass.
    2. Marque a caixa de seleção Usar Compass.
    3. Clique em Especificar arquivo de configuração baseado em Ruby e navegue até o local do arquivo. 
    4. Clique em Salvar ao terminar.
    Especificar um arquivo de configuração baseado em Ruby existente
    Especificar um arquivo de configuração baseado em Ruby existente

    Observação:

    Esse arquivo deve estar localizado na pasta raiz do site.

  3. Especificar as opções de configuração manualmente

    Se você não tiver uma opção de configuração existente, poderá especificar as configurações manualmente.

    1. Na caixa de diálogo Configuração de site, selecione Pré-processadores de CSS > Compass.
    2. Marque a caixa de seleção Usar Compass.
    3. Clique em Especificar as opções de configuração manualmente. Selecione uma das opções de configuração a seguir e clique em Salvar.

    Os seguintes campos são preenchidos automaticamente, mas você pode alterá-los de acordo com as suas exigências:

    Observação:

    Todos os caminhos selecionados nessas opções devem estar dentro da raiz de site.

    Caminho do HTTP

    O caminho para o projeto quando executado dentro do servidor Web. O padrão é “/”.

    Diretório de imagens

    O diretório onde as imagens são mantidas. O diretório é relativo a project_path.

    Diretório de imagens geradas

    O diretório onde as imagens geradas são mantidas. Esse diretório é relativo a project_path, e seu padrão é o valor de images_dir.

    Diretório de fontes

    O diretório onde os arquivos fonte são mantidos.

    Ativos relativos

    Indica se as funções auxiliares do Compass devem gerar URLs relativos dos arquivos CSS gerados para os ativos ou URLs absolutos usando o caminho do http para esse tipo de ativo.

  4. Se você selecionou Ativar compilação automática ao salvar arquivo, na caixa de diálogo Sites > Gerenciar sites > Pré-processadores de CSS, o Dreamweaver gera um arquivo CSS sempre que você salvar alterações em arquivos SASS.

    Você também pode visualizar as alterações em tempo real na janela do navegador. Para obter mais informações sobre como visualizar as alterações em tempo real no navegador, consulte Visualização em tempo real.

    Se não quiser usar a compilação automática, você pode compilar manualmente um arquivo CSS seguindo um destes procedimentos:

    • Clique com o botão direito do mouse no arquivo Sass, LESS ou SCSS no painel Arquivos e clique em Compilar
    • Clique em Ferramentas > Compilar para compilar o arquivo atual.
  5. Depois, você pode anexar seu arquivo CSS compilado aos arquivos HTML em seu site. Para obter mais informações, consulte Vincular a uma folha de estilos CSS externa.

Usar a estrutura Bourbon

O Dreamweaver oferece suporte à família de produtos Bourbon. Se você criar folhas de estilo usando Bourbon, poderá compilar essas folhas e gerar arquivos CSS no Dreamweaver.

As seguintes opções do Bourbon são suportadas:

  • Bourbon – uma biblioteca de mesclagem simples e leve para SASS
  • Bourbon Neat – uma estrutura de grade semântica leve para SASS e Bourbon
  • Bourbon Bitters – estilos, variáveis e estrutura do andaime para projetos Bourbon

Você pode importar a estrutura do Bourbon adicionando um dos seguintes aspectos no seu código:

  • @import "bourbon"  - para importar Bourbon
  • @import “neat” – para importar Bourbon Neat
  • @import “base” – para importar Bourbon Bitter

O Dreamweaver usa a versão pré-empacotada do Bourbon ao compilar os arquivos do pré-processador.

Como alternativa, você pode instalar os arquivos de estrutura do Bourbon em seu site para que as futuras atualizações ao Dreamweaver não afetem os seus fluxos de trabalho da compilação. Os arquivos de estrutura Bourbon são copiados para o site, e o Bourbon passa a ser a estrutura usada quando a compilação é acionada para qualquer um dos arquivos que importa a estrutura.

Instalar arquivos Bourbon, Bourbon Neat ou Bourbon Bitters

Para instalar o Bourbon ou qualquer uma de suas opções:

  1. Na caixa de diálogo Configuração de site, selecione Pré-processadores de CSS > Bourbon, Bourbon Neat ou Bourbon Bitters.

  2. Clique em Instalar arquivos para instalar os arquivos no local da pasta raiz especificada dentro do seu site.

    Instalar arquivos do Bourbon
    Instalar arquivos do Bourbon

    Todos os arquivos do Bourbon são instalados dentro da pasta do site e você pode exibi-los no painel Arquivos.

    Arquivos do Bourbon instalados
    Arquivos do Bourbon instalados

    Se houver uma falha, os erros serão exibidos no painel Saída (Janela > Resultados > Saída), e a cor do ícone na barra de status passará a ser vermelha.

Compilar arquivos do pré-processador de CSS

Você pode compilar os arquivos do pré-processador de CSS de uma das seguintes formas:

Configurar a compilação automática de arquivos do pré-processador de CSS

Você pode configurar as opções do Dreamweaver para compilar automaticamente as alterações feitas em um arquivo Sass ou LESS em seu CSS equivalente. Você também pode especificar os locais (dentro da raiz do site) onde deseja salvar o CSS gerado.

  1. Na caixa de diálogo Configuração de site, selecione Pré-processadores de CSS > Geral > Ativar compilação automática ao salvar arquivo.

    Ativar compilação automática
    Ativar compilação automática

  2. Clique em Pré-processadores de CSS > Origem e saída.

  3. Especifique os locais nos quais deseja salvar os arquivos CSS gerados. Você pode escolher uma das seguintes opções:

    Na mesma pasta dos arquivos de origem

    Selecione essa opção se quiser que os arquivos CSS gerados sejam salvos na mesma pasta dos arquivos Sass e LESS de origem.

    Definir pasta de saída

    Selecione essa opção e especifique a pasta na qual você deseja salvar os arquivos CSS gerados.

    Substituir o segmento do caminho de entrada

    Essa opção permite que você substitua uma parte do caminho usando as linhas De e Para.

  4. Especifique a pasta que contém os arquivos Sass ou LESS que o Dreamweaver precisa monitorar. 

    Se você fizer alterações em qualquer arquivo dentro dessa pasta monitorada, o Dreamweaver compilará automaticamente os arquivos depois que você os salvar. 

    Configurações de origem e de saída do pré-processador de CSS
    Configurações de origem e de saída do pré-processador de CSS

    Observação:

    O Dreamweaver monitorará e compilará esses arquivos mesmo se você fizer alterações fora do Dreamweaver (usando um editor de texto, por exemplo).

Após uma compilação bem-sucedida, uma mensagem é exibida no painel Saída (Janela > Resultados > Saída), e o ícone de status na barra de status é exibido na cor verde. Para abrir o CSS compilado, clique duas vezes na mensagem de êxito no painel.

Se forem encontrados erros, o código CSS não será compilado com êxito. O ícone de status será exibido em vermelho, e o painel Saída relacionará todos os erros e avisos. Você pode clicar duas vezes em uma mensagem de erro no painel para ir rapidamente para a linha que contém o erro no código. O arquivo CSS só será compilado com êxito quando todos os erros tiverem sido resolvidos.

Observação:

O painel Saída fica na parte inferior da área de trabalho. Se o painel estiver fechado, clique no painel Janela > Saída.

Você também pode mostrar e ocultar o painel Saída usando o ícone de status quando ele está vermelho.

Depois de obter o arquivo CSS compilado, você pode vincular sua página da Web à folha de estilo. Quando você faz alterações em pré-processadores de CSS, os arquivos CSS compilados correspondentes são atualizados automaticamente. A página da Web também é atualizada na Visualização dinâmica.

Para obter mais informações sobre como vincular sua página da Web à folha de estilo, consulte Vincular a uma folha de estilo CSS externa.

Compilar manualmente um arquivo do pré-processador de CSS

Em algumas situações (por exemplo, se você não tiver definido um site do Dreamweaver), convém compilar manualmente um arquivo do pré-processador de CSS.

Nesses casos, desative Ativar compilação automática ao salvar arquivo no painel Pré-processadores de CSS > Geral da caixa de diálogo Configuração de site.

Para compilar um pré-processador de CSS manualmente, clique com o botão direito do mouse no arquivo no painel Arquivos e clique em Compilar.

Compilar manualmente arquivos do pré-processador de CSS no painel Arquivos
Compilar manualmente arquivos do pré-processador de CSS no painel Arquivos

Você também pode clicar em Ferramentas > Compilar para compilar o arquivo atual.

Logotipo da Adobe

Fazer logon em sua conta