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

Os pré-processadores de CSS compilam código escrito em uma linguagem pré-processada para a CSS, que é mais familiar. A linguagem pré-processada eleva a 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 na CSS. Usando os pré-processadores de CSS, você pode definir todos os elementos uma única vez e reutilizá-los repetidamente, produzindo uma CSS extensível e passível de manutenção para a qual é possível definir um tema.

O Dreamweaver é compatível com os pré-processadores de CSS mais populares: SASS e LESS, e o Dreamweaver também é compatível com as estruturas Compass e Bourbon para compilar arquivos SASS.

LESS é baseado em JavaScript e SASS é baseado em Ruby, mas você não precisa saber nada sobre essas linguagens nem usar a linha de comando para compilar os arquivos em CSS. O Dreamweaver compila esses arquivos automaticamente em CSS usando a biblioteca JavaScript less.js quando você os carrega, edita ou salva.

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

A maneira como o Dreamweaver lida com pré-processadores de CSS varia dependendo se você tiver definido ou não um site. A Adobe recomenda definir um site, porque com um site você tem a liberdade de configurar preferências do pré-processador de CSS e também de utilizar as estruturas Compass e Bourbon dentro do Dreamweaver. 

Se você tiver um site definido, poderá personalizar a maneira como os pré-processadores de CSS funcionam dentro do Dreamweaver pela definição de preferências específicas do site do 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.

Quando você define um site, o Dreamweaver também permite o uso das estruturas SASS: Compass, Bourbon, Bourbon Neat e Bourbon Bitters dentro do Dreamweaver.

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 e garanta que o arquivo SASS ou LESS que você está tentando compilar esteja incluído na pasta raiz do site. Se você já definiu um site e 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. Defina 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 específicas do site para pré-processadores de CSS na caixa de diálogo Sites > Gerenciar sites.

Manter as preferências do pré-processador de CSS específicas do site permite gerenciar seus pré-processadores de CSS com base no site, o que dá a você controle sobre cada pré-processador de CSS do site, sem ter que atualizar as preferências sempre que você mudar de site.

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. 

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 você selecionar essa opção, o Dreamweaver gera automaticamente um arquivo CSS quando você salva 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

Gera uma unidade sugerida na CSS após o cálculo. Por exemplo, 5px * 2px é compilado como 10px e não 10px2. 

Quando esta opção está desativada, o LESS tenta adivinhar a unidade de saída ao processar os cálculos.

Neste exemplo, o CSS é gerado desta forma:

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

Neste caso, a adivinhação não está correta – o resultado de um comprimento multiplicado por um comprimento é uma área, mas o CSS não oferece suporte à especificação de áreas. Aqui, pressupõe-se que o usuário queria que um dos valores fosse um valor, não uma unidade de comprimento, e o resultado no Dreamweaver foi 10px.

Com as unidades restritas, o que foi gerado pelo CSS é considerado um erro.

Recodificar URLs como URLs relativos

Reescreve os URLs em arquivos importados de modo que sejam sempre relativos ao arquivo base importado. Se um arquivo LESS importar outro arquivo LESS, que por sua vez se refere a uma imagem, o URL relativo será mostrado no CSS compilado.

Gerar mapa de origem

Cria um mapa de origem (o arquivo que cria uma ponte sobre a diferença entre linguagens de alto nível, como SASS e LESS, e a linguagem de baixo nível, a qual elas 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 sobre a diferença entre linguagens de alto nível, como SASS e LESS, e a linguagem de baixo nível, a qual elas serão compiladas, como o CSS). 

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

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

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

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.

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 esta opção e especifique uma pasta onde você deseja salvar os arquivos CSS gerados.

Substituir o segmento do caminho de entrada

Esta opção permite que você substitua uma parte do caminho usando as sequências de caracteres 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

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

Se você tiver ativado a compilação em Configurações gerais, o Dreamweaver acionará automaticamente o pré-processador de CSS quando qualquer arquivo dentro dessa pasta for modificado externamente ou dentro do 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. Portanto, se você criar folhas de estilo usando Compass, poderá compilar essas folhas e gerar arquivos CSS no Dreamweaver.

  1. Instalar arquivos do Compass.

    Se você não tiver o Compass já instalado, pode instalá-lo de dentro 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 Compass em suas máquinas e tiver o arquivo de configuração *.rb do Compass, na caixa de diálogo de configuração do site do Dreamweaver, especifique o caminho até 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. Clique em Salvar quando estiver concluído.
    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 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. É relativo ao project_path.

    Diretório de imagens geradas

    O diretório onde as imagens geradas são mantidas. É relativo ao project_path. O padrão é o valor do 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 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. Portanto, se você criar folhas de estilo usando o 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 de Bourbon são copiados no seu site, e esta é a estrutura usada quando a compilação é acionada para alguns dos arquivos importados na 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 armazenar 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. Na caixa de diálogo Configuração de site, selecione Pré-processadores de CSS > Origem e saída.

  3. Na caixa de diálogo Origem e saída, especifique os locais onde 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 esta opção e especifique uma pasta onde você deseja salvar os arquivos CSS gerados.

    Substituir o segmento do caminho de entrada

    Esta opção permite que você substitua uma parte do caminho usando as sequências de caracteres 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 a alguns dos arquivos dentro dessa pasta monitorada, o Dreamweaver compilará automaticamente os arquivos depois que 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 (Janelas > Resultados > Saída), e o ícone de status na barra de status é exibido na cor verde <icon>. Para abrir o CSS compilado, você pode clicar duas vezes na mensagem de êxito no painel.

Se forem encontrados erros, o CSS não será compilado com êxito. O ícone de status será exibido em vermelho <ícone> 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 geralmente fica localizado na parte inferior da área de trabalho. Se o painel estiver fechado, abra-o usando Janela > Painel Saída.

Também é possível alternar entre mostrar e ocultar o painel Saída usando o ícone de status quando ele estiver 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 criar 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 do 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.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online