Uma das coisas que CSS Não tem por padrão o uso de estruturas de estilo de programação onde podemos reutilizar o código de forma lógica, o máximo que podemos conseguir de forma padrão é criar classes e agrupar dentro dos rótulos o que queremos ser afetados estas mudanças.
Esta abordagem significa que no final do dia acabamos com folhas de estilo longas e, embora esse resultado não varie usando Less.js, se a forma como chegamos às ditas folhas mudar, isso graças ao Mixins e herança, onde podemos declarar e usar alguns componentes, para evitar ter que desenvolver manualmente as estruturas.
Requisitos1- Para realizar este tutorial vamos exigir algumas coisas com antecedência, precisamos ter uma pasta onde possamos armazenar nossos arquivos .menos Y .css, devemos ter permissões nele para poder fazer alterações, se necessário.
2- Temos que ter uma instalação funcional de Less.js, bem como todos os seus pré-requisitos, uma vez que são Node.js Y npm, para que possamos compilar nossas folhas de estilo geradas.
3- Finalmente, também precisaremos de um editor de texto para poder fazer o código, podemos usar Texto Sublime o Bloco de notas ++, embora o bloco de notas clássico também funcione para nós, tudo depende se queremos ajuda com o código ou funcionalidades avançadas.
Defina as propriedades CSS com um MixinUma das primeiras coisas que devemos saber sobre Mixins, é que são métodos que nos ajudam a estabelecer as propriedades CSS para o nosso projeto, de forma a nos ajudar a reutilizar o código e alcançar estilos mais consistentes. A particularidade de um Mixin é que ao compilar nosso código Menos Isso não é levado em consideração, no sentido de que uma folha de estilo Mixins não é gerada, isso é conseguido incluindo parênteses na hora de defini-los, uma vez que temos um Mixin devemos importar seu arquivo fonte e desta forma simplesmente seus valores são transferido para nossa folha principal que incluiremos em nossa página.
Criando nosso primeiro Mixin
Vamos criar um Mixin que nos permite estabelecer propriedade CSS para arredondar as bordas de um elemento em nosso HTML, para isso devemos seguir os seguintes passos:
1- Vamos criar em nossa pasta de projeto um arquivo chamado mixins.less, e dentro colocaremos o seguinte conteúdo:
. bordas arredondadas () {raio da borda: 7px; }2- Agora vamos criar um arquivo chamado project.less, é aqui que vamos estabelecer a forma como os diferentes estilos da nossa página serão aplicados HTML, para que possamos nos acostumar a trabalhar com Menos vamos criar várias regras CSS para que possamos ver como o MixinsVamos ver o código que devemos colocar neste arquivo.
@import "mixins.less"; @ header-background-color: blue; @ content-background-color: green; @ footer-background-color: red; cabeçalho {. bordas arredondadas (); background-color: @ header-background-color; cor: contraste (@ header-background-color); } p {. bordas arredondadas (); background-color: @ content-background-color; cor: contraste (@ content-background-color); } rodapé {. bordas arredondadas (); background-color: @ footer-background-color; cor: contraste (@ footer-background-color); }Como podemos ver, começamos importando o arquivo que geramos na etapa anterior, depois estabelecemos 3 variáveis às quais damos uma cor como valor, finalmente começamos a criar as classes para os elementos HTML, a primeira coisa que fazemos é chamar nossa função Bordas arredondadas(), e então atribuímos as cores dos elementos às variáveis.
3- Nesta etapa, vamos criar o arquivo HTML, que podemos chamar como quisermos, desde que tenha uma estrutura como a seguinte:
Mixins com Less La cabeceraComo podemos ver, simplesmente fizemos a inclusão do nosso arquivo .menos quanto ao .js que contém a ferramenta, optamos por esta opção para que não tenhamos que compilar, porém devemos lembrar que isso não deve ser aplicado na produção. No corpo do HTML Geramos os diferentes elementos que definimos no CSS para ver a aplicação dos estilos.O conteúdo
Rodapé
4- Finalmente, se quisermos ver o resultado, basta abrir nosso documento em um navegador como Raposa de fogo e para que possamos ver como está tudo, vamos ver na imagem a seguir o que temos:
Se formos um pouco além e vermos o código-fonte que o navegador interpreta, veremos como as diferentes variáveis e Mixin aplicado, foi substituído pelo código CSS, o que significa que mesmo que tenhamos escrito a propriedade apenas uma vez Menos coloca onde a correspondência corresponde, vejamos:
A herança dentro dos nossos estilos
Trabalhar com heranças é algo que nos ajuda e é pela razão que podemos criar elementos superiores que passam algumas propriedades aos seus elementos inferiores ou contidos, ou seja, existem características comuns que não teremos que repetir nos elementos que queremos para tê-los.
Como sempre, o objetivo de não repetir código é poupar trabalho e tempo, bem como reduzir erros e aumentar a manutenibilidade do nosso código graças à consistência e centralização dos seus recursos.
Uma das maneiras mais básicas, mas eficazes de trabalhar a herança é com elementos aninhados, digamos que temos uma seção HTML e dentro teremos vários elementos, se usarmos o CSS Clássico dizer que todos os elementos dessa seção possuem algumas propriedades mas são diferentes, seria necessário fazer pelo menos uma linha para cada estilo, vamos ver o que queremos dizer:
seção element1 {content1: xx; } seção element2 {content2: zz; }Como podemos ver, criamos mais código do que deveríamos, em vez disso, se usarmos herança e aninhamento em Menos poderíamos alcançar algo como o seguinte:
seção {element1 {content1: xx; } item2 {content2: zz; }}Como podemos ver, não só escrevemos menos, mas também a representação do que queremos alcançar é muito mais lógica, o que nos ajuda a entender e separar adequadamente os elementos que vamos usar em nossos estilos.
Criando estilos aninhados
Agora vamos aplicar o que acabamos de explicar no ponto anterior, devemos criar um arquivo .menos onde fazemos um estilo aninhado, para poupar trabalho e torná-lo mais lógico. Para realizar esta tarefa, devemos seguir os seguintes passos:
1- Vamos criar um arquivo.menos o que podemos chamar herança sem, é aqui que vamos criar os estilos aninhados, para entender isso vamos simplesmente ver o código que vamos colocar e, assim, o conceito chegará a nós de uma maneira melhor.
seção {h1 {font-size: 4em;} p {padding: 0 5px;}}Vemos que criamos um estilo para o elemento seção, e que tudo h1 ou p dentro desse elemento de contêiner, ele deve funcionar com as regras estabelecidas que aninhamos.
2- Agora devemos criar nosso arquivo HTML que vai se parecer muito com o exercício anterior, quais mudanças são os nomes dos arquivos a serem incluídos e a estrutura dentro do corpo, mas se vemos de uma forma abstrata, estamos falando sobre a mesma coisa, vamos olhar o código.
Herança em menosComo vemos simplesmente incluindo nosso arquivo Menos é que vamos gerar os estilos necessários, se vermos como fica no navegador obteremos algo como o seguinte:Nosso conteúdo
No entanto, se notarmos o que acontece com o CSS Quando for interpretado ou compilado, veremos que a forma aninhada que construímos não é respeitada, mas como o compilador faz essa forma não aninhada diretamente, não precisamos nos preocupar em ser assim, vamos ver o que o o código que nosso navegador vê se parece com:
Com isso podemos finalizar este tutorial, como vimos Menos não é só escrever CSS de outra forma, é tornar úteis essas diferenças, o que nos leva a economizar tempo, tornar os aplicativos mais amigáveis para nossa equipe de desenvolvimento e economizar esforços pensando mais logicamente e reutilizando componentes. A forma que tudo isso faz mais sentido para nós é que continuemos a praticar e aplicar esses exemplos em casos práticos e reais para que possamos nos acostumar com essa forma de trabalhar.
Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
