Wellington Almeida - Análise de desenvolvimento CSS com pré-processadores LESS e SASS

(1)

Análise de desenvolvimento CSS com pré-processadores

LESS e SASS

Wellington Euripedes Godoi Almeida, Marcos Alberto Lopes da Silva

Instituto de Informática – Centro Universitário do Triângulo [UNITRI] Caixa Postal 309 – 38.411-106 – Uberlândia – MG – Brasil

[email protected], [email protected]

Resumo. As páginas Web necessitam cada vez mais se adaptarem ao avanço tecnológico, com recursos capazes de garantir um site competente; também precisam ter uma estrutura amigável para os desenvolvedores sem se perder das exigências dos padrões de formatação no código. Existem algumas limitações ao se desenvolver em CSS (Cascading Style Sheets), para isso foram criados os pré-processadores com o objetivo de estender funções e recursos antes não disponíveis em CSS. Este artigo tem como objetivo confrontar as principais diferenças dos pré-processadores LESS (Leaner CSS) e SASS (Syntactically Awesome Style Sheets) demonstrando quais as principais vantagens e desvantagens de cada um ao se desenvolver.

1. Introdução

CSS (Cascading Style Sheets) é uma linguagem que define o estilo da página Web para ser apresentado ao usuário através de documentos utilizando uma linguagem de marcação; as CSS foram desenvolvidas para ter a função de apresentação de um documento como cores de fontes, tamanhos de textos, posicionamento e todo aspecto visual. Tim Berners-Lee ao desenvolver o navegador Nexus escreveu de forma limitada algumas funcionalidades intrínsecas que controlavam a apresentação dos documentos. Os navegadores que surgiram nos anos de 1992 e 1993 vinham com funcionalidades de estilização padrão no caso do autor do documento não tenha definido nenhuma regra de estilo. Em setembro de 1994 surgiu a primeira proposta para implementação das CSS, e em dezembro de 1996 as CSS1 foram lançadas como uma recomendação oficial do W3C [Silva, 2008].

Desde essa época então uma das maiores evoluções para as CSS foram os pré-processadores, que tem a função de compilar o código através de seus recursos facilitadores escrito em uma linguagem pré-processada para a CSS, sendo mais familiar e elevando a CSS a um nível mais próximo de uma linguagem de programação, sendo assim permitido usar variáveis e várias funções e técnicas que não são possíveis na CSS produzindo uma CSS extensível e passível de manutenção [ADOBE, 2015].

Este presente artigo irá abordar as definições de SASS e LESS apresentando as funcionalidades desses pré-processadores analisando suas evoluções, aplicabilidade, funções e melhorias para o desenvolvimento em CSS; no estudo de caso será desenvolvido um web site onde será confrontada essas metodologias que serão avaliadas segundo análises e resultados obtidos através do desenvolvimento do site; demonstrando o que os pré-processadores trazem de vantagens para se desenvolver em CSS, através do levantamento feito pelo autor.

(2)

2. CSS

Conforme o HTML (Hyper Text Markup Language) evoluiu e popularizou foi incluído maneiras e qualidades de controlar algumas aparências para o documento, deixando muito complexo e mais difícil para manter e entender; o seu propósito inicial é a lógica estrutural, ignorando a necessidade da lógica visual. Em 1995 Hakon Wium Lie e Bert Bos apresentaram a proposta do CSS que foi apoiada pela W3C, com o propósito de deixar o HTML somente para estruturar o web site e a tarefa de apresentação com o CSS em arquivo separado .css [Silva, 2008].

Cascata significa que é definida uma folha inicial para controle total da apresentação referenciando várias outras folhas de estilo através do elemento link para indicar a localização das outras folhas. CSS ou folhas de estilo em cascata é um mecanismo que formata as informações HTML, para adicionar estilos aos documentos web e todas as funções de apresentação de um documento HTML/XML com a finalidade de fornecer apresentação dos elementos como: cores, características das fontes, posicionamento, margens e toda estrutura visual ao navegador [Silva, 2008].

A sintaxe do CSS é uma declaração que contém regras e define como será aplicado o estilo a um ou mais elementos HTML, é formada por duas partes: seletor e a declaração; onde o seletor é o alvo da CSS onde a regra será validada; e a declaração determina os parâmetros de estilização. Propriedade é o atributo do elemento HTML ao qual a característica do seletor é estilizada, e o valor é a qualificação da propriedade referente à característica específica a ser assumida pela propriedade; como demonstra a figura 1 [Silva, 2008].

Figura 1. Sintaxe CSS – [Silva, 2012].

A primeira versão das folhas de estilos em cascata CSS especificadas pelos padrões da W3C (World Wide Web) foi a CSS nível 1, lançada em 17 de dezembro de 1996 com apenas um documento contendo cinco apêndices e dividido em nove seções [Silva, 2008].

Em 12 de maio de 1998, foi lançada a versão de nível 2, contendo 19 seções e 8 apêndices, que teve uma revisão em 02 de agosto de 2002 evoluindo para o nível 2.1 contendo 18 seções e 7 apêndices, e passou a ser a recomendação padrão do W3C em 7 de julho de 2011 [Silva, 2012].

O modelo de desenvolvimento das especificações para as CSS3 foi alterado e modificado dos modelos e padrões das versões anteriores, o que antes eram desenvolvidas em um único documento passou a ser desenvolvida em módulos, onde cada funcionalidade passou para uma especificação e atualização independente dos outros módulos como, por exemplo: as especificações para seletores constituem um módulo (bordas, fundos) e outro modulo diferente contendo as cores [Silva, 2012].

A maior vantagem da modularização é que se pode desenvolver um módulo sem depender do desenvolvimento de outros módulos diferentes [Silva, 2012].

(3)

Eric Meyer publicou uma matéria em abril de 2007, onde propunha uma solução que consistia em criar uma folha de estilos padrão, pois segundo Eric Meyer os navegadores Web não tinham padronização de valores iniciais para as propriedades de um determinado layout CSS. Eric Meyer propôs uma solução de criar uma folha de estilo, padronizando os valores inicias denominada CSS Reset que tem a função de limpar todas as configurações das propriedades do layout CSS [Silva, 2012].

Em CSS podem-se vincular folhas de estilos no documento, nos quais são escritas no próprio HTML, onde serão vinculados arquivos externos apenas informando o endereço de destino através de links [Silva, 2008].

Estilo inline é quando os estilos CSS são aplicados diretamente dentro da tag de abertura de um elemento HTML, com o uso do atributo style, sendo indicado apenas quando não houver mudanças de estilos; esse método possui desvantagens, pois o código não é reaproveitado e nem usado em outras páginas Web. A figura 2 demonstra como é declarado o estilo inline no elemento HTML [Scheidt, 2015].

1

2 <p style="width: 200px; color: white; background: red; font-size: 1.8em;"> </p>

Figura 2. Estilos inline – [Silva, 2012].

Estilo incorporado é um dos métodos pelo qual atribui as folhas estilos ao documento HTML; para sua utilização, a folha de estilo é declarada dentro da seção head do elemento HTML, utilizando o elemento style; sua vantagem é que a folha de estilo pode ser encontrada com maior facilidade, mas só terá efeito sobre a mesma página não podendo ser reaproveitada em outras páginas; a figura 3 demonstra como é declarado o estilo incorporado [Scheidt, 2015].

1 2 3 4 5 <head>

body { margin: 0; padding: 0; font-size: 80%; color: black; background: white; } </style>

</head>

Figura 3. Estilo incorporado – [Silva, 2012].

Estilo externo os códigos CSS ficam em um arquivo externo e podem ser anexadas a um ou vários documentos HTML, sendo mais versátil e mais fácil de manutenção; um arquivo CSS contém todo estilo que muda e controla a aparência das páginas e podem ser reutilizadas em outros arquivos; o estilo externo possui duas formas de ser anexados no elemento HTML: o elemento link que possui a finalidade de vincular outros arquivos ao documento no qual ele esta contido, sendo declarado dentro da seção head, como demonstrado na figura 4, e a folha de estilo importada, onde pode ser vinculada uma folha de estilo externa através da diretiva @import dentro do elemento style, proporcionando o controle das outras folhas de estilos apenas modificando um único CSS; a figura 5 demonstra como é aplicada a diretiva @import [Silva, 2012]. 1 2 3 4 <head>

</head>

(4)

1 2 3 4 5 <head> <style type="text/css">

@import url("estilos.css") screen, projection; </style>

</head>

Figura 5. Diretiva import – [Silva, 2012].

2. 1. Pré-processadores

Um computador só compreende comandos baseados em linguagem binária chamada de baixo nível e necessita-se de um compilador que é um programa que tem a função de traduzir um conjunto de códigos fonte, escritos em uma linguagem de programação de alto nível para uma linguagem de mais baixo nível para ser interpretado pelo computador obtendo a vantagem de execução mais rápida pelo programa, como demonstrado na figura 6 [Sebesta, 2009].

Figura 6. Compilador.

Existem dois tipos de tradutores os interpretadores e compiladores, onde o interpretador executa as linguagens de alto nível convertendo em código executável diretamente obtendo a vantagem de não traduzir instruções que não serão executadas, porém perdem tempo, pois lê linha a linha e converte em código objeto conforme é executado; enquanto um compilador produz a partir de um programa de entrada, outro programa equivalente ao original, porém em uma linguagem executável [Sebesta, 2009].

A compilação pode ser dividida em fases diferentes sendo elas: [Sebesta, 2009].

 Analisador léxico: ignora os comentários e agrupa caracteres do programa fonte em unidades léxicas separando cada símbolo que tenha significado para a linguagem, como identificadores, palavras especiais, operadores e símbolos de pontuação.

 Analisador sintático: faz uma varredura e analisa os símbolos que constituem estruturas sintáticas existentes no programa fonte, determinando se formam um programa valido ou não, e as utiliza para construir estruturas hierárquicas denominadas árvores de análise sintática representando a estrutura sintática do programa.

 Analisador semântico: verifica se os aspectos semânticos estão corretos e se fazem sentido se existe compatibilidade entre operando e operadores em expressões.

Código Fonte

(5)

 Gerador de código: produz um programa intermediário com uma linguagem diferente entre o programa fonte e o de saída gerando uma sequência de código objeto, também responsável pela reserva de memória para dados e variáveis. Nesse contexto, “um pré-processador é um programa que processa outro programa imediatamente antes de ele ser compilado. As instruções de pré-processador são embutidas em programas. O pré-processador é essencialmente um programa que expande macros. As instruções de pré-processador são comumente usadas para especificar que o código de outro arquivo deve ser incluído” [Sebesta, 2009].

3. Pré-processadores de CSS

CSS é um mecanismo simples para adicionar estilos como, por exemplo: cores, fontes, espaçamentos aos documentos Web; com a evolução do CSS3 foi apresentado novas funções e com recursos extraordinários e poderosos; com isso gerou automaticamente maior complexidade ao código deixando-o mais complicado, como milhares de prefixos, folhas de estilo muito extensas e repetitivas, para isso foram criados os pré-processadores CSS onde o programa recebe um texto e efetua conversões léxicas nele, traduzindo-o de um texto informal para um formal, com isso podem até incluir macros de substituição, inclusão condicional e inclusão de outros arquivos; como sintetizado na figura 7.

Figura 7. Pré-processadores.

3.1. Pré-processador SASS (Syntactically Awesome Style Sheets)

SASS foi inicialmente projetado por Hampton Catlin em 2006 e desenvolvido utilizando Ruby por Natalie Weizenbaum, sendo uma extensão CSS com o objetivo de corrigir falhas CSS, oferecendo novas funcionalidades e ferramentas úteis, como utilizar variáveis, regras aninhadas, mixins e importações de arquivos; Também permite que se utilize a biblioteca de estilos Compass para manter grandes folhas de estilos bem organizadas e funcionando mais rápidas, sendo totalmente compatível com a sintaxe CSS [SASS, 2015].

SASS possui duas sintaxes, sendo que a primeira é declarada como sintaxe de recuo, que se utiliza o recuo para separar blocos de código indicando o aninhamento de seletores e novas linhas para separar propriedades ao invés de ponto e vírgula, sendo que a sensibilidade aos espaços depende da indentação para se ver livre de chaves, pontos e vírgulas e outros símbolos de pontuação, resultando em uma sintaxe mais curta e mais limpa.

A segunda sintaxe SCSS, consiste em uma extensão de CSS3 sendo que cada folha de estilo CSS3 válido é um arquivo válido SCSS com o mesmo significado; o código é dividido em pedaço de blocos que são escritos adicionalmente ao CSS habitual e usa chaves para denotar blocos de códigos, pontos e vírgulas para separar linhas

SASS ou LESS PRÉ-PROCESSAMENTO CSS

(6)

dentro de um bloco. SASS possui uma ferramenta SASS-convert onde se pode converter uma sintaxe para outra sintaxe diferente dentro da linha de comando, como por exemplo, SASS-convert, style.scss, style.SASS [SASS, 2015].

Variáveis são utilizadas para armazenar informações e depois utilizá-las em qualquer parte das folhas de estilos como, por exemplo, definição de cores, pilhas de fonte ou valores CSS, as variáveis são representadas em SASS pelo símbolo $ como representado na imagem 8 [SASS, 2015].

1 2 3 4

$font-stack: Helvetica, sans-serif; $primary-color: #333;

body { font: 100% $font-stack; color: $primary- color; }

Figura 8. Variáveis SASS – [SASS, 2015].

SASS possui duas formas de nidificação, a de seletor que permite serem aplicadas regras aninhadas uma dentro da outra, podendo ser aplicada dentro do seletor interno a regra exterior; e a de propriedade onde podem ser definidas as propriedades de um arquivo definindo suas sub-propriedades, sem a necessidade de repetir as propriedades em cada utilização, garantindo menos linhas no código devido á formatação aninhada, deixando o código mais legível e organizado, facilitando a leitura do código. Como demonstrado nas figuras 9 e 10 [SASS, 2015].

1 2 3 4

#main p { color: #00ff00; width: 97%;

.redbox { background-color: #ff0000; color: #000000; }

}

Figura 9. Nidificação de seletor – [SASS, 2015].

1 2 3 4

.funky {

font: { family: fantasy; size: 30em; weight: bold; }

}

Figura 10. Nidificação de propriedades – [SASS, 2015].

Em SASS pode-se criar arquivos parciais que contem pequenos trechos CSS podendo assim incluir outros arquivos SASS apenas importando esses arquivos usando a diretiva import, sendo assim uma ótima maneira de modularizar o CSS mantendo-o mais flexível e organizado em nível global podendo ser utilizável durante todo projeto. Para identificar no código que é um arquivo parcial é sublinhado o nome do arquivo como, por exemplo, _partial.scss, que por sua vez o SASS identifica como um arquivo parcial e ao compilar que não deve ser gerado em um arquivo CSS [SASS, 2015].

Um dos recursos úteis em SASS é sintaticamente definido como @extend, onde é permitido o compartilhamento de um conjunto de propriedades CSS de um seletor para outra, podendo ser reutilizadas em várias partes da página de estilo, como demonstrando na figura 11 [SASS, 2015].

1 2 3 4 5

.message { border: 1px solid #ccc; padding: 10px; color: #333; }

.success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; }

.warning { @extend .message; border-color: yellow; }

(7)

CSS possui a opção de importação de arquivos permitindo dividi-lo em porções menores e mais sustentáveis, porém deixa o processo mais pesado, pois cada vez que é usado o import cria-se uma solicitação HTTP. SASS constrói em cima da atual CSSimport ao invés de exigir uma solicitação de HTTP, e permite importar arquivos SASS e SCSS que são mesclados em um único arquivo CSS, como demonstrado na figura 12, onde é importado o arquivo _reset.scss [SASS, 2015].

1 2 3 4 5 6 7 // _reset.scss html, body, ul, ol { margin: 0; padding: 0; } // base.scss @import 'reset';

body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

Figura 12. Importação de arquivos – [SASS, 2015].

3.2. Pré-processador LESS (Leaner CSS)

O pré-processador LESS foi desenvolvido por Alexis Sellier em 2009, sua linguagem de implementação é Java Script e sua extensão de arquivo é .less. LESS tem como objetivo expandir as capacidades do uso da CSS, complementando com mais recursos e soluções os problemas comuns da CSS, como, por exemplo: menos repetição de código, utilização de variáveis, mixins, operadores e funções que antes não eram possíveis em CSS [LESS, 2014].

Para as variáveis, podem ser definidos valores matemáticos e serem utilizados como operações básicas, tais como: somar, subtrair, dividir e multiplicar valores de propriedades e cores, criando uma relação complexa entre propriedades e evitando adicionar mais variáveis. Mixins são funções que recebem parâmetros e mapeiam com código Java Script, permitindo manipular valores, como apresentado na figura 13 [LESSCSS, 2012]. 1 2 3 4 5 6 7 @the-border: 1px; @base-color: #111; @red: #842210;

#header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; }

#footer { color: @base-color + #003300; border-color: desaturate[@red, 10%]; }

Figura 13. Utilizando operações e funções LESS – [LESSCSS, 2012].

Mixins permitem adicionar todas as propriedades de outra classe diferente incluindo apenas o nome dessa classe como uma de suas propriedades, podendo assim elaborar um conjunto de regras simples e reutilizá-lo em outras partes do código para um maior reaproveitamento do mesmo; mixins também podem se comportar com funções e receber argumentos [LESSCSS, 2012]. Como demonstrado na figura 14.

1 2 3 4 5 6

.rounded-corners [@radius: 5px] { border-radius: @radius;

-webkit -border-radius: @radius; -moz-border-radius: @radius; }

#header { .rounded-corners; }

(8)

Figura 14. Declaração de Mixins LESS – [LESSCSS, 2012].

Para declarar as variáveis em LESS, utiliza-se uma palavra chave: ‘@’; as variáveis permitem especificar valores padrões utilizados em apenas um local, possibilitando reutilizá-las por toda folha de estilos, podendo assim realizar mudanças globais em apenas uma linha de código, facilitando a manutenção e alteração de dados. As variáveis também podem ser criadas com mesmo nome em vários escopos que são delimitados por seletores de elemento, podendo assim ser utilizada em vários lugares obedecendo a regras aninhadas [LESSCSS, 2012]. Como demonstrado na figura 15.

1 2 3 4 5 6 7 8 9 // Declarando as Variáveis @vermelho:#800000; @azul:#0000CD; @verde:#008000;

@fonte:bold 21px "Times New Roman", Arial; // Usando as Variáveis

.cor { color:@vermelho; font: @fonte; } p { color: @azul; }

a { color:@verde; }

Figura 15. Declaração de Variável LESS.

Em LESS é permitido construir nomes dos seletores longos para especificar a herança definindo um seletor dentro do outro resultando em uma herança mais clara e estilo mais curto, determinando assim uma regra aninhada com eficácia, onde o código resultante fica semelhante a estrutura HTML conforme ilustrado na figura 16 [LESSCSS, 2012]. 1 2 3 4 5 6 7 8 // LESS #header {

h1{ font-size: 26px; font-weight: bold; }

p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px }

} } }

Figura 16. Regras aninhadas LESS – [LESSCSS, 2012]. 4. Estudo de Caso

Nesta seção serão apresentados os recursos utilizados dos pré-processadores SASS e LESS, em melhoria ao desenvolvimento CSS, onde serão analisados através dos resultados obtidos pelo autor; será desenvolvido um site demonstrando os recursos e avanços da utilização de pré-processadores LESS e SASS, será feito um levantamento das suas vantagens e desvantagens confrontando essas metodologias que serão avaliadas segundo análises dos resultados obtidos no desenvolvimento e conclusão do site.

4.1. Ambiente de Estudo

Para a realização dos testes foram utilizadas as seguintes ferramentas de trabalho:

 Hardware: Processador Intel Core I5-2410M, CPU 2.3GHz, 4 GB de memória RAM e disco rígido de 465 GB.

(9)

 Tecnologia: SASS, CSS, LESS, SCSS.

 IDE - Integrated Development Environment (Ambiente de Desenvolvimento Integrado): Adobe Dreamweaver CC 2015.

 Sintaxe da SASS: SCSS.  Sintaxe do LESS: Less.  Navegador: Mozilla Firefox.

4.2. Metodologia

Foram desenvolvidos dois sites, porém com o mesmo layout utilizando duas tecnologias SASS e LESS, demonstrando a utilização principal dos seus recursos, tais como:

 Declaração de variáveis.  Utilização de mixins.  Regras de aninhamentos.  Expressões matemáticas.  Recurso extend.  Recurso import.  Funções if, else.  Diretivas de controle.  Funções de cores.

 Guards Mixins (Instrução condicional).

Foram desenvolvidas duas páginas de estilo, como: style.less e style.scss, onde foram desenvolvidas os estilos do site utilizando os recursos e ferramentas das linguagens SASS e LESS, demonstrando o seus funcionamentos em função do CSS, contribuindo para o enriquecimento e aproveitamento de código, com funções extraordinárias antes não disponíveis em CSS. As imagens 17 e 18 demonstradas a seguir, reforçam o aspecto visual do site.

(10)

Figura 18. Site SASS.

O código foi desenvolvido possuindo um, home.html, onde foi concentrada a parte principal do desenvolvimento, contendo a estrutura principal do site para ser desenvolvido com o mesmo aspecto visual, para as duas tecnologias SASS e LESS.

Todo o código utilizado para o desenvolvimento do site pode ser encontrado em um repositório do GitHub no endereço: https://github.com/WellingtonTCC/estudo-de-caso.

O método utilizado para obter os recursos do pré-processador LESS foi a instalação direta no lado do cliente; no código HTML foi importado os estilos .less, com o atributo rel definido para styles.less, no elemento head foi incluído o arquivo less.js, com todo o processo concluído foi possível a utilização dos recursos de LESS, demonstrado na figura 19;. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // instalação LESS <html> <head> <meta charset="utf-8"> <title>LESS</title>

</html>

Figura 19. Implantação de estilos LESS na página.

Para a utilização dos recursos SASS, foi instalado do Ruby (linguagem de programação interpretada multiparadigma), logo depois, utilizando como recurso o NPM (Node Package Manager), que é um interpretador gerenciador de pacotes do node.js (interpretador de código Java Script) foi utilizado dois comandos no node.js: npm install –g sass, para instalação; e o sass styles.sass para gerar um arquivo .css.

(11)

No código HTML foi importado os estilos .css, com o atributo rel definido para styles.css, logo após essas configurações foi possível utilizar os recursos de SASS como demonstrado na figura 20. 1 2 3 4 5 6 7 8 // instalação SASS <html> <head> <meta charset="utf-8"> <title>SASS</title>

</html>

Figura 20. Implantação de estilos SASS na página.

4.3. Resultados Obtidos

Uma das diferenças obtidas no desenvolvimento SASS foi a utilização dos recursos: if, else; chamados também de estruturas condicionais que são utilizados para testar se uma condição é verdadeira ou não; como demonstrado na figura 21, onde é feito uma verificação que se a luz de fundo for menor que 50 ficará de uma cor caso contrário vai obter outra cor diferente.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// utilizando diretivas de controle if e else .dir_topo{

height:33%;

border: 1px solid #F00; text-align:center; background: $cor3;

// se a luminosidade do fundo for menor que 50 a cor do texto será branca

@if lightness($cor3) < 50{ color: #ffffff; }

// se não será preta @else {

color: #000000; }

}

Figura 21. Diretivas de controle if e else em SASS – [LESSCSS, 2012].

LESS fornece uma variedade de funções que transformam as cores em vários níveis de saturação, primeiro as cores são convertidas para o formato HSL (Hue Saturation Luminance) e então manipula a nível de canal, como demonstrado na figura 22. 1 2 3 4 5 6 7 8 9 10 // funções de cores .dir_topo{ height:33%; border: 1px solid #F00; text-align:center; background: @cor3; p{ color: lighten(@cor3, 80%) } }

(12)

Em LESS utiliza-se uma execução condicional através do guards mixins, permanecendo o mais próximo possível da natureza declarativa do CSS, adquirindo resultados semelhantes às funções de if e else do SASS, como demonstrado na figura 23. 1 2 3 4 5 6 7 8 9 10 11 12 13

// exemplo de guards mixins

.mixin (@b) when (lighten(@b) >= 50%) {

background-color: black; }

.mixin (@b) when (lighten(@b) < 50%) { background-color: white; } .mixin (@b) { color: @b; }

Figura 23. Guards Mixins LESS.

O pré-processador SASS utiliza os recursos de laços como: for, each e while, onde é utilizado para repetir a execução de um conjunto de instruções por um número de vezes, como é apresentado na figura 24.

1 2 3 4 5 6 7 8 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

// exemplos de laços @for .dir_meio{

height:33%;

border: 1px solid #00F; text-align: center;

@for $cor2 from 1 through 5 { .menu-#{$cor2}{

background: red; }

}

$width:50px;

@each $valor in $itens{ $width: $width * 3; .#{$valor}: before{ background: url('imagens/#{$valor}.jpg'); margin-right: 4px; width: $width; } } $i: 10; @while $i > 0 { .item-#{$i} { margin: $i + em; } $i: $i - 2 ; } }

Figura 24. Laços SASS.

Para utilizar o pré-processador SASS, deve instalar o Ruby (linguagem de programação interpretada multiparadigma) e em LESS instala o Node.js (interpretador

(13)

de código Java Script). Ambos utilizam de recursos externos para instalação, porém, em LESS pode ser executado sem pacotes, ligando-o à biblioteca Java Script.

SASS possui como diretiva de controle os operadores lógicos como: if, else, each, for e while; enquanto em LESS é utilizado o recurso guards mixins, que é utilizado como execução condicional.

Ao nidificar o documento, os dois pré-processadores podem ser aplicados regras CSS, porém, SASS permite regras de nidificação até mesmo em nível de elementos CSS onde reduz a repetição das informações em cada utilização.

SASS permite que se façam cálculos matemáticos assim como em LESS, porém quando há unidades incompatíveis, SASS gera uma mensagem de erro demonstrando que possui um erro de sintaxe, como, por exemplo: unidades incompatíveis; enquanto LESS produz resultados estranhos não esperados.

LESS possui uma organização bem mais sucedida em relação aos relatórios de erros, pois apresenta ao desenvolvedor a linha e o erro cometido, sendo mais fácil a identificação, ao contrario de SASS que não fica bem claro os relatórios de erros, causando um transtorno maior ao se corrigir o código.

5. Conclusão

O desenvolvimento em front end, representa parte da apresentação visual de um site, a forma como o conteúdo é apresentado na tela, a estrutura hierárquica das informações e a aplicação do design para a exibição das informações. O documento apresentado pelo navegador é criado com HTML e as transformações visuais com CSS.

O avanço constante para um padrão web dificultou o desenvolvimento em CSS por possuírem poucos recursos disponíveis, com isso impôs o CSS a avançar e acompanhar tais evoluções para o desenvolvimento web, por precisarem de recursos mais avançados e atualizados.

Para melhorar o desenvolvimento CSS, foram criados os pré-processadores, com objetivo de expandir recursos CSS e fornecer funções extraordinárias, habituando-se as necessidades exigentes de um padrão web, que está em constante crescimento e necessitando cada vez mais de recursos tecnológicos e ferramentas adequadas para o acompanhamento.

Os pré-processadores LESS e SASS demonstraram grande potencial em desenvolvimento CSS com ferramentas e pacotes bem elaborados e recursos surpreendentes.

Conforme demonstrado no artigo apresentado acima, sem dúvida percebe-se a real necessidade de utilização dos pré-processadores para desenvolver em CSS.

Existem poucas diferenças entre os pré-processadores SASS e LESS, ambos fornecem uma ampla forma de recursos extraordinários para melhorar o desenvolvimento CSS.

As análises feitas das propostas principais fornecidas pelos pré-processadores SASS e LESS, demonstram que ambos são capazes de melhorar e fornecer funções extraordinárias para obter um layout responsivo, tornando mais favorável o desenvolvimento em CSS.

(14)

Os dois pré-processadores utilizam recursos bem parecidos para melhorar o desenvolvimento em CSS, porém é aconselhável a utilização LESS, pois utiliza o Java Script quem em conjunto com o HTML produz vários recursos e características importantes tornando um acréscimo poderoso no desenvolvimento de páginas dinâmicas, sendo muito utilizadas hoje em dia.

Em proposta para trabalhos futuros, SASS e LESS podem ser analisados com outros pré-processadores disponíveis no mercado e outras tecnologias baseadas na melhoria do desenvolvimento CSS.

6. Bibliografia

ADOBE. Ajuda do dreamweaver, pré-processadores de CSS. Disponível em: <https://helpx.adobe.com/br/dreamweaver/using/css-preprocessors.html>. Acessado em: 10 de Setembro de 2015.

LESS. Uma visão geral do LESS. Disponível em: <http://LESScss.org/>. Acessado em: 15 de Setembro de 2015.

LESSCSS. A linguagem dinâmica de estilos. Disponível em: <http://LESScss.loopinfinito.com.br/>. Acessado em: 15 de Setembro de 2015. SASS. CSS com super poderes. Disponível em: <http://SASS-lang.com/>. Acessado

em: 21 de Setembro de 2015.

Scheidt, Felippe Alex. (2015). Fundamentos de CSS, “Criando Design para

Sistemas Web”. 1 ed. Editora Outbox Interativa.

Sebesta, Robert W. Sebesta. (2009). Conceitos de linguagens de programação. 9. ed. Editora Bookman.

Silva, Maurício Samy. (2008). Construindo sites com CSS e (X)HTML, “Sites

Controlados por Folhas de Estilos em Cascata”. Editora Novatec.

Silva, Maurício Samy. (2012). CSS3, “Desenvolva aplicações Web profissionais com