Trabalhando efetivamente com menos dicas e ferramentas
Em nosso tutorial anterior, aprendemos a usar o LESS de maneira prática, utilizando aplicativos como o ChrunchApp para compilar o código. Desta vez, vamos percorrer algumas dicas úteis que poderão aumentar nosso desempenho e produtividade ao compilar a sintaxe LESS. Vamos configurar nosso ambiente de trabalho / ambiente de trabalho ativando o realce de sintaxe para nosso editor atual, usando ferramentas de compilador automáticas e utilizando Mixins predefinidos e, em seguida, sincronizá-los todos juntos.
Bem, se você estiver pronto, vamos começar.
Aviso Legal: As dicas explicadas abaixo são derivadas do meu dia a dia como um web designer. Então, antes de continuarmos, quero delinear que as dicas podem se adequar a alguns designers e não a outros; como qualquer outra dica que você encontrar na web. No entanto, espero que você possa colher algo útil a partir das dicas a seguir.
1. Marcador de Código
Como mencionamos anteriormente, apresentamos você ao ChrunchApp. No entanto, este aplicativo pode não ser a preferência de qualquer web designer; porque cada designer tem seu próprio ambiente de trabalho, incluindo o editor de código de sua escolha.
Em vez de instalar outro editor de código, você ainda pode usar o atual e ativar o realce de sintaxe nele. Então, neste post, compartilharei algumas dicas para adicionar menos realce de código em dois editores de texto famosos: Texto Sublime 2 e Bloco de anotações++.
Texto Sublime 2
Este editor é atualmente a minha escolha preferida para me ajudar a compor códigos. Este aplicativo está disponível para Windows, Linux e OSX, então, seja qual for o seu sistema operacional, você ainda poderá seguir esta dica.
Agora, vamos baixá-lo de seu site oficial e experimentar este editor. Em seguida, leia as seguintes instruções para ativar o realce de cor MENOR nele.
Nota: Por favor, certifique-se de ter lido a licença antes de fazer o download, pois a versão gratuita destina-se apenas a avaliação.
Instalar o Console de Pacotes
Primeiro, abra seu Sublime Text 2 e exiba o console neste menu Ver> Mostrar a consola
Em seguida, copie e cole a seguinte linha de comando no console e pressione Enter para instalar o controle de pacote do wBond.net:
import urllib2, os; pf = "Package Control.sublime-package"; ipp = sublime.installed_packages_path (); os.makedirs (ipp) se não os.path.exists (ipp) else Nenhum; urllib2.install_opener (urllib2.build_opener (urllib2.ProxyHandler ())); open (os.path.join (ipp, pf), 'wb') .write (urllib2.urlopen ('http://sublime.wbond.net/'+pf.replace (",'% 20 ')). read ()); print 'Por favor reinicie o Sublime Text para concluir a instalação' 
este Console de Pacotes nos ajudará a instalar o pacote de destaque.
Instalando o pacote LESS-highlighting
Reinicie o Sublime Text 2 e mostre a Paleta de Comandos deste menu Ferramentas> Paleta de Comandos. Espere até que a lista de pacotes tenha sido carregada. Então, digite Instalar pacote pesquisar e carregar repositórios de pacotes.
Em seguida, procure o pacote LESS na lista de repositórios e pressione Enter.
Aguarde um minuto para que o Sublime Text 2 baixe e instale o pacote até que a seguinte notificação apareça na barra de status.
Vá para o menu Visualizar> Sintaxe, você deve ver menos na lista. Significa que o Sublime Text 2 está apoiando .Menos e sua sintaxe LESS também deve ter destaque de cor adequada agora.
Bloco de anotações++
O Notepad ++ é um editor de código gratuito e de código aberto, e possui muitos plugins úteis para estender sua funcionalidade. É também amplamente utilizado por muitos web designers / desenvolvedores, particularmente aqueles que trabalham com o sistema operacional Windows. Então, eu decido também incluir a dica para adicionar menos realce de texto para ele.
Instale o LESS-highlight no bloco de notas++
Ativar o realce de cor MENOR no Notepad ++ é muito fácil.
Primeiro baixe o pacote LESS para o Notepad ++ a partir deste link (userDefineLang_LESS.xml). Então vá para Ver> Diálogo Definido pelo Usuário.
A seguinte caixa pop-up abaixo será exibida. Clique no Importar… botão e localize o seu baixado .xml Arquivo. Em seguida, reinicie o bloco de notas++.
Abra seu arquivo .less e vá para o menu Idioma. Agora você deve ver menos incluído. Selecione-o para aplicar realce de cor na sua sintaxe LESS.
Mais recursos
Existem muitos outros editores no mercado. Então, aqui nós incluímos alguns links úteis para você se você não usar nenhum dos editores acima.
Adobe DreamWeaver
Sem dúvida, o Dreamweaver tem uma enorme base de usuários. Está disponível para Mac e Windows. Então, se você usar este editor, aqui é uma boa fonte para instalar o LESS em destaque no Adobe DreamWeaver..
Coda
Se você estiver usando o Mac, provavelmente conhece o Coda, este editor é um dos mais populares entre os usuários de Mac. E aqui está como você pode instalar o LESS no Coda.
Geany
É um dos editores de código mais populares entre os usuários do Linux. Alguns computadores no meu escritório que funcionam no Linux também usam o Geany. Então, se você usá-lo também, você pode incluir menos real, seguindo esta instrução em SuperUser.com
2. LESS Compiler
Ao contrário do ChrunchApp que possui um compilador LESS integrado, os outros editores não o terão por padrão. Embora existam algumas maneiras de incluí-lo, mas é bastante técnico para usuários em geral. Então, a melhor solução que tenho é fazer a compilação usando as seguintes ferramentas: WinLESS ou LESS.app. O WinLESS é um compilador projetado para Windows, enquanto o LESS.app é construído para o OSX.
Essas ferramentas podem converter nosso código LESS em um CSS estático automaticamente enquanto salvamos o arquivo e reportamos diretamente se houver um erro no código. Bem, deixe-me mostrar-lhe como esta ferramenta é:
Primeiro, gostaria de baixar o WinLESS e instalá-lo.
Clique no botão Adicionar pasta e localize o diretório em que você colocou o .Menos arquivos (suponho que você já tenha criado pelo menos um). Depois de adicionar um; O WinLESS irá escanear e encontrar todos .Menos arquivos e mostrar-lhe na lista.
Vá para o menu Arquivo> Configuração, e verifique se essas opções estão marcadas;
- Compilar arquivos automaticamente quando salvo
- Mostrar mensagem em compilação bem sucedida
Também podemos definir a pasta de saída, caso desejemos salvá-la em outro lugar. Mas, neste exemplo, deixaremos essa opção como está; o que significa que o arquivo de saída será salvo no mesmo diretório que o .Menos Arquivo.
Abre o teu .Menos arquivo do diretório adicionado, faça algumas alterações e salve-o.
O WinLESS irá notificá-lo quando o arquivo tiver sido compilado com sucesso .css ou se houver um erro nos códigos. Dessa forma, você pode verificar a saída .css diretamente, em vez de ter que esperar que os códigos sejam concluídos para compilá-la.
Se você estiver usando o Mac, você pode usar LESS.app que tem a mesma funcionalidade que WinLESS.
Mixins Preset
Nas atuais práticas modernas de web design, usaremos propriedades CSS3 como Gradient, Shadow ou Border Radius que se parecem com isso:
-webkit-border-radius: 3px; -moz-border-radius: 3px; raio de fronteira: 3px;
ou
background: -moz-linear-gradient (superior, # f0f9ff 0%, # a1dbff 100%); background: -webkit-linear-gradient (superior, # f0f9ff 0%, # a1dbff 100%); background: -o-linear-gradient (superior, # f0f9ff 0%, # a1dbff 100%); background: -ms-linear-gradient (superior, # f0f9ff 0%, # a1dbff 100%); background: gradiente linear (top, # f0f9ff 0%, # a1dbff 100%);
Em nosso tutorial anterior, fizemos alguns Mixins para simplificar essa sintaxe. Felizmente, algumas pessoas na comunidade de web design são realmente generosas o suficiente para poupar seu tempo para compilar esses Mixins úteis, para que não precisemos compilá-los do zero..
E um dos meus favoritos é Menos elementos que contém muitas regras predefinidas CSS3 úteis. Assim, agora escrevemos menos linhas de código a partir de prefixos tediosos de fornecedores.
Tudo bem, agora, vamos ver como todas essas dicas acima podem realmente ajudar.
Colocando Todos Juntos
Neste exemplo, vou criar um botão de link simples. Primeiro, gostaria de criar um novo documento HTML e colocar a seguinte marcação:
MENOS Clique em mim
Criar uma styles.less como nossa folha de estilo LESS principal, salve-a na mesma pasta com nosso documento HTML e adicione a pasta ao WinLESS.
Importar o elements.less nós baixamos antes de usar esta sintaxe:
@import "elements.less";
Agora, podemos usar qualquer Mixins fornecido a partir de elements.less como .gradiente, .arredondado, e .limitado. Tenho certeza que o nome Mixins é bastante auto-explicativo.
Em seguida, coloque as regras LESS abaixo, na sua folha de estilo. E salve mais uma vez
um display: inline-block; preenchimento: 10 px 20 px; cor: # 555; text-decoration: nenhum; .bw-gradiente (#eee, 240, 255); .arredondado; .ordenada; &: hover .bw-gradient (#eee, 255, 240);
Uma vez que nossa .Menos arquivo foi adicionado ao WinLESS, ele será automaticamente compilado em .css. Agora vamos ver os resultados.
Bem, não é tão ruim, não é, considerando que esse botão foi criado com menos linhas do que o necessário. E aqui está o CSS estático gerado:
um display: inline-block; preenchimento: 10 px 20 px; cor: # 555; text-decoration: nenhum; fundo: #eeeeee; background: -webkit-gradiente (linear, inferior esquerdo, superior esquerdo, cor-stop (0, # f0f0f0), cor-stop (1, #ffffff)); background: -ms-linear-gradient (inferior, # f0f0f0 0%, # f0f0f0 100%); background: -moz-linear-gradient (parte inferior do centro, # f0f0f0 0%, #ffffff 100%); -webkit-border-radius: 2px; -moz-border-radius: 2px; raio de fronteira: 2px; -moz-background-clip: preenchimento; -webkit-background-clip: caixa de preenchimento; clipe de fundo: caixa de preenchimento; border-top: sólido 1px #eeeeee; borda esquerda: sólido 1px #eeeeee; borda direita: sólido 1px #eeeeee; border-bottom: sólido 1px #eeeeee; a: hover background: #eeeeee; background: -webkit-gradient (linear, inferior esquerdo, superior esquerdo, cor-stop (0, #ffffff), cor-stop (1, # f0f0f0)); background: -ms-linear-gradient (inferior, #ffffff 0%, #ffffff 100%); background: -moz-linear-gradient (parte inferior do centro, #ffffff 0%, # f0f0f0 100%);
Em suma
Aqui está um breve resumo do que discutimos neste post:
- Ao ativar o destaque de sintaxe em nosso editor atual, não precisamos instalar um editor adicional apenas para compor a sintaxe LESS; isso pode economizar alguns espaços / memória no seu disco.
- Também não precisamos mais fazer o download e vincular a Biblioteca LESS.js à nossa seção de cabeçalho HTML, como fizemos em nosso último tutorial. Desta forma, o nosso documento HTML permanece limpo e limpo.
- Usar ferramentas de compilador como WinLESS e LESS.app pode gerar a saída CSS estática instantaneamente. Então, se há algo errado com a sintaxe, podemos examiná-la imediatamente.
- Mixins predefinidos como LESS Elements são nossos melhores amigos. Pode realmente economizar o nosso tempo ao compilar a tediosa propriedade CSS3.
.
