Tutorial: Criando um Componente com Sass em 10 minutos

codepen-message-box
codepen-message-box

Os desenvolvedores de hoje reconhecem que, ao começar um projeto web precisamos ter o máximo possível de código reaproveitável, não importa se é HTML, CSS, Javascript, Ruby ou PHP, Java, .NET, enfim precisamos ter coleções ou componentes prontos para usar, adiantando o processo de criação e nos dando mais tempo para outras tarefas.

Então vamos criar  um componente CSS para lidar com diferentes tipos de mensagens de alerta,onde é o caso perfeito para que possamos implementar alguns conceitos de Sass (Syntactically Awesome StyleSheets)

Definindo o HTML

Você pode utilizar qualquer elemento HTML que trabalhe como bloco(block), uma div,section,article.. trabalharemos com um paragráfo.

<p class="message-info">Information</p>
<p class="message-warning">Warning</p>
<p class="message-alert">Alert</p>
<p class="message-success">Success</p>

Definindo as cores

Vamos definir quatro tipo de cores para as seguintes mensagens: Info, Alert, Warning e Success

  • Azul para Info
  • Amarelo para o Alert
  • Vermelho para o Warning
  • Verde para o Success

Base dos Alertas

Todas as mensagens irão compartilhar estilos comuns, como margens, padding, texts e provavelmente alguns estilos tipográficos. No final, os estilos só serão relacionados com as cores que representam os diferentes alertas.

Sass tem algo interessante que podemos usar, e se chama placeholder, com ele podemos criar um padrão de código e extender seu comportamento para qualquer elemento. E só utilizar o % antes do nome do padrão(placeholder).

Então faremos o seguinte:

%expand{
  position: relative;
  width: 100%;
  padding: .6em;
  margin-bottom: .5em;
  text-align: center;
  border-style: solid;
  border-width: 0px 1px 4px 1px;
}

No código acima temos um padrão para o box que receberá o estilo, perceba que não fazemos nada de tão interessante. Temos estilos clássicos para se manter algo simples. Somente o border-width onde definimos que terá 4px na parte de baixo e 1px para os lados.

Depois nos vamos extender o %expand para um @mixin, neste momento que definiremos as cores para border, background e color.

Neste mixin teremos um parâmetro $color, que será a cor base para trabalhar dentro do box.
Ficará da seguinte forma:

@mixin message($color){
  @extend %expand; //padrão
  color: $color;
  background: lighten($color,35%);
  border-color: lighten($color, 30%);
  
  &:hover{
    color: darken($color, 25%);
    border-color: lighten($color, 0%);
  }
}

Até agora nada muito complicado não é mesmo? Trabalhamos com coisas simples como %placeholder{}, @mixin, lighten(), $vars e elementos do css que estamos acostumados.

Conheça o $map e o @each(Sass 3.3)

Vamos aproveitar para aprender sobre o $map(); que é um conceito muito antigo. Maps são como Arrays em PHP, objetos em Javascript e Hash em Ruby, ou seja, uma coleção de chaves e valores.

Vamos a uma rápido exemplo antes de implementá-lo em nosso componente.

$headers: (
   h1: 2em,
   h2: 1.5em,
   h3: 1.2em,
   h4: 1.1em,
   h5: 1em,
   h6: 0.9em
);

Isso seria nada mais nada menos que um $map();. Um Hash de chaves e valores das tag de cabeçalho HTML.

Para trabalhar com $map usamos o @each, da seguinte forma:

@each $type, $size in $headers{
  #{$type}{
     font-size: #{$size};
  }
}

E o resultado compilado será:

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

......

Agora que intendemos como funciona um $map() e o @each vamos implementar em nosso componente o sistema de adicão de cores e tipos de mensagens.

Para as cores vamos fazer um array, e utilizando o @each para interpolar e criar uma class para cada tipo de mensagem com sua respectiva cor, reaproveitando o código com um @include message($color); que extend nosso %expand, formando assim várias classes dinâmicamente, sem necessidade de criar elementos pais e filhos em nosso arquivo .scss

Olha que lindo….

$colors: (
  info    : #6A97B5,
  alert   : #916C27,
  warning : #AC4142,
  success : #154821
) !default;

@each $type, $color in $colors{
  .message-#{$type}{
     @include message($color);
  }
}

Veja o resultado?

O projeto está no Codepen, se quiser pode dar um fork lá 😉

See the Pen Component Sass Box Message by Thadeu Esteves (@tadeuesteves) on CodePen.

Viu como é fácil criar um componente com Sass(scss) em poucos minutos? Com Sass temos o poder de utilizar $vars, @if, @each, @for, %placeholder, @mixin, @function, inúmeras particularidades que ajudam em nosso dia-a-dia, nos fazendo assim melhores developers e melhores pessoas 😉

ps: artigo baseado em http://www.sitepoint.com/sass-component-10-minutes/

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s