MENOS CSS Tutorial Projetando uma barra de navegação de menu Slick

Este artigo faz parte do nosso "Série de tutoriais HTML5 / CSS3" - dedicado a ajudar a torná-lo um melhor designer e / ou desenvolvedor. Clique aqui para ver mais artigos da mesma série.

O mundo do design e desenvolvimento web está realmente evoluindo rapidamente. Podemos ver isso no grande número de coisas novas lançadas na comunidade (quase) todos os dias, seja Apps ou novos Frameworks que ajudam a tornar nosso trabalho cotidiano como web designers ou desenvolvedores mais eficazes e eficientes..

Uma que me chamou a atenção da evolução do web design hoje é o LESS, uma linguagem de folha de estilo programável que amplia a maneira como escrevemos a sintaxe CSS, combinando alguns conceitos de programação como Variáveis, Mixins, Funções e Operações..

Ele abre novos recursos para escrever a sintaxe CSS. Por exemplo, aplicando Mixins em CSS da mesma forma que fazemos em um programa, agora podemos armazenar estilos e valores padrão que podem ser aplicados em todo o arquivo sempre que possível. Com isso, não precisaremos escrever os mesmos estilos repetidamente.

Bem, vamos fazer alguns exercícios com o LESS para ter uma visão melhor do que ele tem a oferecer.

Projetando com MENOS

Neste tutorial vamos tentar projetar uma barra de navegação de menu que é inspirada na barra Apple.com. Como é apenas "inspirado" pelo produto original, note que o nosso produto tutorial final não será exatamente o mesmo que o original.

Para começar, você pode querer ler os seguintes recursos úteis primeiro. Eles explicam algumas implementações básicas da linguagem LESS, que serão úteis para você antes de se aprofundar neste tutorial.

• Menos é mais: Torne sua codificação CSS mais fácil com menos
• Escreva melhor CSS com menos
• Uma introdução a menos e comparação com Sass

Preparação

Primeiro de tudo, há algumas coisas essenciais que precisamos para este pequeno projeto, isto é:

1. MENOS editor de texto

Vamos precisar de um editor de texto para codificar o menu de navegação. No entanto, a maioria dos editores de texto disponíveis no mercado hoje (como o Dreamweaver, Notepad ++, InType, Sublime Text 2) ainda não suportaram .Menos extensões de arquivo por padrão, para que a sintaxe não seja bem destacada.

Assim, para o propósito deste tutorial, usaremos um editor de texto especial para o LESS chamado ChrunchApp. Podemos abrir e editar .Menos arquivos de extensão e compilá-lo em CSS estático usando este aplicativo. Como é um aplicativo do Adobe Air, ele pode ser instalado em todos os principais sistemas operacionais de desktop (Win, OSX e Linux).

Para o editor de HTML, você pode usar qualquer editor que você já esteja confortável usando agora. Eu pessoalmente gosto do Sublime Text 2.

2. Less.js

Em seguida, baixe a LESS JavaScript Library de seu site oficial, a versão atual é 1.2.1. Coloque-o dentro de sua pasta de prática para isso.

Em seguida, vincule o arquivo ao documento HTML.

3. Sem prefixo

Também utilizaremos alguns recursos CSS3 para realizar alguns efeitos no menu de navegação, que incluirão prefixos de fornecedores (-moz-, -o-, -webkit-) para que seja renderizado corretamente em diferentes navegadores. No entanto, eu pessoalmente não sou a favor de usar prefixos, pois ele vai inchar o arquivo CSS.

Por esse motivo, decidi usar uma biblioteca JavaScript sem prefix, criada por Lea Verou, que manipulará os prefixos do fornecedor automaticamente em segundo plano. Então, só precisaremos escrever a sintaxe oficial do W3C.

Baixe o arquivo e vincule-o ao arquivo HTML.

Tudo bem, estamos todos prontos; Agora vamos começar a estruturar a marcação HTML.

Marcação HTML

A navegação é bem simples. Ele terá cinco menus dentro de uma tag de lista não ordenada. Abra seu editor de HTML favorito e coloque a seguinte marcação:

Menos estilo

Nesta seção, começaremos a estilizar a navegação com a linguagem LESS. Para aqueles que são iniciantes em linguagem semelhante à programação, escrever a sintaxe CSS com o LESS pareceria um pouco estranho e inábil. Mas não se preocupe, uma vez que você tenha alguma prática, certamente será mais agradável do que a forma como escrevemos CSS puro (minha experiência também é um pouco viciante).

Vamos examinar o estilo de navegação da nossa fonte de inspiração.

Como podemos ver na imagem acima, a navegação Apple.com tem os seguintes 6 estilos comuns principais:

• sombra
• fronteira
• divisor
• gradientes
• efeito de foco
• texto

Vamos armazenar esses estilos e salvá-los dentro config.less como o estilo padrão Configuração; alguns designers também podem nomeá-lo lib.css isso significa Biblioteca. Ligue este ficheiro ao nosso documento.

Certifique-se de colocá-lo antes da biblioteca JavaScript LESS.

Definir Base Colorida com Variáveis

Nesta etapa, definiremos a base de cores de navegação usando Variáveis. A variável em LESS é declarada usando o @ símbolo.

@theme: # 555;

este @tema variável é a nossa cor padrão; vamos usá-lo de todas as maneiras possíveis para ajustar o esquema de cores perfeito e para que a composição de cores seja mais consistente.

Definir o estilo de sombra padrão com mixins

Uma das características que eu amo do LESS é o Mixins. É um conceito de programação que armazena vários estilos pré-definidos que, em LESS, podem ser herdados em classes ou ids mais tarde na folha de estilo..

.sombra box-shadow: 0 1px 2px 0 @theme; 

No código acima, não incluí a versão prefixada do Sombra da caixa propriedade, uma vez que a biblioteca sem prefixo as manipulará automaticamente. Além disso, a cor da sombra é herdada da cor da variável do tema.

Definir estilo de borda com mixins paramétricos

A barra de navegação precisará de uma cor de borda distinta com um canto ligeiramente arredondado. Podemos compilar o estilo de borda usando Mixins Paramétricos. Ele realmente tem a mesma funcionalidade que o Mixins, a única diferença é que ele também tem parâmetros variáveis, então os valores são mais ajustáveis.

.border (@radius: 3px) border-radius: @radius; border: 1px solid @theme - # 050505; 

No código acima, configuramos a borda padrão @raio para 3px e como mencionamos antes, esse valor pode ser alterado mais tarde.

Definir gradiente, divisor e estilo suspenso com operação

A operação é simplesmente uma linguagem de programação onde podemos aplicar fórmulas matemáticas como Adição, Divisão, Subtração e Multiplicação para obter um resultado desejado. Vamos dar uma olhada no seguinte código:

.divider border-style: solid; largura da borda: 0 1px 0 1px; border-color: transparent @theme - # 111 transparent @theme + # 333; 

No código acima subtraímos @tema variável por # 111, Desta forma, a saída de cor da borda esquerda seria um pouco mais escura. Enquanto a cor da borda direita é derivada da adição de @tema variável com cor hexadecimal # 333, a saída seria mais leve.

Nível de Esquema de Cores

Bem, para alguns de vocês que podem ser confundidos com fórmulas, vamos examinar o diagrama de esquema de cores abaixo para entender melhor:

O tom escuro máximo é # 000 (preto), enquanto o tom de luz máximo é #fff (branco) e nossa base de cor atual é # 555. Então, se quisermos que a base de cores seja 3 níveis mais escuros da corrente, podemos simplesmente subtraí-lo por # 333. O mesmo caminho também pode ser aplicado para clarear a cor.

Em seguida, vamos operar a cor gradiente.

.gradient background: gradiente linear (top, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect background: gradiente linear (top, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Definir estilo de texto com mixins de proteção

Pretendemos ter 2 cores na barra de navegação, ne cor escura e uma luz. Aplicamos duas declarações condicionais para o texto usando o Guard Mixins.

Primeiro, quando o texto recebe uma cor com luminosidade igual ou superior a 50%, o text-shadow deve ficar escuro, neste caso cor # 000000.

.textcolor (@txtcolor) quando (claridade (@txtcolor)> = 50%) cor: @txtcolor; text-shadow: 1px 1px 0px # 000000; 

Então, quando o texto é dado uma cor que a leveza é inferior a 50% do text-shadow vai ficar branco.

.textcolor (@txtcolor) quando (luminosidade (@txtcolor) 
Importando MENOS
 
Vamos agora criar outro .Menos arquivo nomeado styles.less e importar config.less afim disso:
 
@import "config.less";
 
Adicionar família de fontes
 
Para que a barra de navegação pareça mais atraente, incluiremos uma nova família de fontes usando @Tipo de letra regra. Surpreendentemente, @Tipo de letra regra, na verdade, já é suportado desde o IE6!
 
Desta vez vamos usar a fonte Asap. Faça o download da coleção de fontes do Font Squirrel. Em seguida, insira os seguintes estilos no nosso recém criado styles.less Arquivo.
 
@ font-face font-family: 'AsapRegular'; src: url ('fontes / Asap-Regular-webfont.eot'); src: url (formato 'fonts / Asap-Regular-webfont.eot' #iefix ') (' embedded-opentype '), formato url (' fonts / Asap-Regular-webfont.woff ') (' woff '), url (formato 'fonts / Asap-Regular-webfont.ttf') ('truetype'), formato url ('fonts / Asap-Regular-webfont.svg # AsapRegular') ('svg'); font-weight: normal; estilo de fonte: normal;  
 
Estilo do corpo com funções de cor
 
Agora, vamos dar uma cor de fundo para o corpo (que deve ser mais clara que a base de cores), além de especificar a família de fontes eo tamanho da fonte. Podemos abordar o efeito usando as funções Color:
 
O código a seguir irá clarear o fundo em 30%.
 
corpo background: clarear (@theme, 30%); font-family: AsapRegular, sans-serif; tamanho da fonte: 11pt; 
 
 
 
Estilizando a Navegação com Regra Aninhada
 
Em menos, somos capazes de aninhar estilos diretamente sob seu pai. Vamos dar uma olhada no código abaixo.
 
o nav tag que contém todos os elementos necessários para a navegação será dado os seguintes estilos.
 
nav margin: 50px auto 0; largura: 788px; altura: 45px; .fronteira; .sombra; 
 
Observe que, em vez de dar um monte de regras CSS novamente, eu só inseri .fronteira para dar o estilo de fronteira e .sombra para adicionar sombra. Em casos reais, esses conjuntos de classes podem ser reutilizados em outro elemento, sempre que necessário.
 
 
 
Em seguida, damos estilos para o ul dentro de nav ter zero preenchimento e margem. Não há muito tempo vamos abordar o estilo escrevendo algo assim:
 
nav … nav ul …
 
Não há nada de errado com esta abordagem, na verdade, eu costumava fazer isso todo o tempo e estou muito confortável com isso. No entanto, esse método, segundo muitos projetistas de CSS, é verboso e, em alguns casos, não é facilmente gerenciável..
 
Agora podemos fazer algo assim:
 
nav margin: 50px auto 0; largura: 788px; altura: 45px; .fronteira; .sombra; ul preenchimento: 0; margem: 0; 
 
 
 
E então o menu será exibido em uma linha usando display: inline propriedade.
 
nav margin: 50px auto 0; largura: 788px; altura: 45px; .fronteira; .sombra; ul preenchimento: 0; margem: 0; li display: inline; 
 
 
 
Na sintaxe abaixo nós especificamos o estilo de tag âncora do menu e adicionamos nossos estilos pré-definidos, são eles: .cor do texto, .divisor, .gradiente.
 
nav margin: 50px auto 0; largura: 788px; altura: 45px; .fronteira; .sombra; ul preenchimento: 0; margem: 0; li display: inline; um texto-decoração: nenhum; display: bloco inline; flutuar: esquerda; largura: 156px; altura: 45px; texto-alinhar: centro; altura da linha: 300%; .textcolor (# f2f2f2); // Você pode mudar esta linha .divider; .gradiente; 
 
No código acima, aplicamos a cor hexadecimal # f2f2f2 em que a leveza é considerada acima de 50%, então esperamos ver a sombra escurecer (automaticamente). O resto do código eu tenho certeza é bastante auto-explicativo.
 
 
 
No entanto, se olharmos para o resultado atual acima, cada um dos menus está tendo divisores, resultando na última seção transbordando para o fundo. Portanto, precisamos omitir o estilo de borda para o primeiro e o último filho da barra de navegação.
 
nav margin: 50px auto 0; largura: 788px; altura: 45px; .fronteira; .sombra; ul preenchimento: 0; margem: 0; li display: inline; um texto-decoração: nenhum; display: bloco inline; flutuar: esquerda; largura: 156px; altura: 45px; texto-alinhar: centro; altura da linha: 300%; .textcolor (# f2f2f2); // Você pode mudar esta linha .divider; .gradiente;  li: primeiro filho a border-left: none;  li: último filho a border-right: none; 
 
 
 
Estado do pairo
 
Para a última etapa, adicionaremos o efeito de foco. Em menos podemos adicionar pseudo-elemento tal como :flutuar usando E símbolo.
 
nav margin: 50px auto 0; largura: 788px; altura: 45px; .fronteira; .sombra; ul preenchimento: 0; margem: 0; li display: inline; um texto-decoração: nenhum; display: bloco inline; flutuar: esquerda; largura: 156px; altura: 45px; texto-alinhar: centro; altura da linha: 300%; .textcolor (# f2f2f2); // Você pode mudar esta linha .divider; .gradiente; &: hover .hovereffect;  li: primeiro filho a border-left: none;  li: último filho a border-right: none; 
 
 
 
Alterar o tema da cor
 
Aqui está a parte legal do LESS. Se quisermos alterar o tema geral das cores, podemos fazê-lo com menos alterações de linha do que o necessário em CSS puro.
 
Neste caso, alterarei a cor de navegação para ficar um pouco mais clara. Simplesmente mude as duas linhas seguintes.
 
@theme: #ccc; //Mude isso
 
.textcolor (# 555); //E isto
 
E aqui está o resultado.
 
 
 
Compile MENOS em CSS
 
Quando ainda estamos usando o LESS JavaScript, ele vai pegar o .Menos arquivo e traduzi-lo em CSS estático para que o navegador padrão possa interpretá-lo. Este é um trabalho duplo no lado do cliente, para não mencionar redundante e desperdiça largura de banda. O ponto principal do LESS está no fluxo de trabalho para simplificar nossa prática na compilação de CSS estático para ser mais dinâmico e programável.
 
Então, quando estamos prestes a colocar a barra de navegação ao vivo em um site, é importante compilar o arquivo LESS em CSS estático.
 
Clique no Crunch It! botão grande.
 
 
 
Salve o arquivo .less em nosso arquivo de exercícios, vincule-o ao documento HTML e desvincule .Menos E less.js arquivo do documento.
 
 .sombra box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; largura da borda: 0 1px 0 1px; border-color: transparent # 444444 transparência # 888888;  .gradient background: gradiente linear (top, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect background: gradiente linear (em cima, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fontes / Asap-Regular-webfont.eot'); src: url (formato 'fonts / Asap-Regular-webfont.eot' #iefix ') (' embedded-opentype '), formato url (' fonts / Asap-Regular-webfont.woff ') (' woff '), url (formato 'fonts / Asap-Regular-webfont.ttf') ('truetype'), formato url ('fonts / Asap-Regular-webfont.svg # AsapRegular') ('svg'); font-weight: normal; estilo de fonte: normal; corpo fundo: # a2a2a2; font-family: AsapRegular, sans-serif; tamanho da fonte: 11pt;  nav margin: 50px auto 0; largura: 788px; altura: 45px; raio de fronteira: 3px; borda: 1px sólido # 505050; box-shadow: 0 1px 2px 0 # 555555;  nav ul preenchimento: 0; margem: 0;  nav ul li display: inline;  nav ul li a decoração de texto: nenhuma; display: bloco inline; flutuar: esquerda; largura: 156px; altura: 45px; texto-alinhar: centro; altura da linha: 300%; cor: # f2f2f2; text-shadow: 1px 1px 0px # 000000; estilo de borda: sólido; largura da borda: 0 1px 0 1px; border-color: transparent # 444444 transparência # 888888; plano de fundo: gradiente linear (superior, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover fundo: gradiente linear (em cima, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: primeiro filho a border-left: none;  nav ul li: último filho a border-right: nenhum;  
 
Vamos dar uma olhada no resultado mais uma vez.
 
 
 
E nós terminamos, por favor sinta-se livre para experimentar.
 
Conclusão
 
Nós aprendemos muitas coisas sobre a linguagem LESS hoje, como:
 

• Variáveis.
• Mixins
• Mixins paramétricos
• Operações
• Mixins Guardados
• E regras aninhadas

Embora haja muitas coisas que podem ser abordadas e muitas possibilidades a serem mostradas e explicadas, esperamos que você tenha gostado deste tutorial básico.

• Demonstração
• Fonte de download