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, mix-ins, funções e muitas outras técnicas que
não são possíveis no CSS. Usando pré-processadores CSS, você pode definir tudo uma vez e reutilizá-los repetidamente, resultando em CSS de fácil manutenção e extensível.

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

O Dreamweaver usa um compilador Ruby-Saas incorporado para compilar arquivos SCSS e LESS. O Dreamweaver também oferece suporte às 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 automaticamente esses arquivos em CSS usando a biblioteca JavaScript less.js, quando você carrega, edita ou salva esses arquivos.

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ê definir um site, poderá configurar as preferências do pré-processador CSS e também usar as estruturas Compass e Bourbon 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ê também pode personalizar a localização dos arquivos Sass e CSS, e opções de pré-processador específicas para cada site.

Continue lendo para saber como usar o Dreamweaver com pré-processadores 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 em que este CSS compilado está vinculado ou anexado.

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

• Instale o compilador apropriado se você deseja usar Compass ou Bourbon diretamente no Dreamweaver. Essa instalação é um processo de apenas um clique. Configure as configurações do pré-processador 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 determinados mixins ou funções da estrutura de criação forem removidos em revisões posteriores, você ainda poderá acessar os arquivos de pré-processador no seu local.

• Verifique se a compilação automática está ativada. Em seguida, pressione Salvar para atualizar os arquivos CSS.
• (Opcional) Veja as alterações sendo refletidas na visualização Live ou na visualização em tempo real em todas as páginas HTML onde o 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 Dreamweaver.
Seu fluxo de trabalho se assemelharia às seguintes etapas:

1. Baixar e instalar um compilador.
2. Defina um processo do Grunt (Gruntfile.js) para o compilador ler seu arquivo Sass/LESS/SCSS.
3. Configure outro processo do Grunt para compilar o arquivo em CSS, que você traria para o Dreamweaver.

Você deve executar essas etapas toda vez que fizer uma alteração no seu 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?

Este é 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 mais informações sobre como configurar um local do Dreamweaver, consulte Sobre locais do 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 mais informações, consulte Definir preferências do pré-processador CSS específicas do local.
3. Se você quiser usar estruturas específicas, como Compass ou Bourbon, é possível especificar as configurações para essas estruturas. Para 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 mais informações, consulte Compilar arquivos do pré-processador CSS.

Definir preferências dos pré-processadores de CSS

Você pode definir preferências específicas do site para pré-processadores de CSS usando a 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. Esta ação também oferece controle sobre o pré-processador CSS para cada local, sem ter que atualizar as preferências toda vez que você alterar de local.

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 para a 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 esta opção for deixada desmarcada, você terá que compilar manualmente os arquivos toda vez 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á desabilitada, todos os cálculos matemáticos do arquivo são processados.

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

.class {

propriedade: 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 assume que o usuário pretendia que um dos valores fosse um Valor e não uma unidade de comprimento.

Com unidades rígidas ativadas, o Dreamweaver assume que é um erro de cálculo e gera um erro.

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

Cria um mapa de origem. Mapa de origem é um arquivo que faz a ponte entre linguagens de alto nível como Sass e LESS, e a linguagem de baixo nível para a qual elas compilam, como CSS.

Opções de SASS/SCSS

Especifica o estilo do arquivo de saída CSS:

• Aninhado - Formata o CSS compilado na estrutura modular bem conhecida.
• Compacto - Formata o CSS compilado em uma estrutura compacta que ocupa menos espaço que Aninhado ou Expandido.
• Comprimido - Gera o CSS em uma estrutura plana.
• Expandido – gera o CSS de forma expandida, com cada propriedade e regra ocupando uma linha. As propriedades são recuadas dentro das 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 da qual foi gerado.

Cria um mapa de origem (arquivo que preenche a lacuna entre linguagens de alto nível como Sass e LESS, e a linguagem de baixo nível, para a qual compilam, como 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 que o Dreamweaver deve observar e acionar a compilação automática, quando um arquivo Sass/LESS no caminho é modificado usando um editor externo.

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

Saída de CSS

Especifique a localização do arquivo de saída CSS que é gerado.

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

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

Essa opção permite que você substitua uma parte do caminho usando as linhas De e Para. Por exemplo, ao definir De: scss e Para: css, o arquivo de saída é colocado dentro da mesma estrutura de árvore após substituir SCSS no caminho css.

Especifica a subpasta na raiz do site que precisa ser monitorada. Geralmente, esta 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. Dreamweaver aciona a compilação automática quando qualquer arquivo dentro da pasta é modificado externamente, ou de dentro do Dreamweaver.

Usar a estrutura Compass

Compass é uma estrutura de criação CSS de código aberto que permite criar folhas de estilo CSS3 usando Sass.

O Dreamweaver oferece suporte a Compass. Se você criar folhas de estilo usando Compass, pode compilar essas folhas de estilo e gerar arquivos CSS de dentro do Dreamweaver.

Usar a estrutura Bourbon

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

Os seguintes tipos de Bourbon são compatíveis:

• Bourbon - Uma biblioteca de mixins simples e leve para Sass
• Bourbon Neat - Uma estrutura de grade semântica leve para Sass e Bourbon
• Bourbon Bitters - Estrutura de estilos, variáveis e arquitetura para projetos Bourbon

Você pode importar a estrutura Bourbon adicionando uma das seguintes opções no código:

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

O Dreamweaver então 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, Bourbon é 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 um dos seus tipos:

Compilar arquivos do pré-processador de CSS

Você pode compilar arquivos de pré-processador CSS de uma das seguintes maneiras:

• Configurar a compilação automática de arquivos do pré-processador de CSS
• Compilar manualmente um arquivo de pré-processador 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 local) onde deseja salvar o CSS gerado.

Após uma compilação bem-sucedida, uma mensagem é exibida no painel Output (Window > Results > Output).O ícone de status na barra de status é exibido em verde. Para abrir o CSS compilado, clique duas vezes na mensagem de sucesso 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 não é compilado com sucesso até que todos os erros sejam 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 automaticamente na Visualização dinâmica.

Para obter mais informações sobre como vincular a página da Web à folha de estilos, consulte Link to an external CSS style sheet.

Compilar manualmente um arquivo do pré-processador de CSS

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

Nesses cenários, desative Enable Auto Compilation on File Save no painel CSS Preprocessors > General da caixa de diálogo Site Setup.

Para compilar manualmente um pré-processador CSS, clique com o botão direito no arquivo no painel Files e clique em Compile.

Também é possível clicar em Tools > Compile para compilar o arquivo atual.