Lidando com o Compass no RWD do Magento – pt.1

Olá a todos! Primeiro de tudo, feliz 2015! Gostaria de me desculpar pela demora deste post prometido e também pelo tamanho deste post, que é só a parte 1 de uma série com 2 posts sobre o Compass. Mas quem não conhece o Compass não se assuste não é culpa dele o tamanho do post pois a ferramenta em si é muito simples, quem acrescentou uma leve dificuldade nele vocês já sabem quem foi né? 😉

Fonte: http://blog.rollout.io/

Bom, como expliquei anteriormente no artigo sobre o tema RWD, para customizarmos de maneira correta nossos temas derivados do RWD temos que entender um pouco de SASS + Compass, e também aprender como a estrutura de componentes de layout foi organizada entre os arquivos do Compass. Vamos primeiro à alguns pontos:

o que são os Pré-processadores de css?

O SASS é um pré-processador de CSS. No RWD estamos utilizando o Compass que é uma extensão do SASS, ou seja, é o SASS porém com algumas diferenças e recursos extras. Para quem não conhece os conceitos de pré-processadores de CSS eu recomendo ver estes slides feitos pelo @felquis, que explicam de maneira bem divertida sobre o que é, e dá exemplos de como o LESS (outro pré-processador) funciona.

COMPASS E O Básico

Para trabalhar com o Compass, você deve que ter o Ruby e o Compass instalado em seu computador, isso habilitará comandos via terminal para manipular eles (porém também há como fazer via interface pra quem não gosta de terminal).

Obs.: Neste post não irei explicar o básico da instalação e sintaxe da linguagem, para isto deixo algumas referências:

Nestas vídeo aulas da Loiane Groner você aprenderá de forma detalhada como instalar o Ruby e o Compass no seu computador (Windows/Linux e Mac). Ela também fez uma série de video aulas ensinando como utilizar o Compass.

Veja este slides para aprender de maneira resumida sobre a linguagem: SASS + COMPASS – Alta Produtividade no Front-end por Anderson Aguiar.

Estrutura de arquivos compass no RWD

O que eu achei mais complexo do que se diz respeito ao Compass no RWD foi a estrutura de diretórios que os arquivos do tema foram organizados. E é sobre este diretório que vamos dar ênfase neste post. “Resumindo” o diretório skin do RWD é assim:

├── css
│   ├── scaffold-forms.css
│   ├── styles-ie8.css
│   └── styles.css
├── images
│   ├── ajax-loader.gif
│   ├── bg_x.png
│   ├── demo-logo.png
│   ├── demo_logo.png
│   ├── icon_sprite.png
│   ├── icon_sprite@2x.png
│   ├── logo.png
│   ├── logo_small.png
│   ├── opc-ajax-loader.gif
│   ├── social_icons.png
│   └── social_icons@2x.png
└── scss
    ├── _core.scss
    ├── _framework.scss
    ├── _var.scss
    ├── config.rb
    ├── content
    │   ├── _category.scss
    │   ├── _home.scss
    ├── core
    │   ├── _common.scss
    │   ├── _form.scss
    │   ├── _reset.scss
    │   └── _table.scss
    ├── function
    │   ├── _black.scss
    │   └── _white.scss
    ├── layout
    │   ├── _footer.scss
    │   ├── _global.scss
    │   ├── _header-account.scss
    │   ├── _header-cart.scss
    │   ├── _header-nav.scss
    │   ├── _header-search.scss
    │   └── _header.scss
    ├── mixin
    │   ├── _breakpoint.scss
    │   ├── _clearfix.scss
    │   ├── _if-resolution.scss
    │   ├── _image-replacement.scss
    │   ├── _loading-overlay.scss
    │   ├── _menu.scss
    │   ├── _not-selectable.scss
    │   ├── _toggle-content.scss
    │   ├── _triangle.scss
    │   └── _typography.scss
    ├── module
    │   ├── _account-reviews.scss
    │   ├── _catalog-compare.scss
    │   ├── _catalog-msrp.scss
    │   ├── _catalog-product.scss
    │   ├── _checkout-cart-minicart.scss
    │   ├── _checkout-cart.scss
    │   ├── _checkout-onepage.scss
    │   ├── _checkout-success.scss
    │   ├── _cms.scss
    │   ├── _configurableswatches.scss
    │   ├── _contacts.scss
    │   ├── _cookies.scss
    │   ├── _customer.scss
    │   ├── _paypal.scss
    │   ├── _pricing_conditions.scss
    │   ├── _product-list.scss
    │   ├── _review.scss
    │   ├── _search.scss
    │   ├── _slideshow.scss
    │   └── _wishlist.scss
    ├── override
    │   └── _plugin.scss
    ├── scaffold-forms.scss
    ├── styles-ie8.scss
    ├── styles.scss
    └── vendor
        └── _normalize.scss

Fonte: Magento

Abaixo vou explicar um pouco melhor o porquê desta organização e alguns arquivos “chave” para o funcionamento do tema:

config.rb: Este arquivo é onde você configura as opções do Compass. Nele você informa os diretórios de imagens, js, scss e o diretório destino dos CSS criados pelo Compass. Nele você também define o formato do CSS (expandido, comprimido, minificado etc). Eu particularmente gosto de deixar este arquivo na raiz do tema, pois acredito que os paths dos diretórios ficam mais fáceis de entender.

scss/styles.scss: é o arquivo ‘pai’ de todos, dentro dele está importado os arquivos _framework.scss e _core.scss.

scss/styles-ie8.scss: é praticamente igual ao styles.css, exceto que nele não foi feita inclusão dos media-queries, pois da versão 8 para baixo o IE não suporta esta tecnologia.

Obs.: no Compass, arquivos que começam com underline ( _ ) não fazem output de um arquivo CSS, são arquivos parciais (contém uma parte do código total). Os arquivos parciais servem para ser importados dentro de arquivos não parciais (sem underline) no qual gera o output de um arquivo CSS; no caso do RWD o styles.scss importa os parciais _framework.scss e _core.scss.

scss/_framework.scss: importa todas as libs, variáveis, funções e mixins. Ele foi feito desta maneira (sendo um arquivo parcial e não um final) para que possa ter suas configurações e utilidades fáceis de reaproveitar em qualquer outro tema derivado do RWD.

scss/_var.scss: contém as variáveis dos breakpoints, espaçamentos, cores, e fontes (que são usadas em outros arquivos também). Este arquivo é um dos que você mais vai mexer em questão de customização do tema.

scss/mixins/: neste diretório estão os arquivos com os mixins utilizados no tema. Somente após alguma convivência com o tema você vai conseguir entender suas vantagens e aprender como utilizá-los, é um conceito muito novo pra que usa só CSS porém muito útil ao longo do desenvolvimento do tema.

scss/function/: contém algumas funções criadas para o tema. São nada mais que mixins com retorno de valores mais simples.

scss/_core.scss: importa todos os arquivos parciais que geram CSS. Todos que vimos até agora não geram CSS e sim são utilitários para a codificação dos estilos.

scss/core/: nesta pasta contém todos os arquivos SCSS dos componentes de interface (formulários, tabelas etc).

scss/layout/: contém os arquivos parciais das estruturas de layout (header, content, e footer). No arquivo scss/core/_common.scss contém os estilos dos layout de 1, 2, ou 3 colunas.

scss/module/: como o próprio nome diz, contém os arquivos parciais de cada módulo. A nomenclatura dos arquivos deste diretório estão quase 1 pra 1 em relação aos nomes dos módulos do Magento. Quase porque, por exemplo, o arquivo _product-list.scss contém os estilos do módulos Mage_Catalog e Mage_CatalogSearch.

scss/vendor/: este diretório é destinado a CSS’s de bibliotecas que você instala ou de módulos de terceiros. Como por exemplo o _normalize.scss que normaliza como os navegadores renderizam os elementos html.


“Basicamente” este é o entendimento da pasta skin do tema RWD. E se acostumar com essa super modularização não é uma tarefa simples.

Uma opinião pessoal: o Magento não fugindo de seu framework altamente modularizado não poderia fazer diferente com uma ferramenta desta em suas mãos, né? rsrs

Logo em seguida vou fazer a parte 2 deste post, desta vez pra dar algumas dicas e dizer o que aprendi usando Compass com o Magento. Até lá!

Referência: Magento CE 1.9 and EE 1.14 Responsive Web Design Developer’s Guide

Publicado por

Vanessa Me Tonini

Magento Front End Certified Developer, trabalha com Magento desde 2010. É desenvolvedora front-end desde 2007. Hoje com foco em metodologias ágeis, também atuando como consultora Agile Coach.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *