1
00:00:00,000 --> 00:00:04,466
[MÚSICA]

2
00:00:04,466 --> 00:00:08,813
Esta lição em particular trata de pré-processadores CSS,

3
00:00:08,813 --> 00:00:11,880
em particular Less e Sass.

4
00:00:11,880 --> 00:00:17,420
Agora, obviamente, esses tópicos têm mais a ver com CSS e

5
00:00:17,420 --> 00:00:22,680
definição de classes CSS, mas seria inapropriado

6
00:00:22,680 --> 00:00:26,940
para mim completar um curso Bootstrap sem

7
00:00:26,940 --> 00:00:31,010
aprofundar um pouco nos pré-processadores CSS.

8
00:00:31,010 --> 00:00:37,265
Simplesmente porque Bootstrap é construído usando Sass para sua fonte.

9
00:00:37,265 --> 00:00:41,970
Então, vamos examinar brevemente os pré-processadores CSS,

10
00:00:41,970 --> 00:00:47,682
o que eles são, como eles são úteis na definição de classes CSS,

11
00:00:47,682 --> 00:00:51,166
e por que o Bootstrap faz uso deles.

12
00:00:52,972 --> 00:00:58,263
Como você provavelmente entende de sua experiência anterior com CSS,

13
00:00:58,263 --> 00:01:00,997
CSS é ótimo para definir estilos e

14
00:01:00,997 --> 00:01:06,325
aplicar repetidamente esses estilos a vários elementos HTML.

15
00:01:06,325 --> 00:01:11,940
E é assim que usamos CSS quando definimos nossas páginas web.

16
00:01:11,940 --> 00:01:15,080
Mas quando você olha para o próprio código CSS,

17
00:01:15,080 --> 00:01:19,620
você começa a perceber rapidamente as limitações do CSS.

18
00:01:19,620 --> 00:01:23,660
Especialmente se você está vindo de um plano de fundo de programação, você percebe que

19
00:01:23,660 --> 00:01:29,342
CSS não tem o que você normalmente espera em uma linguagem de programação, como variáveis,

20
00:01:29,342 --> 00:01:34,610
aninhamento de seletores, variáveis, expressões e funções.

21
00:01:36,310 --> 00:01:40,580
Isso significa que escrever código CSS torna-se complicado, e

22
00:01:40,580 --> 00:01:44,370
manter o código CSS torna-se complicado por causa da

23
00:01:44,370 --> 00:01:49,550
falta da sintaxe tradicional de linguagem de programação.

24
00:01:49,550 --> 00:01:54,770
Agora, é aqui que os pré-processadores CSS vêm em nosso resgate.

25
00:01:55,800 --> 00:02:01,090
Existem vários pré-processadores CSS populares que tentam resolver algumas

26
00:02:01,090 --> 00:02:07,290
das deficiências do CSS, suportando muitos desses recursos.

27
00:02:07,290 --> 00:02:13,000
Dois em particular que é de interesse para nós são Less e Sass.

28
00:02:14,840 --> 00:02:19,940
Analisaremos esses dois com mais detalhes nesta lição.

29
00:02:19,940 --> 00:02:24,744
Agora, quando você define suas classes CSS usando uma

30
00:02:24,744 --> 00:02:29,760
dessas linguagens de pré-processador como Less ou

31
00:02:29,760 --> 00:02:34,990
Sass, então eles eventualmente têm que ser convertidos em CSS,

32
00:02:34,990 --> 00:02:39,696
mas isso pode ser feito automaticamente antes que o CSS seja usado em sua página web.

33
00:02:39,696 --> 00:02:44,840
O que essas linguagens de pré-processamento nos trazem é

34
00:02:44,840 --> 00:02:51,580
mais sintaxe de linguagem de programação, como veremos nos próximos slides.

35
00:02:51,580 --> 00:02:53,620
Vamos examinar Less e Sass brevemente.

36
00:02:54,990 --> 00:03:00,890
Em particular, a razão para darmos uma olhada nisso é porque o próprio Bootstrap

37
00:03:00,890 --> 00:03:08,540
usa Sass para definir sua fonte para suas classes CSS.

38
00:03:08,540 --> 00:03:12,980
E assim, se você entrar em personalização Bootstrap,

39
00:03:12,980 --> 00:03:16,230
então você teria que trabalhar com código Sass.

40
00:03:16,230 --> 00:03:21,402
Bootstrap 3, que era a versão anterior do Bootstrap, usou Less,

41
00:03:21,402 --> 00:03:26,260
e, portanto, eu pensei que seria uma coisa apropriada para cobrir tanto Less quanto

42
00:03:26,260 --> 00:03:32,330
Sass, porque eles são praticamente semelhantes entre si

43
00:03:32,330 --> 00:03:39,960
em termos de suas capacidades e a forma como a sintaxe é definida.

44
00:03:39,960 --> 00:03:45,630
Os recursos típicos que os pré-processadores CSS trazem é o suporte para

45
00:03:45,630 --> 00:03:53,340
variáveis, seletores de aninhamento, expressões, funções e mixins.

46
00:03:53,340 --> 00:03:59,580
Então vamos olhar para alguns deles com alguns exemplos nos próximos slides.

47
00:03:59,580 --> 00:04:02,270
A primeira coisa que veremos são variáveis.

48
00:04:02,270 --> 00:04:05,310
Agora, em muitas classes CSS que você define,

49
00:04:05,310 --> 00:04:11,540
você pode ter algum uso repetido de determinadas quantidades.

50
00:04:11,540 --> 00:04:16,600
Pode valer a pena se você definir algumas variáveis que

51
00:04:16,600 --> 00:04:21,590
contêm essas quantidades e usar essas variáveis na definição de suas classes CSS.

52
00:04:21,590 --> 00:04:24,240
Então é aí que as variáveis vêm em seu resgate.

53
00:04:24,240 --> 00:04:29,720
Aqui, vamos olhar para ambos os códigos Less e Scs.

54
00:04:29,720 --> 00:04:34,090
Scs é uma versão do Sass,

55
00:04:34,090 --> 00:04:40,670
versão mais popular da sintaxe Sass, então é por isso que eu me concentrar em Scs aqui.

56
00:04:40,670 --> 00:04:43,420
Então, se você definir variáveis em Menos,

57
00:04:43,420 --> 00:04:47,610
você irá prosseguir o nome da variável com um sinal @.

58
00:04:47,610 --> 00:04:55,720
No caso de Scs, você usará um cifrão antes do nome da variável.

59
00:04:55,720 --> 00:04:57,340
E uma vez que você definir essas variáveis,

60
00:04:57,340 --> 00:05:01,750
você pode então usar essas variáveis quando você definir as classes.

61
00:05:01,750 --> 00:05:06,700
Como você vê no exemplo, onde definimos o navbar-inverso como fundo,

62
00:05:06,700 --> 00:05:11,410
ou a altura do item carrossel como variáveis.

63
00:05:11,410 --> 00:05:16,350
Agora, a vantagem de definir variáveis no início de sua classe CSS

64
00:05:16,350 --> 00:05:21,400
é que há um único ponto onde você pode atualizar um valor, e

65
00:05:21,400 --> 00:05:27,390
ele irá atualizar automaticamente todas as classes CSS que usam essa variável.

66
00:05:27,390 --> 00:05:31,080
Normalmente, a forma como usamos variáveis em linguagens de programação.

67
00:05:32,110 --> 00:05:38,340
Variáveis nas linguagens de pré-processador CSS também podem ter seu próprio escopo.

68
00:05:39,650 --> 00:05:44,510
Muitas vezes, quando você define classes CSS, especialmente quando você

69
00:05:44,510 --> 00:05:49,760
tem que definir classes que estão aninhadas dentro de outras classes

70
00:05:49,760 --> 00:05:53,330
, então, muito em breve seu código CSS fica muito complicado.

71
00:05:53,330 --> 00:05:58,370
Então é aqui que o aninhamento é suportado por seus pré-processadores CSS.

72
00:05:58,370 --> 00:06:02,380
Então, como você pode ver, você pode definir, por exemplo, uma classe de carrossel, e

73
00:06:02,380 --> 00:06:05,876
dentro de uma classe de carrossel, você pode definir uma classe de item de carrossel.

74
00:06:05,876 --> 00:06:11,900
E da mesma forma, a subclasse de imagem dentro da classe de item de carrossel.

75
00:06:11,900 --> 00:06:18,161
Então aqui você pode ver que cada um deles está aninhado dentro de uma classe anterior.

76
00:06:19,440 --> 00:06:25,410
Com variáveis, você pode manter um valor de cada vez em uma variável.

77
00:06:25,410 --> 00:06:30,730
Suponha que você tenha um grupo de variáveis que resumiram juntos

78
00:06:30,730 --> 00:06:37,275
declarar um conjunto de declarações CSS, que é onde fazemos uso de mixins.

79
00:06:37,275 --> 00:06:42,910
Em Menos você define um mixin dando-lhe um nome,

80
00:06:42,910 --> 00:06:47,650
e em Sass você simplesmente precede isso com um @mixin na

81
00:06:47,650 --> 00:06:52,530
frente do nome da declaração mixin.

82
00:06:52,530 --> 00:06:58,560
E dentro de um mixin, você pode definir um monte de declarações CSS

83
00:06:58,560 --> 00:07:03,620
que podem ser reutilizadas para várias classes CSS.

84
00:07:03,620 --> 00:07:08,110
Como você vê neste exemplo aqui, definimos a margem zero

85
00:07:08,110 --> 00:07:12,480
como um mixin, tanto em Less quanto em Sass.

86
00:07:12,480 --> 00:07:18,120
Observe a variação menor na sintaxe em cada um desses casos.

87
00:07:18,120 --> 00:07:25,250
E, em seguida, você pode usar esse mixin na definição de classes CSS adicionais.

88
00:07:25,250 --> 00:07:30,620
Então aqui você pode ver que para o cabeçalho da linha, definimos a margem zero como

89
00:07:30,620 --> 00:07:35,480
um mixin no cabeçalho da linha, o que significa que todas

90
00:07:35,480 --> 00:07:40,780
essas propriedades da margem zero serão herdadas por essa classe de cabeçalho de linha.

91
00:07:40,780 --> 00:07:47,320
Os próprios mixins podem assumir parâmetros adicionais se desejar defini-los.

92
00:07:47,320 --> 00:07:49,970
Então, neste caso, estou definindo

93
00:07:49,970 --> 00:07:54,680
uma variação do mixin de margem zero que vimos no slide anterior.

94
00:07:54,680 --> 00:07:59,935
Aqui, este mixin de margem zero leva dois parâmetros,

95
00:07:59,935 --> 00:08:03,011
pad up down e pad esquerdo direito.

96
00:08:03,011 --> 00:08:08,840
E com Less, você pode até especificar o valor padrão para ele,

97
00:08:08,840 --> 00:08:15,276
mas com Scs você precisa especificar explicitamente os valores.

98
00:08:15,276 --> 00:08:20,871
Então, aqui estamos definindo duas propriedades CSS diferentes, a margem e o

99
00:08:20,871 --> 00:08:27,880
preenchimento, e então o próprio preenchimento usa os parâmetros para o nosso mixin lá.

100
00:08:27,880 --> 00:08:32,300
Então, nesse caso, você pode usar esses mixins como você vê

101
00:08:32,300 --> 00:08:36,997
nas duas classes CSS definidas abaixo do cabeçalho da linha e

102
00:08:36,997 --> 00:08:41,810
do conteúdo da linha especificando seus valores de parâmetro

103
00:08:41,810 --> 00:08:46,270
quando você incluir esse mixin em seu cluster CSS.

104
00:08:47,470 --> 00:08:52,570
Não só isso, você pode até executar operações matemáticas em

105
00:08:52,570 --> 00:08:58,120
variáveis predefinidas quando você usá-las dentro de suas classes CSS.

106
00:08:58,120 --> 00:09:03,470
Então aqui você pode ver que eu defini dois itens de carrossel diferentes

107
00:09:03,470 --> 00:09:05,740
com dois tamanhos diferentes, e assim

108
00:09:05,740 --> 00:09:10,060
você pode ver que as alturas de cada um deles são definidas de forma diferente.

109
00:09:10,060 --> 00:09:15,105
Em um caso eu estou usando a altura predefinida, em outro caso eu

110
00:09:15,105 --> 00:09:20,244
estou multiplicando essa altura e, em seguida, usá-lo para definir a

111
00:09:20,244 --> 00:09:25,230
propriedade height dentro do meu item carrossel para a classe item-grande.

112
00:09:25,230 --> 00:09:28,778
Portanto, este tipo de operações matemáticas em

113
00:09:28,778 --> 00:09:33,710
variáveis também é permitido em linguagens de pré-processador CSS.

114
00:09:35,060 --> 00:09:40,160
Outros recursos que os pré-processadores CSS incluem

115
00:09:40,160 --> 00:09:47,365
são funções que permitem definir funções matemáticas, Less strings.

116
00:09:47,365 --> 00:09:53,015
Você também pode fazer operações de cores e operações de mistura de cores usando essas funções

117
00:09:53,015 --> 00:09:57,915
e fazer uso delas quando você definir suas classes CSS.

118
00:09:57,915 --> 00:10:01,345
Isso é um pouco avançado, então eu não vou entrar em muitos detalhes lá.

119
00:10:03,470 --> 00:10:11,552
Além disso, você pode inserir classes predefinidas de pré-processador CSS em outras classes.

120
00:10:11,552 --> 00:10:16,680
Então, por exemplo, se você tiver uma classe Less conforme definido, e

121
00:10:16,680 --> 00:10:20,100
você pode inserir esse arquivo em outro arquivo Less.

122
00:10:20,100 --> 00:10:23,347
Da mesma forma, se você tiver definido arquivos Scs,

123
00:10:23,347 --> 00:10:29,210
poderá importá-los para outros arquivos Scs usando a operação de importação.

124
00:10:29,210 --> 00:10:32,670
A sintaxe é a mesma para Less e Sass.

125
00:10:33,890 --> 00:10:40,180
Agora que vimos algumas características das linguagens de pré-processador CSS, vamos

126
00:10:40,180 --> 00:10:45,520
agora examinar como podemos realmente fazer uso delas fazendo alguns exercícios.

127
00:10:45,520 --> 00:10:49,900
Primeiro, faremos um exercício baseado em Less.

128
00:10:49,900 --> 00:10:53,677
Depois seguiremos isso com um exercício baseado em Sass.

129
00:10:53,677 --> 00:10:57,099
[ MUSIC]