Usar pré-processadores de CSS no 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

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.

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.

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.

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

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.

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

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.

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

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

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. 

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

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.

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.

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

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

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.

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.

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:

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
• Compilar manualmente um arquivo do pré-processador de CSS

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.

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.

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.

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