1 00:00:03,250 --> 00:00:06,680 Vamos agora passar para o próximo exercício, 2 00:00:06,680 --> 00:00:11,535 onde vamos usar a sintaxe SCSS para definir 3 00:00:11,535 --> 00:00:18,325 nossas classes SCSS e convertê-los automaticamente em suas classes CSS correspondentes. 4 00:00:18,325 --> 00:00:22,220 Vamos fazer exatamente o mesmo conjunto de etapas 5 00:00:22,220 --> 00:00:26,890 que fizemos para o último exercício que concluímos agora, 6 00:00:26,890 --> 00:00:31,470 mas usando a sintaxe SCSS. 7 00:00:31,470 --> 00:00:38,885 Para começar, em seu projeto na pasta CSS, 8 00:00:38,885 --> 00:00:47,180 vamos criar um novo arquivo e nomeá-lo como estilo iniciar SCSS. 9 00:00:47,180 --> 00:00:51,660 Agora neste arquivo vamos definir nossas classes SCSS e, em seguida, 10 00:00:51,660 --> 00:00:56,795 converter automaticamente isso em nossas classes CSS. 11 00:00:56,795 --> 00:01:01,350 Então lá dentro, vamos começar primeiro definindo as variáveis, 12 00:01:01,350 --> 00:01:05,110 então eu vou começar com cinza claro, 13 00:01:06,810 --> 00:01:11,820 eu agora adicionei mais algumas variáveis aqui novamente com 14 00:01:11,820 --> 00:01:16,940 os mesmos nomes que usamos no último exercício anterior, 15 00:01:16,940 --> 00:01:20,760 mas com a sintaxe SCSS para que 16 00:01:20,760 --> 00:01:25,630 todas as variáveis sejam precedidas com o sinal de dólar para defini-los como variáveis. 17 00:01:25,630 --> 00:01:27,750 Em seguida, definirá o mixin. 18 00:01:27,750 --> 00:01:43,888 Então, para o mixin, eu diria mixin zero-margin, pad-up-down, 19 00:01:43,888 --> 00:01:48,920 pad-esquerda-direita, 20 00:01:48,920 --> 00:01:54,920 e definimos os valores como antes. 21 00:02:17,930 --> 00:02:21,130 Agora que terminamos a definição do mixin, 22 00:02:21,130 --> 00:02:26,690 podemos fazer uso dele em nossas classes SCSS que definimos mais tarde. 23 00:02:27,480 --> 00:02:31,280 Vamos agora definir algumas classes SCSS, 24 00:02:31,280 --> 00:02:40,025 então eu vou definir o cabeçalho da linha que eu vou fazer uso 25 00:02:40,025 --> 00:02:44,740 do mixin margem zero 26 00:02:44,740 --> 00:02:52,900 com os valores zero pixel aqui. 27 00:02:53,620 --> 00:02:59,055 Vamos continuar a definir mais algumas classes que eles irão adicionar aqui, para que 28 00:02:59,055 --> 00:03:01,910 você possa ver que eu defini junto com 29 00:03:01,910 --> 00:03:05,290 o cabeçalho da linha e o conteúdo da linha onde eu usei 30 00:03:05,290 --> 00:03:12,730 os mixins e o rodapé e endereço Jumbotron e assim por diante, 31 00:03:12,730 --> 00:03:15,230 e você pode ver 32 00:03:15,230 --> 00:03:21,190 o uso das variáveis que temos definido anteriormente neste exemplo lá. 33 00:03:21,190 --> 00:03:27,875 O código obviamente está disponível nas instruções de exercício que seguem este vídeo. 34 00:03:27,875 --> 00:03:32,295 Em seguida, vamos adicionar se você classes de aninhamento. 35 00:03:32,295 --> 00:03:35,395 Assim como fizemos no último exercício, 36 00:03:35,395 --> 00:03:40,780 vamos adicionar na classe carrossel com o fundo definido para fundo escuro e, em seguida, 37 00:03:40,780 --> 00:03:42,345 dentro de onde vamos aninhar 38 00:03:42,345 --> 00:03:47,065 uma classe de item carrossel com a altura definida para altura do item carrossel, 39 00:03:47,065 --> 00:03:51,945 e, em seguida, outra classe interna cores imagem com algumas propriedades lá, 40 00:03:51,945 --> 00:03:56,945 e, em seguida, a classe de botão carrossel como definimos anteriormente. 41 00:03:56,945 --> 00:04:02,070 Então, com isso, fizemos as alterações em nossas classes SCSS, 42 00:04:02,070 --> 00:04:03,925 então vamos salvar as alterações. 43 00:04:03,925 --> 00:04:09,200 Agora, precisamos converter isso em seu arquivo CSS correspondente. 44 00:04:09,200 --> 00:04:13,835 Para converter nosso código-fonte SCSS no código CSS correspondente, 45 00:04:13,835 --> 00:04:19,395 vamos ter a ajuda de mais um módulo de nó chamado node-sass. 46 00:04:19,395 --> 00:04:24,485 Permite instalar o módulo do nó digitando npm 47 00:04:24,485 --> 00:04:33,845 install save dev—save dev e, em seguida, node-sass. 48 00:04:33,845 --> 00:04:37,690 Assim, vamos salvar este pacote node-sass 49 00:04:37,690 --> 00:04:42,020 como uma dependência de desenvolvimento em nosso arquivo package.json. 50 00:04:42,020 --> 00:04:44,160 Quando a instalação estiver concluída, 51 00:04:44,160 --> 00:04:49,090 vamos adicionar um script em nosso arquivo package.json. 52 00:04:49,090 --> 00:04:52,020 Indo para o nosso arquivo package.json, 53 00:04:52,020 --> 00:04:56,430 se você rolar para cima você veria que nas dependências dev, 54 00:04:56,430 --> 00:05:00,380 agora o nó sass também é adicionado às dependências dev. 55 00:05:00,380 --> 00:05:04,520 Agora vamos adicionar um script em nosso arquivo package.jsm, 56 00:05:04,520 --> 00:05:07,015 então metade direita deste slide, 57 00:05:07,015 --> 00:05:11,225 eu vou adicionar em um script chamado SCSS e então 58 00:05:11,225 --> 00:05:20,185 este script será node-sass -o CSS/, 59 00:05:20,185 --> 00:05:26,500 o que significa que a saída deste os arquivos convertidos estarão na pasta CSS, 60 00:05:26,500 --> 00:05:29,715 e a fonte aqui também estará em a pasta CSS. 61 00:05:29,715 --> 00:05:34,950 Assim, todos os arquivos com a extensão.scss serão 62 00:05:34,950 --> 00:05:41,960 convertidos e os arquivos corresponding.CSS serão gerados por este node-sass.module. 63 00:05:42,270 --> 00:05:47,450 Vamos salvar as alterações e, em seguida, vamos para o prompt de comando e, 64 00:05:47,450 --> 00:05:54,310 em seguida, digite npm run SCSS e isso vai cuidar de fazer nossa conversão. 65 00:05:54,310 --> 00:05:56,500 Indo para o prompt de comando, 66 00:05:56,500 --> 00:06:02,005 vamos digitar npm run SCSS e isso deve 67 00:06:02,005 --> 00:06:09,795 converter automaticamente todos os nossos arquivos SCSS nos arquivos CSS correspondentes. 68 00:06:09,795 --> 00:06:11,905 Indo para o nosso editor, 69 00:06:11,905 --> 00:06:16,525 agora você vê que há um arquivo styles.css que foi gerado. 70 00:06:16,525 --> 00:06:18,530 Olhando para o conteúdo deste arquivo, 71 00:06:18,530 --> 00:06:25,000 você verá que este código CSS que foi gerado a partir do nosso código SCSS é praticamente 72 00:06:25,000 --> 00:06:32,050 o mesmo que o código CSS original que nós mesmos escrevemos. 73 00:06:32,050 --> 00:06:35,875 Com isso, completamos este exercício. 74 00:06:35,875 --> 00:06:40,220 Neste exercício, vimos como podemos escrever 75 00:06:40,220 --> 00:06:48,195 código SCSS e depois convertê-lo automaticamente em seu código CSS correspondente. 76 00:06:48,195 --> 00:06:53,115 A razão pela qual examinamos isso em detalhes é porque o 77 00:06:53,115 --> 00:06:59,190 Bootstrap fornece seus arquivos de origem no formato SCSS. 78 00:06:59,190 --> 00:07:02,370 Se você visitar a página Bootstrap, 79 00:07:02,370 --> 00:07:11,795 você notará que ele diz que Bootstrap foi projetado usando o pré-processador Sass. 80 00:07:11,795 --> 00:07:19,745 Então, se você olhar para como isso é convertido de Sass 81 00:07:19,745 --> 00:07:23,475 e como você pode fazer sua própria personalização 82 00:07:23,475 --> 00:07:28,115 usando o código Bootstrap Sass você pode ir para a documentação, 83 00:07:28,115 --> 00:07:32,025 e então você veria em 84 00:07:32,025 --> 00:07:37,610 “Opções” você terá algumas opções de personalização sendo definidas aqui. 85 00:07:39,630 --> 00:07:43,800 Várias opções de personalização que você pode ver que 86 00:07:43,800 --> 00:07:49,780 essas variáveis são todas definidas usando a sintaxe Sass aqui, 87 00:07:49,780 --> 00:07:53,460 e também em “Ferramentas de construção”, 88 00:07:53,460 --> 00:08:00,455 ele irá explicar para você como você pode fazer sua própria personalização do Bootstrap. 89 00:08:00,455 --> 00:08:05,330 Agora, eu recomendo fortemente que você não tente isso até que você tenha 90 00:08:05,330 --> 00:08:10,515 experiência suficiente usando Bootstrap em sua vida diária. 91 00:08:10,515 --> 00:08:12,784 Isso completa nosso exercício. 92 00:08:12,784 --> 00:08:21,250 Este pode ser um bom momento para você fazer um bom commit com o exercício de mensagem SCSS.