Logo SatellaSoft



Modificando o Materialize com Sass

Aprenda a personalizar o Materialize a seu gosto


Ícone mulher Lucas Vendramini
Ícone data de publicação 03/03/2015
Ícone quantidade de visualização 4,044
Ícone bandeira do Brasil Português

No tutorial de hoje vou mostrar que apesar do Materialize ser personalizável com classes de cores e tamanhos diferentes do padrão, seus componentes ainda sim possuem uma certa limitação, veja como modificar o código do seu Materialize para que ele atenda suas necessidades de maneira completa:

O que é Sass?

Sass é o acrônimo de Syntactically Awesome StyleSheets, é uma linguagem de script pré-processadora de CSS. Fazendo uma analogia com o PHP, que é um pré-processador de HTML, assim é a relação do Sass com o CSS.

Como instalar o Sass:

Linux:

Você tem que ter pré-instalado o Ruby e o seu respectivo gerenciador de pacotes, o gem, no terminal digite os seguintes comandos dando as devidas permissões:

sudo apt-get install ruby
sudo apt-get install gem

Pra instalar o Sass:

sudo su -c "gem install sass"

Windows:

Baixe a última versão do Ruby conforme indicado no site do Sass, link aqui:

ruby_site

 

Execute o instalador:

ruby_instala

Instale o ruby normalmente seguindo os passos do instalador, em seguida abra o terminal do ruby do Windows:

cmd_ruby

No terminal que abrir digite:

gem install sass

A mensagem de sucesso da instalação é parecida com esta:

sass_instala

No artigo de apresentação, baixei a versão padrão do Materialize, vamos baixar agora a versão Sass com os componentes separados:

sass_download

O resto, os comandos são iguais no Linux só que no terminal do Ruby. Extraindo a pasta no nosso site de exemplo, a organização fica assim:

dir_sass

Pegando o slider de exemplo (slideshow do Materialize), nosso index.html é este:


 

Exemplo Materialize - SatellaSoft

  • This is our big Tagline!

    Here's our small slogan.
  • Left Aligned Caption

    Here's our small slogan.
  • Right Aligned Caption

    Here's our small slogan.
  • This is our big Tagline!

    Here's our small slogan.

Veja o resultado:

slider_exemplo

O resultado ficou bacana, mas e se o meu layout tiver combinação de cor diferente do indicador do slider e eu quiser trocar para azul? Não dá para fazer por CSS externo por ser uma classe dinâmica, a não ser que alterasse diretamente no CSS do materialize, o que não é recomendável pois o código é condensado.

Aí que entra o Sass! Com o Sass você consegue ter controle sobre todas as classes e componentes do framework, inclusive abrindo a possibilidade de criar a sua própria versão personalizada. Mas primeiro, vamos ver qual é a classe responsável pela cor do indicador verde do Slider:

No Mozilla Firefox, aperte F12 para exibir as ferramentas de desenvolvedor. Na aba Inspecionar, note que a classe active aparece justamente no elemento que estiver com o indicador verde:

inspetor_sass

Agora que sabemos a classe, vamos na pasta do nosso site >
materialize-src > sass > components
, abra o arquivo _slider.scss. Lembre-se que
você vai alterar sempre no componente que for mexer, no nosso caso o slider:

slider_scss

Gosto de comentar sempre o que já estava definido, assim se houver algum erro ou quiser voltar ao original, basta trocar, desta forma você também tem controle sobre o que modificou. Vamos compilar a nossa versão do Materialize agora:

Abra o terminal, entre na pasta do seu site usando cd e digite:

$sass --watch materialize-src/

A saída deve ser esta, assim que for exibida a mensagem de write, pode apertar CTRL+C para encerrar a compilação:

meu_site$ sass --watch materialize-src/
>>> Sass is watching for changes. Press Ctrl-C to stop.
      write materialize-src/sass/materialize.css
      write materialize-src/sass/materialize.css.map
[Listen warning]:
  Listen will be polling for changes. Learn more at https://github.com/guard/listen#polling-fallback.

Mudemos o link do materialize no HTML para o materialize compilado:

 link rel="stylesheet" type="text/css" href="materialize-src/sass/materialize.css" />

Salve o HTML, atualize a página, e veja a mágica:

slider_mod

A partir disso, podemos mudar também a cor dos outros indicadores:

indicador_change

Recompile e atualize a página:

slider_modificado

É isso aí, não é tão díficil de personalizar o seu Materialize, tente alterar outros componentes de acordo com o sua necessidade, até a próxima!




Sobre o autor


Lucas Vendramini

Nome: Lucas Vendramini

Site: http://www.purplelabs.com.br


Formado pelo Instituto Federal do Sudeste de Minas Gerais (IFSUDEST-MG) como Técnico em Informática. Atualmente trabalha no site www.purplelabs.com.br como programador Web e apoia projetos Open Source como o EasyJS e outros projetos independentes. Faz pesquisa também na área de comunicação em tempo real. Curioso e autodidata, sempre está a procura de novas tecnologias e projetos para trabalhar.


Comentários



É necessário estar autenticado para comentar, clique aqui para se registrar ou aqui para acessar a sua conta!