Sass Tutorial Construindo um vCard online com Sass & Compass

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1.2345.678.9
 
Lorem ipsum dolor sente-se amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend em pellentesque quis, convallis sit amet tellus. Etiam e auctor arcu.
 
 
 
 
 
 
Facebook
 
 Twitter
 
Google+
 
Dribbble
 
 
 
 

Como você pode ver acima, as identidades sociais incluídas no 'social'A seção é estruturada dentro de elementos de lista para que possamos exibi-los facilmente lado a lado. Cada um deles recebe um nome de classe seguindo esta convenção social-facebook, social-twitter, social-google e assim por diante.

Configuração da bússola

Precisamos configurar um pouco a Compass removendo o comentário de algumas linhas config.rb arquivo, como segue:

 # Você pode selecionar o seu estilo de saída preferido aqui (pode ser substituído através da linha de comando): output_style =: expanded # Para ativar os caminhos relativos aos recursos através das funções auxiliares de bússola. Uncomment: relative_assets = true # Para desativar os comentários de depuração que exibem o local original de seus seletores. Uncomment: line_comments = false 

Se você não consegue encontrar config.rb arquivo, você provavelmente não executou este comando init bússola no seu diretório de projeto.

Importando Arquivos

Como estaremos usando o Compass, precisamos importá-lo usando;

 @import "compass"; 

E é minha preferência pessoal redefinir os estilos padrão dos navegadores para que a saída seja renderizada de forma mais consistente. Bússola, neste caso, tem um módulo Reset. Este módulo é baseado no reset do CSS de Eric Meyer e pode ser importado usando;

 @import "compass / reset"; 

No entanto, eu prefiro usar o Normalize que, felizmente também vem no formato Sass / Scss. Baixe o arquivo aqui, salve-o em sass diretório de trabalho e importá-lo em nossa folha de estilo.

 @import "normalizar"; 

Leitura recomendada: Revisando o nível de prioridade de estilo CSS

Variáveis

Certamente teremos alguns valores constantes na folha de estilo, assim, vamos armazená-los em variáveis ​​e estas duas variáveis ​​abaixo definirão a cor base do nosso vCard.

 $ base: #fff; $ escuro: escurecer ($ base, 10%); 

Enquanto o largura $ variável abaixo será a largura da nossa página; será também a base para a definição de outros tamanhos de elementos.

 largura $: 500px; $ space: $ width / 25; // = 20px 

E a $ space variável, como você pode ver, será o espaçamento padrão ou o tamanho da coluna em nosso vCard que neste exemplo seria 20 px;

A bússola também tem ajudantes para detectar o tamanho da imagem e faremos uso desse recurso em nosso perfil de imagem, como segue;

 $ img: image-width ("me.jpg") + (($ space / 4) * 2); 

O Extra Adição do (($ space / 4) * 2) no código acima, é calcular a largura total da imagem, incluindo a borda que irá enquadrar a imagem. Um quadro geralmente tem dois lados; parte superior e inferior / esquerda e direita, é por isso que multiplicamos o resultado de divisão por 2.

Herança do Seletor

Aparentemente existem alguns seletores em nossa folha de estilo que terão as mesmas regras de estilo. Para evitar a repetição em nosso código, precisaremos especificar esses estilos em primeiro lugar e herdá-los com o @ampliar directiva sempre que necessário. Este método, em Sass, é conhecido como Herança do Seletor, um recurso muito útil que está faltando em menos.

 .float-left float: esquerda;  .box-sizing @include box-sizing (caixa de borda);  

Estilos

Quando tudo o que é necessário foi configurado, então é hora de estilizar o nosso vCard, começando com uma cor de fundo para o nosso documento HTML;

 html height: 100%; background-color: $ base;  

vCard

Os estilos a seguir definem o wrapper vCard. Se você tem trabalhado com LESS anteriormente, esse código será familiar para você e de fácil digestão.

 .vcard largura: $ largura; margem: 50px auto; background-color: escurecer ($ base, 5%); borda: 1px sólido $ escuro; @include border-radius (3px); ul preenchimento: 0; margem: 0; li estilo de lista: nenhum;  

A largura do wrapper herda o valor de largura $ variável. A cor de fundo é mais escura por 5% a partir da cor base, enquanto a cor da borda será mais escura 10%. Esta coloração é obtida usando as funções de cor Sass.

O vCard também terá 3px raio de cantos arredondados que é conseguido usando Compass CSS3 Mixins; raio de borda (3px).

Seção Bio

Como observamos no início deste tutorial, o vCard pode ser dividido em duas seções. Esses estilos aninhados abaixo definirão a primeira seção que contém o perfil da imagem com alguns detalhes (nome, email e telefone).

 .bio borda inferior: 1px sólido $ escuro; preenchimento: $ space; @extend .box-sizing; img @extend .float-left; display: bloco; border: ($ space / 4) sólido #ffffff;  .detail @extend .float-left; @extend .box-sizing; cor: escurecer ($ base, 50%); margin: left: $ space; bottom: $ space / 2;  width: $ width - (($ space * 3) + $ img); li &: antes largura: $ espaço; altura: $ space; margin-right: $ space; font-family: "ModernPictogramsNormal";  & .name: antes de content: "f";  & .email: antes de content: "m";  & .phone: antes de content: "N";  

Há uma coisa do código acima que achamos que você precisa dar um aviso. A largura em .detalhe selector é especificado com esta equação $ width - (($ space * 3) + $ img);.

Esta equação é usada para calcular dinamicamente os detalhes largura subtraindo a largura do perfil da imagem e os espaços (preenchimento e margem) da largura total do vCard.

Seção Social

Os estilos abaixo são para a segunda seção no vCard. Na verdade, não há diferença com CSS simples aqui, apenas agora eles estão aninhados e alguns valores são definidos com variáveis.

 .social background-color: $ dark; largura: 100%; preenchimento: $ space; @extend .box-sizing; ul text-align: center; li display: inline-block; largura: 32px; altura: 32px; um texto-decoração: nenhum; display: bloco inline; largura: 100%; altura: 100%; recuo de texto: 100%; espaço branco: nowrap; estouro: oculto;  

Nesta seção, vamos exibir os ícones de mídia social usando a técnica do sprite de imagem, e o Compass tem um recurso para fazer esse trabalho mais rápido.

Primeiro de tudo, precisamos colocar nossos ícones em uma pasta especial - vamos nomear a pasta /social/, por exemplo. De volta à folha de estilo, concatene esses ícones com os seguintes @importar regra.

 @import "social / *. png"; 

o social/ acima referem-se à pasta onde armazenamos os ícones. Esta pasta deve estar aninhada na pasta de imagens. Agora, se dermos uma olhada em nossa pasta de imagem, devemos ver uma imagem de sprite gerada com caracteres aleatórios, como social-sc805f18607.png. Neste ponto, nada ainda não acontece no front-end, até aplicarmos os estilos com a seguinte linha.

 @include todos os sprites sociais; 

Resultado final

Finalmente, depois de todo o trabalho duro, podemos agora ver o resultado assim:

Caso pensemos que 500 px é muito largo mais tarde, só precisamos mudar o valor em largura $ variável - por exemplo, 350 px - o resto vai “magicamente” seja ajustado. Você também pode experimentar a variável de cor.

• Ver demonstração
• Fonte de download

Conclusão

Neste tutorial, mostramos como construir um simples vCard on-line com Sass e Compass; Este é apenas um exemplo, no entanto. Sass e Compass são realmente poderosos, mas às vezes não é necessário. Por exemplo, quando estamos trabalhando em um site com poucas páginas e provavelmente também precisaremos de menos linhas de estilos, usar o Sass e o Compass é considerado excessivo..

Este post fecha nossa série Sass e esperamos que você tenha gostado. Se você tem alguma dúvida sobre este assunto, não hesite em adicioná-lo na caixa de comentários abaixo.