É hora de passar para o próximo exercício, chamado Exercício: Menos.
Algo que você deseja que seu médico
lhe diga quando você visitá-lo na próxima vez.
No entanto, vamos examinar menos em mais detalhes agora para entender como podemos definir
classes CSS usando a sintaxe menos pré-processador e, em seguida,
gerar automaticamente as classes CSS correspondentes de nossas classes menos.
Para começar, vamos para o
nosso projeto no Editor de Texto e, em seguida, dentro da pasta CSS,
vou renomear este arquivo styles.css como styles-old.css.
Vou salvar minha versão atual do
arquivo styles.css porque agora eles vão escrever menos código
e código SCSS e, em seguida, gerar automaticamente o
arquivo styles.css compilando essas linguagens de pré-processador CSS.
Depois de fazer isso, em seguida, na minha pasta CSS,
vamos criar um novo arquivo chamado styles.less.
E aqui dentro, vou definir o meu código menos.
Vamos primeiro definir algumas variáveis menos.
Eu vou dizer, It-cinza: ddd e assim por diante.
Você pode ver que eu adicionei em mais algumas variáveis menos aqui.
Então, eu defini fundo escuro para ser o primeiro valor,
luz de fundo e fundo pálido e também
mais uma variável chamada carrossel item-altura como 300 pixels.
Eu vou fazer uso dessas variáveis quando eu definir minhas classes CSS mais tarde.
Deixe-me agora adicionar um Mixin para o
meu arquivo menos chamado zero-margin e eu vou definir pad-up-dn
e pad-esquerda-direita,
0px sendo o valor padrão e, em seguida, aqui,
eu definir margem: 0px auto,
preenchimento: pat-up-dn
e pad-esquerda-direita.
Então, com isso, eu defini o Mixin que eu vou
fazer uso de em minhas classes CSS que vamos definir mais tarde.
E isso carrega dois parâmetros pad-up-dn e pad-esquerda-direita.
Em seguida, vou adicionar em mais algumas classes CSS então eu começar
com linha cabeçalho e definir isso como zero margem.
Deixe-me adicionar mais algumas classes CSS e, em seguida, voltar para ter um olhar para eles.
Aqui, eu defini mais uma classe CSS
usando o Mixin de margem zero com os parâmetros 50 pixel e 0 pixel,
um rodapé onde eu definir a cor de fundo usando
a variável que definiu anteriormente como
background-pálido e, em seguida, jumbotron com
o Mixin de margem zero e o cor de fundo definida como background-light,
e alguns desses outros que são classes CSS padrão,
que eu incluí lá porque eu vou fazer uso deles na
minha página web e, em seguida, você tem
navbar-escuro para o qual a cor de fundo eu defini nós background-dark.
E o conteúdo da guia para o qual novamente você me vê
usando a variável cinza claro para a cor da borda aqui.
Em seguida, eu adiciono na classe carrossel aqui para o qual eu
defino o fundo como background-dark aqui e, em seguida,
eu defino esse carrossel item.
Nota, como eu defino isso como um item aninhado dentro do meu carrossel e para o item carrossel,
eu defino a altura como carrossel-item-height aqui,
que é uma variável que eu defini anteriormente e lá dentro,
eu defino a imagem,
que é mais uma vez um item aninhado dentro do carrossel item e em seguida, para a imagem,
vou definir algumas propriedades CSS em seguida.
Como você pode ver,
eu defini algumas propriedades para a imagem.
Aqui, você vê o uso de classes aninhadas aqui,
então você tem carrossel e dentro que eu tenho um carrossel item e dentro disso,
uma imagem definida aqui.
Finalmente, na parte inferior,
eu adiciono na classe carouselButton,
que é usado para especificar o carouselButton.
Com essas alterações no meu arquivo styles.less adicionando em todas as classes menos aqui,
deixe-me salvar as alterações.
Agora, eu quero ser capaz de converter automaticamente isso em seu arquivo CSS correspondente.
Para converter automaticamente meu arquivo menos em seu arquivo CSS correspondente,
eu vou fazer uso de um módulo de nó chamado como menos.
Para instalar isso no prompt,
eu digite sudo npm install menos g menos.
Eu instalo isso como um módulo de nó global.
E uma vez que é instalado,
em seguida, ele vai disponibilizar um compilador menos chamado como lessc no prompt de comando.
Se você estiver executando isso em um computador Windows,
você não precisa fazer sudo,
como você provavelmente já se lembra.
Agora que temos instalado o compilador lessc,
eu vou compilar meu menos código em seu código CSS correspondente.
Para fazer isso, deixe-me ir para a pasta CSS e, em seguida, aqui,
você verá que você tem o arquivo styles.less.
No prompt, digite lessc styles.less styles.css,
e uma vez que isso conclua a compilação,
você terá o arquivo CSS correspondente.
Então, como você vê agora,
você tem menos código sendo convertido no código CSS correspondente.
Olhando para o código CSS gerado a partir do código menos,
você veria que este código parece praticamente o
mesmo que o que definimos em nosso arquivo CSS original.
Com isso, completamos este exercício.
Neste exercício, aprendemos a escrever
menos código e depois convertê-lo automaticamente no código CSS correspondente.
Neste ponto, você pode querer salvar as alterações em
seu repositório Git com a mensagem Exercício: Less.