1
00:00:03,290 --> 00:00:09,780
É hora de passar para o próximo exercício, chamado Exercício: Menos.

2
00:00:09,780 --> 00:00:12,860
Algo que você deseja que seu médico

3
00:00:12,860 --> 00:00:16,380
lhe diga quando você visitá-lo na próxima vez.

4
00:00:16,380 --> 00:00:25,515
No entanto, vamos examinar menos em mais detalhes agora para entender como podemos definir

5
00:00:25,515 --> 00:00:31,830
classes CSS usando a sintaxe menos pré-processador e, em seguida,

6
00:00:31,830 --> 00:00:38,725
gerar automaticamente as classes CSS correspondentes de nossas classes menos.

7
00:00:38,725 --> 00:00:42,630
Para começar, vamos para o

8
00:00:42,630 --> 00:00:51,865
nosso projeto no Editor de Texto e, em seguida, dentro da pasta CSS,

9
00:00:51,865 --> 00:00:58,750
vou renomear este arquivo styles.css como styles-old.css.

10
00:00:58,750 --> 00:01:03,870
Vou salvar minha versão atual do

11
00:01:03,870 --> 00:01:08,685
arquivo styles.css porque agora eles vão escrever menos código

12
00:01:08,685 --> 00:01:13,200
e código SCSS e, em seguida, gerar automaticamente o

13
00:01:13,200 --> 00:01:19,165
arquivo styles.css compilando essas linguagens de pré-processador CSS.

14
00:01:19,165 --> 00:01:23,300
Depois de fazer isso, em seguida, na minha pasta CSS,

15
00:01:23,300 --> 00:01:31,280
vamos criar um novo arquivo chamado styles.less.

16
00:01:32,070 --> 00:01:37,290
E aqui dentro, vou definir o meu código menos.

17
00:01:37,290 --> 00:01:41,800
Vamos primeiro definir algumas variáveis menos.

18
00:01:41,800 --> 00:01:52,420
Eu vou dizer, It-cinza: ddd e assim por diante.

19
00:01:52,420 --> 00:01:57,980
Você pode ver que eu adicionei em mais algumas variáveis menos aqui.

20
00:01:57,980 --> 00:02:02,310
Então, eu defini fundo escuro para ser o primeiro valor,

21
00:02:02,310 --> 00:02:05,850
luz de fundo e fundo pálido e também

22
00:02:05,850 --> 00:02:11,235
mais uma variável chamada carrossel item-altura como 300 pixels.

23
00:02:11,235 --> 00:02:17,305
Eu vou fazer uso dessas variáveis quando eu definir minhas classes CSS mais tarde.

24
00:02:17,305 --> 00:02:22,995
Deixe-me agora adicionar um Mixin para o

25
00:02:22,995 --> 00:02:31,130
meu arquivo menos chamado zero-margin e eu vou definir pad-up-dn

26
00:02:41,320 --> 00:02:48,760
e pad-esquerda-direita,

27
00:02:48,760 --> 00:02:55,725
0px sendo o valor padrão e, em seguida, aqui,

28
00:02:55,725 --> 00:03:01,620
eu definir margem: 0px auto,

29
00:03:01,620 --> 00:03:11,520
preenchimento: pat-up-dn

30
00:03:11,520 --> 00:03:14,460
e pad-esquerda-direita.

31
00:03:14,460 --> 00:03:20,180
Então, com isso, eu defini o Mixin que eu vou

32
00:03:20,180 --> 00:03:25,785
fazer uso de em minhas classes CSS que vamos definir mais tarde.

33
00:03:25,785 --> 00:03:31,265
E isso carrega dois parâmetros pad-up-dn e pad-esquerda-direita.

34
00:03:31,265 --> 00:03:39,740
Em seguida, vou adicionar em mais algumas classes CSS então eu começar

35
00:03:39,740 --> 00:03:50,435
com linha cabeçalho e definir isso como zero margem.

36
00:03:50,435 --> 00:03:57,560
Deixe-me adicionar mais algumas classes CSS e, em seguida, voltar para ter um olhar para eles.

37
00:03:57,560 --> 00:04:01,170
Aqui, eu defini mais uma classe CSS

38
00:04:01,170 --> 00:04:06,480
usando o Mixin de margem zero com os parâmetros 50 pixel e 0 pixel,

39
00:04:06,480 --> 00:04:10,790
um rodapé onde eu definir a cor de fundo usando

40
00:04:10,790 --> 00:04:15,660
a variável que definiu anteriormente como

41
00:04:15,660 --> 00:04:19,940
background-pálido e, em seguida, jumbotron com

42
00:04:19,940 --> 00:04:25,885
o Mixin de margem zero e o cor de fundo definida como background-light,

43
00:04:25,885 --> 00:04:30,200
e alguns desses outros que são classes CSS padrão,

44
00:04:30,200 --> 00:04:34,610
que eu incluí lá porque eu vou fazer uso deles na

45
00:04:34,610 --> 00:04:38,010
minha página web e, em seguida, você tem

46
00:04:38,010 --> 00:04:42,850
navbar-escuro para o qual a cor de fundo eu defini nós background-dark.

47
00:04:42,850 --> 00:04:46,980
E o conteúdo da guia para o qual novamente você me vê

48
00:04:46,980 --> 00:04:51,820
usando a variável cinza claro para a cor da borda aqui.

49
00:04:51,820 --> 00:04:58,700
Em seguida, eu adiciono na classe carrossel aqui para o qual eu

50
00:04:58,700 --> 00:05:06,010
defino o fundo como background-dark aqui e, em seguida,

51
00:05:06,010 --> 00:05:10,540
eu defino esse carrossel item.

52
00:05:10,540 --> 00:05:18,225
Nota, como eu defino isso como um item aninhado dentro do meu carrossel e para o item carrossel,

53
00:05:18,225 --> 00:05:24,225
eu defino a altura como carrossel-item-height aqui,

54
00:05:24,225 --> 00:05:28,965
que é uma variável que eu defini anteriormente e lá dentro,

55
00:05:28,965 --> 00:05:31,005
eu defino a imagem,

56
00:05:31,005 --> 00:05:36,635
que é mais uma vez um item aninhado dentro do carrossel item e em seguida, para a imagem,

57
00:05:36,635 --> 00:05:40,010
vou definir algumas propriedades CSS em seguida.

58
00:05:40,010 --> 00:05:42,650
Como você pode ver,

59
00:05:42,650 --> 00:05:46,200
eu defini algumas propriedades para a imagem.

60
00:05:46,200 --> 00:05:50,950
Aqui, você vê o uso de classes aninhadas aqui,

61
00:05:50,950 --> 00:05:55,305
então você tem carrossel e dentro que eu tenho um carrossel item e dentro disso,

62
00:05:55,305 --> 00:05:57,145
uma imagem definida aqui.

63
00:05:57,145 --> 00:05:58,945
Finalmente, na parte inferior,

64
00:05:58,945 --> 00:06:02,075
eu adiciono na classe carouselButton,

65
00:06:02,075 --> 00:06:07,605
que é usado para especificar o carouselButton.

66
00:06:07,605 --> 00:06:14,935
Com essas alterações no meu arquivo styles.less adicionando em todas as classes menos aqui,

67
00:06:14,935 --> 00:06:16,465
deixe-me salvar as alterações.

68
00:06:16,465 --> 00:06:23,230
Agora, eu quero ser capaz de converter automaticamente isso em seu arquivo CSS correspondente.

69
00:06:23,230 --> 00:06:28,875
Para converter automaticamente meu arquivo menos em seu arquivo CSS correspondente,

70
00:06:28,875 --> 00:06:32,660
eu vou fazer uso de um módulo de nó chamado como menos.

71
00:06:32,660 --> 00:06:35,015
Para instalar isso no prompt,

72
00:06:35,015 --> 00:06:41,085
eu digite sudo npm install menos g menos.

73
00:06:41,085 --> 00:06:47,150
Eu instalo isso como um módulo de nó global.

74
00:06:47,150 --> 00:06:54,555
E uma vez que é instalado,

75
00:06:54,555 --> 00:07:01,985
em seguida, ele vai disponibilizar um compilador menos chamado como lessc no prompt de comando.

76
00:07:01,985 --> 00:07:04,570
Se você estiver executando isso em um computador Windows,

77
00:07:04,570 --> 00:07:06,130
você não precisa fazer sudo,

78
00:07:06,130 --> 00:07:09,900
como você provavelmente já se lembra.

79
00:07:09,900 --> 00:07:14,565
Agora que temos instalado o compilador lessc,

80
00:07:14,565 --> 00:07:21,010
eu vou compilar meu menos código em seu código CSS correspondente.

81
00:07:21,010 --> 00:07:26,290
Para fazer isso, deixe-me ir para a pasta CSS e, em seguida, aqui,

82
00:07:26,290 --> 00:07:29,650
você verá que você tem o arquivo styles.less.

83
00:07:29,650 --> 00:07:38,909
No prompt, digite lessc styles.less styles.css,

84
00:07:38,909 --> 00:07:43,010
e uma vez que isso conclua a compilação,

85
00:07:43,010 --> 00:07:45,580
você terá o arquivo CSS correspondente.

86
00:07:45,580 --> 00:07:47,580
Então, como você vê agora,

87
00:07:47,580 --> 00:07:53,565
você tem menos código sendo convertido no código CSS correspondente.

88
00:07:53,565 --> 00:07:59,310
Olhando para o código CSS gerado a partir do código menos,

89
00:07:59,310 --> 00:08:02,910
você veria que este código parece praticamente o

90
00:08:02,910 --> 00:08:08,075
mesmo que o que definimos em nosso arquivo CSS original.

91
00:08:08,075 --> 00:08:11,270
Com isso, completamos este exercício.

92
00:08:11,270 --> 00:08:15,515
Neste exercício, aprendemos a escrever

93
00:08:15,515 --> 00:08:21,525
menos código e depois convertê-lo automaticamente no código CSS correspondente.

94
00:08:21,525 --> 00:08:26,155
Neste ponto, você pode querer salvar as alterações em

95
00:08:26,155 --> 00:08:32,410
seu repositório Git com a mensagem Exercício: Less.