Davidson Christian - Melhorias proporcionadas pela SASS em relação a CSS

Melhorias proporcionadas pela SASS em relação a CSS

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

davidson3d@hotmail.com, malopes21@gmail.com

Resumo. A utilização de pré-processadores para o desenvolvimento de aplicações web vem aumentando constantemente, principalmente com as exigências cada vez maiores por parte do mercado de tecnologias web. Sabendo dessa demanda é necessário de ferramentas capazes de supri-la. Com aplicações web possuindo uma crescente evolução visual para poder aprimorar o nível de experiência do usuário, a CSS (Cascading Style Sheet -Folhas de Estilo em Cascata) já não consegue suprir todas essas demandas, mantendo um nível de produtividade adequado. Dessa forma é necessário apresentar as soluções proporcionadas pela SASS (Syntactically Awesome Style Sheets), como forma de demonstrar uma maneira mais ágil e produtiva que atenda bem o mercado, sem a necessidade de efetuar altos investimentos. Palavras Chave. pré-processador, aplicações web, CSS, SASS.

1. Introdução

Com o crescimento do mercado web, as empresas necessitam de maior produtividade no desenvolvimento de aplicações web. Urge a necessidade de ferramentas que contribuam no aumento da qualidade e produtividade dessas aplicações, sem que seja preciso gastos exorbitantes de dinheiro e tempo.

As aplicações web vem evoluindo constantemente, tanto na apresentação de funcionalidades robustas quanto na apresentação de visuais deslumbrantes. Em se tratando da riqueza e modernidade visual dessas aplicações demonstradas atualmente, não há como deixar de citar ferramentas ou formas de construí-las.

A CSS (Cascading Style Sheet - Folha de Estilo em Cascata) prevaleceu por mais de uma década, como a principal forma de se estilizar visualmente uma aplicação web. Ela permite desde estilizações básicas, como manipular fontes e cores até as mais avançadas, como auxílio na responsividade e animações. Algumas dessas funcionalidades foram surgindo ao longo da evolução das tecnologias web.

Apesar da maturidade e facilidade de uso demonstrada pela CSS, existem características que necessitam claramente de soluções para sanar problemas referentes a repetição excessiva de código, dificuldade na manutenção e legibilidade deste último. Para solucionar os problemas citados anteriormente, foram criados pré-processadores para CSS. Um dos principais é intitulado como SASS (Syntactically Awesome Style Sheets), um pré-processador que além de sanar problemas apresentados pela CSS, traz vantagens em sua utilização.

Neste artigo serão abordadas soluções e vantagens fornecidas pela SASS em relação a CSS, contando com a apresentação desde os conceitos teóricos e práticos básicos até a demonstração em um estudo de caso feito com a SASS, mostrando o ganho de produtividade, a redução da repetição de código, o aprimoramento das funcionalidades da CSS, a facilidade de manutenção e legibilidade de código.

2. Conceituações de CSS e SASS

Esta sessão visa definir e conceituar os princípios básicos da CSS e da SASS, abordando suas origens, finalidades, diferenças e funcionamento.

2.1. Conceituações de CSS

CSS é a sigla do termo proveniente do inglês Cascading Style Sheet, podendo ser traduzido para o português como: Folhas de Estilo em Cascata (SILVA, 2012). O CSS é definido pela W3C (2015) como:

“Folha de estilo em cascata é um mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaçamentos) aos documentos web.”

2.1.1. Finalidade

A CSS tem como finalidade manipular a formatação do conteúdo HTML (HyperText Markup Language – Linguagem de Marcação de Hipertexto), ou seja, deve ficar responsável pela apresentação dos seus elementos. A HTML é uma linguagem de marcação que possibilita a estruturação do conteúdo de uma página web e segundo seus idealizadores, não é sua responsabilidade informar ao agente do usuário sobre a apresentação dos elementos (SILVA, 2012).

A manipulação da formatação do conteúdo HTML pode ser descrita como estilização de espaçamentos, cores, fontes, imagens, posicionamento de elementos, animações, etc (SILVA, 2012).

2.1.2. Surgimento

As primeiras funcionalidades que controlavam a apresentação dos documentos, ainda de forma bastante limitada, foram criadas por Tim Berners-Lee, durante o desenvolvimento do navegador Nexus (SILVA, 2012).

Navegadores que surgiram no período de 1992 e 1993, já possuíam funcionalidades de estilização padrão, semelhante ao modelo criado por Tim. Em 1993 foi lançado o navegador Mosaic, o qual contribuiu para a popularização da web e que possuía funcionalidades mínimas para aplicação de estilos, possibilitando apenas a alteração de algumas fontes e cores. Essas funcionalidades mínimas citadas são conhecidas hoje como folhas de estilo (SILVA, 2012).

Tim acreditava que a estilização deveria ser responsabilidade do navegador, o que o levou a não se preocupar em publicar a sintaxe padrão utilizada para criar a folha de estilos do seu navegador. Assim sendo, somente em 1994 surgiu a primeira proposta para o desenvolvimento da CSS. Em dezembro do ano de 1996 foram lançadas oficialmente as CSS1 como recomendação oficial da W3C (SILVA, 2012).

2.1.3. Funcionamento

A CSS funciona com base em um conjunto de regras, nas quais se aplicam em elementos HTML para gerar um estilo visual (SILVA, 2012).

Segundo Silva (2012, p. 26)

Regra CSS é a unidade básica de uma folha de estilo. Nessa definição, o termo unidade básica significa a menor porção de código capaz de produzir efeito de estilização. Uma regra CSS é composta de duas partes: o seletor e a declaração. A declaração compreende uma propriedade e um valor.

A imagem abaixo exemplifica estruturalmente uma regra CSS, também conhecida como bloco de declaração.

Figura 1. Exemplificação estrutural de uma regra CSS – (Silva 2012, p. 26).

De acordo com Silva (2012, p. 26), os componentes CSS podem ser definidos como:

 Seletor: é o alvo da regra CSS.

 Declaração: específica os parâmetros de estilização e é composto pela propriedade e pelo valor.

 Propriedade: informa qual será a característica do seletor a ser aplicada.  Valor: é representado pela quantificação ou qualificação da propriedade.

Sempre que uma página web é renderizada pelo navegador, o mecanismo de renderização deste, trata de analisar as regras CSS estabelecidas. Em seguida, caso essas regras estejam corretas, ele as aplica na página web, assim resultando em um conteúdo formatado e visualmente estilizado (HTML5Rocks, 2015).

Cada navegador possui sua folha de estilo pré-definida, em outras palavras, caso não seja definido uma CSS para a página, o navegador se encarregará de aplicar a sua CSS padrão. Ao criar uma CSS e aplica-la na página, suas regras irão sobrescrever as do navegador, através do efeito cascata (SILVA, 2012).

A CSS, como o próprio nome sugere, folha de estilo em cascata, se aplica nos elementos HTML da página web em forma de cascata, ou seja, os elementos filhos herdam as propriedades aplicadas em elementos pais. No processo de herança, existe a especificidade, que é quando um elemento filho deve possuir uma propriedade específica, que deve ser diferente da herdada do pai (TABLELESS, 2015).

2.2. Conceituações de SASS

SASS é a abreviação do termo em inglês Syntactically Awesome Style Sheets e pode ser considerada como um pré-processador. SASS introduz uma forma melhorada e mais produtiva para se criar CSS (CATLIN; CATLIN, 2011).

2.2.1. Finalidade

A SASS surgiu para trazer melhorias a CSS, tais como: aumento de produtividade, redução da repetição de código (conceito DRY (Don’t Repeat Yourself – Não repita a si mesmo)) e melhorias na manutenção e legibilidade do código (CATLIN; CATLIN, 2011).

2.2.2. Surgimento

Hampton desenvolveu a SASS enquanto trabalhava na empresa Unspace em Toronto e atualmente possui como equipe de suporte e manutenção, os programadores Nathan Weizenbaum e Chris Eppstein. Inicialmente a SASS foi projetada para funcionar apenas com Ruby on Rails, esta é uma framework pertencente a linguagem de programação Ruby (CATLIN; CATLIN, 2011).

2.2.3. Funcionamento

A SASS pode funcionar de uma maneira mais flexível e abrangente do que a CSS, não se limitando apenas a um conjunto de regras, mas sim oferecendo mais recursos para construção dessas regras (CATLIN; CATLIN, 2011).

Segundo Catlin e Catlin (2011, p. 8) existem dois modelos de sintaxes para utilização da SASS:

 SCSS (abreviação de SASSY CSS): nesta sintaxe a forma de escrever é muito semelhante à da CSS e o arquivo que possui o código fonte SCSS é representado pela extensão .SCSS.

 SASS Original: esta sintaxe possui elementos da SCSS e da CSS, com a diferença que o ponto e vírgula e as chaves são removidas. Um arquivo SASS original é salvo com a extensão .SASS.

A SASS possui um compilador escrito na linguagem Ruby. Ao escrever uma folha de estilo utilizando a SASS, este primeiramente será compilado e durante o processo de compilação ele será pré-processado, ou seja, o arquivo possuidor do código-fonte SASS será convertido para CSS, assim gerando um novo arquivo CSS. Caso um código CSS seja compilado como SASS, a compilação será efetuada com sucesso e o arquivo com o código CSS será gerado (CATLIN; CATLIN, 2011).

Todo o processo citado no parágrafo acima ocorre na máquina do desenvolvedor, não gerando peso algum para o servidor ou para o cliente (navegador) (CATLIN; CATLIN, 2011).

2.3. Vantagens e desvantagens da SASS sobre a CSS

De acordo com Catlin e Catlin (2011, p. 8) a SASS possui inúmeras vantagens em relação a CSS, dentre elas se destacam:

 Possiblidade de declarar variáveis.  Manipulação do tom das cores.

 Importação de inúmeros arquivos SASS ou CSS dentro de outro(s) arquivo(s) SASS, sem gerar peso de requisição ao servidor por cada um desses arquivos.

 A SASS não traz nenhum peso ao servidor ou ao cliente (navegador), pois toda compilação é realizada na máquina do desenvolvedor.

 Redução considerável de repetição de código.  Manutenibilidade e legibilidade do código fonte.

Quanto às desvantagens, essas são mínimas. A principal delas é a necessidade de possuir um software que compila e gerencia as folhas de estilos SASS a serem compiladas. Em alguns casos é preciso mantê-lo aberto enquanto se produz as folhas de estilo e em outros é necessário acionar o compilador manualmente (CATLIN; CATLIN, 2011).

3. Funcionalidades da CSS e SASS.

A seguir será abordado as funcionalidades apresentadas pela CSS e pela SASS, utilizadas no desenvolvimento de elementos visuais para aplicações e sites web.

3.1. Funcionalidades da CSS

A sintaxe básica da CSS envolve os elementos constituintes de uma regra CSS, como exemplificado na figura 1. Uma regra CSS pode ser representada por quatro principais tipos de seletores, dentre eles estão: o id, a classe, a pseudo classe e o elemento padrão HTML (w3schools, 2015). A representação destes pode ser visualizada na figura 2.

1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 /* id */ #info{ color:black; } /* classe */ .conteudo{ width: 100x; height: 100x; } /* pseudo classe */ .conteudo: hover{ color: red } /* elemento padrão */ p{ font-size:11px; }

Figura 2. Exemplificação dos tipos de seletores – (w3schools, 2015).

Para aplicar uma mesma propriedade em vários elementos utilizando apenas uma regra CSS, é necessário o acréscimo da vírgula após a definição de cada elemento, conforme é exemplificado na figura 3 (w3schools, 2015).

1 2 3

#menu, #sidebar, .conteudo { font-family: Arial; }

Figura 3. Aplicação de uma mesma propriedade em vários elementos utilizando apenas um regra CSS – (w3schools, 2015).

Algumas propriedades CSS podem conter um ou mais valores. Quando uma propriedade possui acima de um valor, estes são separados por meio da inserção de espaços entre cada valor apresentado. Propriedades que permitem a inserção de vários valores, na verdade são propriedades que representam outras propriedades em a penas uma mesma, ou seja, é o resumo de várias propriedades (w3schools, 2015).

A lógica da sintaxe dos valores pode variar de uma propriedade para outra. Em algumas propriedades a ordem dos valores não tem importância, já em outras a ordem estipula a propriedade a ser representada (w3schools, 2015). A figura 4 demonstra como é a inserção de um ou mais valores em uma única propriedade.

1 2 3 4 5 6 7 8 9 /* Um valor */ #menu{ border: 1px; } /* Vários valores */ #menu .item{ border: 1px solid #CCC; }

Figura 4. Aplicando vários valores em uma única propriedade – (w3schools, 2015).

É possível aplicar propriedades em elementos filhos de pais específicos de duas maneiras distintas. Na primeira forma basta apontar o sinal de maior para quem é o elemento pai, assim consequentemente o elemento filho ficará com o sinal de menor. A segunda forma representa o elemento pai e filho através de espaços, como descrito na figura 5 (w3schools, 2015). 1 2 3 4 5 6 7 8 9 /* primeira forma */ #menu > .item{ text-align: center; } /* segunda forma */ #menu .item{ text-align: center; }

Figura 5. Aplicando propriedades em elementos filhos de pais específicos – (w3schools, 2015).

3.1.1. Principais propriedades CSS

A CSS possui um vasto acervo de propriedades, dentre essa rica variedade, se destacam as propriedades descritas na figura 6 (w3schools, 2015):

1 2 3 4 5 6 7 8 9 #menu{

width: 600px /* Define a largura de um elemento. */ height: 50px /* Define a altura de um elemento. */ margin: auto; /* Define a margem de um elemento. */ padding: 10px; /* Define a espessura de um elemento. */ background: blue; /* Define o fundo de um elemento. */ font-size: 14px; /* Define o tamanho da fonte. */ font-family: Arial; /* Define a família da fonte. */ color: #FFF; /* Define a cor da fonte. */

1 0 1 1 1 2 1 3 1 4

position: absolute; /* Define a posição de um elemento. */ border: 1px solid #CCC; /* Define a borda de um elemento. */ text-align: center; /* Define alinhamento de um elemento. */ display: block; /* Define a renderização de um elemento. */ }

Figura 6. Principais propriedades CSS – (w3schools, 2015). 3.1.2. Principais categorias de valores CSS

As principais categorias de valores CSS se resumem em números positivos ou negativos acompanhados de unidades de medidas, palavras-chave e casos especiais (SILVA, 2012). Segue a apresentação das principais categorias de valores CSS.

3.1.2.1. Números positivos ou negativos com unidades de medida

Para que certas propriedades funcionem corretamente, é necessário associar um número positivo ou negativo a uma unidade de medida, para que o seu efeito seja aplicado ao elemento (SILVA, 2012).

Dentre as inúmeras unidades de medidas, se destacam: o pixel, o ponto, o centímetro, o milímetro, o em e a percentagem (SILVA, 2012). A figura 7 exemplifica a utilização destas unidades de medida.

1 2 3 4 5 6 7 p{ width: 200px; /* pixel */

font-size: 14em; /* tamanho de fonte */ font-size: 14pt; /* ponto */

height: 4cm; /* centímetro */ margin-left: 100mm; /* milímetro */ padding: 10%; /* percentagem */ }

Figura 7. Utilização das principais unidades de medida CSS – (Silva 2012, p. 29).

Se uma propriedade movimenta um elemento utilizando o topo como ponto de referência, o número positivo a cumpre, assim distanciando do topo. Os números negativos atuam de forma contrária, então baseando-se no exemplo anterior, o uso do sinal negativo irá fazer com que o elemento se aproxime ao invés de se distanciar do topo (SILVA, 2012). A figura 8 demonstra isso sintaxicamente.

1 2 3 4 5 6 /* Número positivo */ #menu{

margin-top: 200px; /* O elemento se distanciará do topo. */

margin-left: -200px; /* O elemento se aproximará da esquerda ao invés de se afastar. */

}

Figura 8. Aplicação de números negativos e positivos – (Silva 2012, p. 30). 3.1.2.2. Palavras-chave

As palavras-chave são muito utilizadas para indicar cores e estilizar fontes, elas são a representação em string de um valor pré-definido (SILVA, 2012). A figura 9 demonstra isso.

1

3

4 font-weight: bold; }

Figura 9. Aplicação de palavras-chave – (Silva 2012, p. 29). 3.1.2.3. Casos especiais

A utilização de casos especiais é muito comum para configurar famílias de fontes, esquema de cores e no carregamento de imagens, como pode ser visualizado na figura 10 (SILVA, 2012). 1 2 3 4 5 html { background-color: #FFF;

font-family: Arial, Verdana, Sans-serif; background-image: url("../../img/img-1.png"); }

Figura 10. Aplicação de casos especiais – (Silva 2012, p. 35). 3.1.3. Tipos de vinculação em documentos

Existem três formas de vincular a folha de estilo CSS ao documento HTML, são elas: estilos inline, estilos incorporados e estilos externos (SILVA, 2012). A seguir serão apresentados cada um desses tipos de vinculação.

3.1.3.1 Estilos inline

Os estilos inline são aqueles em que o CSS é aplicado diretamente no elemento HTML por meio do atributo style, como pode ser visualizado na Figura 11. O uso excessivo de estilos inline, compromete a legibilidade do código fonte HTML (SILVA, 2012).

1 <p style=”color: black;”></p>

Figura 11. Vinculação de estilos inline – (Silva 2012, p. 39). 3.1.3.2 Estilos incorporados

Os estilos incorporados são aqueles em que o CSS é aplicado diretamente no documento HTML por meio do elemento style, como pode ser visualizado na Figura 12 (SILVA, 2012). 1 2 3 4 5 <style> p{ color: black; } </style>

Figura 12. Vinculação de estilos incorporados – (Silva 2012, p. 40). 3.1.3.3 Estilos externos

Os estilos externos diferentemente das outras vinculações, não situam em nenhuma parte do documento HTML e sim em um arquivo externo. A vinculação deste arquivo é feita a partir da indicação de seu caminho através do elemento HTML link (SILVA, 2012). A figura 13 exemplifica essa vinculação.

1 <link rel="stylesheet" type="text/css" href="estilo.css" media="all" /> Figura 13. Vinculação de estilos externos – (Silva 2012, p. 41).

3.2. Funcionalidades da SASS

No geral a SASS utiliza vários elementos da sintaxe da CSS, o que funcionar de maneira diferente ou for novidade, será apresentado nesta sessão. A sintaxe para a utilização dos

escopos seletores na SASS ocorre de forma distinta (CATLIN; CATLIN, 2011). A figura 14 demonstra as diferenças para selecionar elementos filhos e pais. A sintaxe a ser utilizada nas exemplificações são com base na SCSS.

1 2 3 4 5 6 7 8 9 1 0 1 1 /* CSS */ #menu .item{ text-align: center; } /* SASS */ #menu{ .item{ text-align: center; } }

Figura 14. Escopos seletores na SASS – (CATLIN; CATLIN 2011, p. 15).

Uma das vantagens que se destacam na SASS, é a redução da repetição excessiva de código CSS (CATLIN; CATLIN, 2011). A figura 15 demonstra claramente este benefício. 1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 /* CSS */ .infobox { width:200px; } .infobox .msg {

border:1px solid red; } .infobox .msg .titulo{ color:red; } /* SASS */ .infobox{ width:200px; .message{

border:1px solid red; .title{

color:red; }

} }

3.2.1. Definição de variáveis

Uma das melhorias proporcionadas pela SASS é a possibilidade de definir variáveis. Dessa forma, há como inserir valores de propriedades CSS nessas variáveis, e em seguida utilizá-las em locais estratégicos do arquivo SASS. Assim não há mais necessidade de percorrer toda a folha de estilo para alterar propriedades específicas, basta alterar o valor da variável designada para essas propriedades (CATLIN; CATLIN, 2011), como mostra o exemplo da figura 16.

1 2 3 4 5 6 7 8 9 1 0 1 1 $cor: #FFF; $largura: 100%; .rodape{ width: $largura; color: $cor; } .circulo{ Background-color: $cor; }

Figura 16. Definição de variáveis – (CATLIN; CATLIN 2011, p. 21). 3.2.2. Cálculos matemáticos

A SASS permite a realização de cálculos matemáticos, assim melhorando a noção do dimensionamento do layout e contribuindo para a manutenção, já que o desenvolvedor terá conhecimento do ocorrido (CATLIN; CATLIN, 2011). A figura 17 exemplifica esta funcionalidade. 1 2 3 4 5 6 7 8 9 1 0 $largura: 10px; $largura_dobrada: $largura * 2; $altura: 5px; $largura_dobrada: $largura * 2; span{ width: $largura_dobrada; height: $altura * 2; }

Figura 17. Cálculos matemáticos – (CATLIN; CATLIN 2011, p. 23). 3.2.3. Manipulação de cores

Dentre as formas de manipulação de cor, estão a definição de tonalidade, saturação, matriz e mistura das cores (CATLIN; CATLIN, 2011). Segue alguns exemplos de manipulação de cor na figura 18.

1 2 3 4 5 6 p{

color:lighten(#336699,20%);} /* Clareia a tonalidade da cor em 20%.

*/

background-color: saturate(#336699,30%); /* Satura a cor em 20% */ border-color: adjust-hue(blue,180);/* Ajusta a matriz de cor para 180 */

color: mix(#336699,#993266);} /* Mistura uma cor com a outra */ }

3.2.4. Definição de famílias de fontes

A grande diferença da declaração de famílias de fontes na SASS é que há como declara-las em uma variável, para facilitar seu manuseio posteriormente. A sintaxe para declaração de famílias de fontes na SASS é idêntica à da CSS (CATLIN; CATLIN, 2011), como pode ser visualizado na figura 19.

1 $fonte: geneva,tahoma,"dejavusanscondensed",sans-serif;

Figura 19. Declaração de famílias de fontes – (CATLIN; CATLIN 2011, p. 29). 3.2.5. Importação

A importação de arquivos SASS ocorre internamente, ou seja, acontece dentro de arquivos SASS. A grande vantagem dessa importação, deve-se ao fato de que além da organização provida, não importa quantos arquivos sejam importados que não haverá sobrecarga por parte das requisições no lado servidor. Isso acontece pois após a compilação será gerado um único arquivo CSS contendo todas as importações unificadas (CATLIN; CATLIN, 2011). A figura 20 exemplifica o uso da importação. 1

2 3

/* O arquivo a ser importa foi nomeado como cores. */ @import “cores”;

Figura 20. Importação de arquivos – (CATLIN; CATLIN 2011, p. 27). 4. Estudo de caso e Resultados obtidos

Nesta sessão serão demonstradas as vantagens proporcionadas pela SASS em relação a CSS através de um template web desenvolvido utilizando a tecnologia SASS.

Dentre as variáveis a serem demonstradas e analisadas, estão o ganho de produtividade, redução da repetição de código, aprimoramento das funcionalidades da CSS, facilidade de manutenção e legibilidade de código.

4.1. Ambiente

O ambiente em que o estudo de caso foi executado é descrito a seguir:

 Hardware: Processador Core I5, placa de vídeo dedicada de 1 GB, 6 GB de memória RAM - Random Acess Memory (Memória de Acesso Randômico) e Disco rígido de 1 TB.

 Sistema Operacional: Windows 8, 64 bits.  Tecnologia: SASS, CSS, Bootstrap.

 IDE - Integrated Development Environment (Ambiente Integrado de

Desenvolvimento): PHPStorm 8.2.  Sintaxe da SASS: SCSS.

 Compilador SASS: Koala 2.0.4.  Navegador: Opera 29.0.

4.2. Metodologia

O estudo de caso consistiu em desenvolver um template web utilizando o pré-processador SASS, de forma que fosse demostrado seus principais aprimoramentos e vantagens em relação a CSS. O estilo de sintaxe utilizada da SASS foi a SCSS.

O Bootstrap teve o papel de ajudar na responsividade, estruturação do layout, e compatibilidade com os navegadores, assim sendo possível tirar melhor proveito do experimento. O compilador utilizado para realizar a compilação do SASS foi o Koala 2.0.4 e o navegador utilizado como base para a construção do template foi o Opera 29.0. Para a construção do template foram utilizados as seguintes funcionalidades fornecidas pela SASS:

 Declaração de variáveis.  Manipulação de cores.

 Escopo de declaração das regras aprimorado.  Sistema de importação.

 Cálculos matemáticos básicos.  Famílias de fontes.

O código SASS do template foi subdividido em 4 partes, podendo ser descritas como:

 style.scss: contém a folha de estilo referente ao conteúdo do template.

 modelo.scss: refere-se a estrutura do template na qual o conteúdo será agregado. É composta basicamente pelo cabeçalho, menu e rodapé.

 config.scss: contém as variáveis responsáveis por configurar o estilo básico do template, como as cores, famílias de fontes, dimensões dos elementos, etc.  media-query.scss: possui as regras que fazem as transformações do template

quando redimensionado.

4.3. Resultados obtidos

A figura 21 descreve como ficou o aspecto visual do template:

Figura 21. Template desenvolvido para realizar o estudo de caso.

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

4.3.1. Ganho de praticidade na declaração de variáveis para a configuração do template

Foram declaradas variáveis de forma global em um arquivo scss a parte para demonstrar a facilidade de manutenção e de alteração do template.

Desta forma é possível alterar as cores, famílias de fontes, dimensões dos elementos, entre outras coisas de forma prática e eficiente, como pode ser visualizado na figura 22. 1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 /* Cores do template*/ $cor1: lighten(#16304B, 5%); $cor2: #F05E35; $cor3: #2A9E79;

$cor4: #FFF; //fonnte e menu $cor5: lighten(#EFC94C, 10%); /* Famílias de fontes */

$fontes: arial, helvetica, sans-serif; /* Chamada dessas variáveis nas regras */ body{ padding-top: 50px; background-color: $cor5; overflow-x: hidden; font-family: $fontes; font-size: $font-size; }

Figura 22. Demonstração da praticidade proporcionada pelo uso das variáveis. 4.3.2. Utilização do escopo de declaração para reduzir a repetição de código

Além do aprimoramento da sintaxe dos escopos tornar possível a redução da repetição de código, ela melhora sua legibilidade, como pode ser visualizado na figura 23.

1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 /* SASS */ #sobre { background-color: $cor2; .img{ background: url("../../img/img-1.png"); } .btn{ background-color: $cor1; border: $border; } } /* CSS */ #sobre { background-color: #F05E35; } #sobre .img { background: url("../../img/img-1.png"); } #sobre .btn {

1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 background-color: #1c3d5f; border: none; }

Figura 23. Uso do aprimoramento da sintaxe dos escopos para reduzir a repetição de código.

4.3.3. Utilização das importações para deixar o código fonte organizado

Com o sistema de importações trazidos pela SASS é possível subdividir uma folha de estilos em diversos arquivos e depois importá-los nas folhas de estilos que forem necessárias, sem que pese no servidor (CATLIN; CATLIN, 2011).

Dessa forma é mais fácil localizar o trecho de código a ser modificado ou inserido, o que contribui na organização e facilita na manutenção do código fonte. A figura 24 demonstra bem isso, com a importação de folhas de estilo nos arquivos style.scss, modelo.scss e media-query.scss.

1 2 3 4 5 6 7 8 9 /* style.scss */ @import "modelo"; @import "media-query"; /* modelo.scss */ @import "config"; /* media-query.scss */ @import "config";

Figura 24. Utilização do sistema de importação para contribuir na organização e manutenção do código fonte.

4.3.4. A manipulação de cores e cálculos contribuem na produtividade

A manipulação de cores agiliza na hora de fazer alguns retoques, sem que seja preciso fazer uso de ferramentas gráficas mais complexas, e os cálculos matemáticos são úteis para a realização de futuras manutenções, pois será possível saber como se chegou a um valor específico. Os cálculos também proporcionam dimensões com uma maior precisão (CATLIN; CATLIN, 2011). A figura 25 fornece uma amostra disso.

1 2 3

$cor1: lighten(#16304B, 5%); // Manipulação de cores $footer-height: 49px;

$push-height: 100 - $footer-height; // Cálculo matemático

Figura 25. Uso da manipulação de cores e dos cálculos para obtenção de maior produtividade.

5. Conclusão

A CSS conquistou o respeito de muitos programadores front-end e reinou sozinha durante anos. Isso deve-se ao fato da demora do surgimento de novas ferramentas que

competisse ou aprimorasse-a. Com o aquecimento do mercado web, tornou visível o quanto é necessário a criação de novas tecnologias para suprir tais demandas.

Com objetivos de solucionar problemas desse mercado carente de ferramentas que tragam maior produtividade, a SASS demonstrou grande potencial. Não só se tratando de ganho de produtividade, mas como também em sua contribuição quanto a organização, manutenibilidade, legibilidade e redução da repetição de código.

Em trabalhos futuros, se utilizada adequadamente, a SASS pode vir a integrar-se com outras tecnologias. Sejam pré-processadores, bibliotecas ou frameworks, ela é capaz de auxiliá-las sem interferir no que cada uma faz de melhor.

Não tardará que tecnologias como a SASS surjam com maior frequência e com maior eficiência, já que esse é um mercado que sempre estará em constante evolução. Referências

Catlin, Hampton; Catlin, Michael Lintorn. Pragmatic Guide to Sass. 1 ed. United States of America: The Pragmatic Programmers, LLC, 2011.

HTML5Rocks. Como os navegadores modernos funcionam: bastidores dos navegadores

modernos. Disponível

em: http://www.html5rocks.com/pt/tutorials/internals/howbrowserswork/. Acesso em: 25 de fev. 2015.

Silva, Maurício Samy. CSS3: desenvolva aplicações web profissionais com o uso dos poderosos recursos de estilização. 1 ed. São Paulo: Novatec Editora, 2012.

TABLELESS. Efeito cascata, herança e especificidade do CSS. Disponível em: http://www.tableless.com. Acesso em: 28 de fev. 2015.

W3C. Disponível em: http://www.w3c.com. Acesso em: 18 de fev. 2015.

W3schools. Disponível em: http://www.w3schools.com/cssref/css_selectors.asp. Acesso em: 05 de abr. 2015.