Vamos agora passar para o próximo exercício,
onde vamos usar a sintaxe SCSS para definir
nossas classes SCSS e convertê-los automaticamente em suas classes CSS correspondentes.
Vamos fazer exatamente o mesmo conjunto de etapas
que fizemos para o último exercício que concluímos agora,
mas usando a sintaxe SCSS.
Para começar, em seu projeto na pasta CSS,
vamos criar um novo arquivo e nomeá-lo como estilo iniciar SCSS.
Agora neste arquivo vamos definir nossas classes SCSS e, em seguida,
converter automaticamente isso em nossas classes CSS.
Então lá dentro, vamos começar primeiro definindo as variáveis,
então eu vou começar com cinza claro,
eu agora adicionei mais algumas variáveis aqui novamente com
os mesmos nomes que usamos no último exercício anterior,
mas com a sintaxe SCSS para que
todas as variáveis sejam precedidas com o sinal de dólar para defini-los como variáveis.
Em seguida, definirá o mixin.
Então, para o mixin, eu diria mixin zero-margin, pad-up-down,
pad-esquerda-direita,
e definimos os valores como antes.
Agora que terminamos a definição do mixin,
podemos fazer uso dele em nossas classes SCSS que definimos mais tarde.
Vamos agora definir algumas classes SCSS,
então eu vou definir o cabeçalho da linha que eu vou fazer uso
do mixin margem zero
com os valores zero pixel aqui.
Vamos continuar a definir mais algumas classes que eles irão adicionar aqui, para que
você possa ver que eu defini junto com
o cabeçalho da linha e o conteúdo da linha onde eu usei
os mixins e o rodapé e endereço Jumbotron e assim por diante,
e você pode ver
o uso das variáveis que temos definido anteriormente neste exemplo lá.
O código obviamente está disponível nas instruções de exercício que seguem este vídeo.
Em seguida, vamos adicionar se você classes de aninhamento.
Assim como fizemos no último exercício,
vamos adicionar na classe carrossel com o fundo definido para fundo escuro e, em seguida,
dentro de onde vamos aninhar
uma classe de item carrossel com a altura definida para altura do item carrossel,
e, em seguida, outra classe interna cores imagem com algumas propriedades lá,
e, em seguida, a classe de botão carrossel como definimos anteriormente.
Então, com isso, fizemos as alterações em nossas classes SCSS,
então vamos salvar as alterações.
Agora, precisamos converter isso em seu arquivo CSS correspondente.
Para converter nosso código-fonte SCSS no código CSS correspondente,
vamos ter a ajuda de mais um módulo de nó chamado node-sass.
Permite instalar o módulo do nó digitando npm
install save dev—save dev e, em seguida, node-sass.
Assim, vamos salvar este pacote node-sass
como uma dependência de desenvolvimento em nosso arquivo package.json.
Quando a instalação estiver concluída,
vamos adicionar um script em nosso arquivo package.json.
Indo para o nosso arquivo package.json,
se você rolar para cima você veria que nas dependências dev,
agora o nó sass também é adicionado às dependências dev.
Agora vamos adicionar um script em nosso arquivo package.jsm,
então metade direita deste slide,
eu vou adicionar em um script chamado SCSS e então
este script será node-sass -o CSS/,
o que significa que a saída deste os arquivos convertidos estarão na pasta CSS,
e a fonte aqui também estará em a pasta CSS.
Assim, todos os arquivos com a extensão.scss serão
convertidos e os arquivos corresponding.CSS serão gerados por este node-sass.module.
Vamos salvar as alterações e, em seguida, vamos para o prompt de comando e,
em seguida, digite npm run SCSS e isso vai cuidar de fazer nossa conversão.
Indo para o prompt de comando,
vamos digitar npm run SCSS e isso deve
converter automaticamente todos os nossos arquivos SCSS nos arquivos CSS correspondentes.
Indo para o nosso editor,
agora você vê que há um arquivo styles.css que foi gerado.
Olhando para o conteúdo deste arquivo,
você verá que este código CSS que foi gerado a partir do nosso código SCSS é praticamente
o mesmo que o código CSS original que nós mesmos escrevemos.
Com isso, completamos este exercício.
Neste exercício, vimos como podemos escrever
código SCSS e depois convertê-lo automaticamente em seu código CSS correspondente.
A razão pela qual examinamos isso em detalhes é porque o
Bootstrap fornece seus arquivos de origem no formato SCSS.
Se você visitar a página Bootstrap,
você notará que ele diz que Bootstrap foi projetado usando o pré-processador Sass.
Então, se você olhar para como isso é convertido de Sass
e como você pode fazer sua própria personalização
usando o código Bootstrap Sass você pode ir para a documentação,
e então você veria em
“Opções” você terá algumas opções de personalização sendo definidas aqui.
Várias opções de personalização que você pode ver que
essas variáveis são todas definidas usando a sintaxe Sass aqui,
e também em “Ferramentas de construção”,
ele irá explicar para você como você pode fazer sua própria personalização do Bootstrap.
Agora, eu recomendo fortemente que você não tente isso até que você tenha
experiência suficiente usando Bootstrap em sua vida diária.
Isso completa nosso exercício.
Este pode ser um bom momento para você fazer um bom commit com o exercício de mensagem SCSS.