Hugo compile SCSS e SASS para CSS

1. Introdução: Olá, meu nome é Sean e bem-vindo ao meu curso compilação de CSS e S com Hugo Antes de concluir este curso, presume-se que você tenha algum conhecimento básico sobre o uso do Hugo se precisar de ajuda Há um link na seção de recursos abaixo para o meu curso de introdução ao Hugo para começar a usar o Hugo Neste curso, estou usando o Bootstrap five como uma estrutura CSS Depois de concluir este curso, você pode aplicar as habilidades aprendidas qualquer outra estrutura CSS ou em seu próprio projeto de código personalizado. Um se concentra nos seguintes tópicos, pacotes NPM, compilação de CSS e S para Criação de prefixos de navegador com prefixador automático, remoção de classes CSS não utilizadas com CSS limpo Usando o arquivo de lista do navegador bootstrap para replicar seu próprio suporte ao navegador Importação seletiva da fonte de bootstrap para minimizar o tamanho do arquivo Personalizando o bootstrap por meio de suas variáveis. E criando classes de utilitários CSS personalizadas com a API do utilitário bootstraps No projeto dois, você pode implementar as habilidades que aprendeu no projeto um, junto com sua própria criatividade. Você modificará um modelo de site que eu forneci Eu estarei lá para ajudá-lo ao longo do caminho. Basta postar um link para seu trabalho na seção do projeto. Estou constantemente atualizando este curso à medida que Hugo e Bootstrap evoluem Você pode ter certeza de que está recebendo as informações mais atualizadas. Estou tão feliz que você tenha escolhido fazer meu curso. Mal posso esperar para ver um progresso ao longo do caminho. 2. Lição2: Bem-vindo ao projeto um. O projeto um é um projeto baseado em habilidades e, em seguida, as habilidades que você está aprendendo, projeto um, serão usadas de forma criativa no projeto dois Antes de começarmos com o projeto um, vamos dar uma olhada nos pré-requisitos deste curso Você precisará de um conhecimento prático de Hugo, apenas o básico. Se você tiver alguma dificuldade, consulte meu curso de introdução ao Hugo e ao Bootstrap Há um link na seção de recursos. Você precisará ter o Hugo instalado localmente. Você pode aprender isso no meu curso de introdução. Você também precisará ter o NOS instalado, e isso inclui o NPM, que é parte integrante deste curso Novamente, você pode consultar o curso de introdução. Você precisa ter instalado o Visual Studio Code ou um editor de código com o qual você esteja familiarizado. Eu vou te ensinar o curso por meio do Visual Studio Code, mas você pode usar o seu próprio. Se precisar de ajuda para instalá-lo, basta clicar no link do meu curso de introdução e eu mostrarei como instalar tudo o que você precisa para o Hugo Projeto Um é um projeto baseado em habilidades e trabalhar em todas essas habilidades listadas aqui e sobre as quais falei na introdução, é muito importante que listadas aqui e sobre as quais falei na introdução, , ao terminar projeto um ou, se tiver alguma dificuldade ao longo do caminho, upload de uma cópia do seu trabalho na seção do projeto. A maneira de fazer isso é usar um serviço em nuvem, como o Dropbox Cloud ou o One Drive, o Google Drive ou qualquer outro serviço em nuvem para fornecer um link para o seu trabalho Então, nunca poderei analisar seu trabalho e fornecer feedback se você tiver alguma dificuldade ao longo do caminho. Te vejo na próxima aula. 3. Lição3: Nesta lição, você pode baixar o arquivo zip por menos de três na seção de recursos. Em seguida, farei uma rápida descompactação do modelo e explicarei cada seção Se você concluiu meu curso de introdução ao Hugo e Bootstrap, entenderá completamente o modelo Estou fornecendo essa explicação para aqueles que não fizeram meu curso de introdução ou não o fazem há algum tempo. Se você tiver alguma dúvida, não deixe de conferir meu curso de introdução ao Hugo Vou deixar um link para isso na seção de recursos, na lição três. Vamos dar uma olhada rápida no modelo com o qual trabalharemos . Você pode encontrar esses arquivos na seção de recursos. Para a lição três, você precisa baixar a pasta zip e depois extraí-la. Depois de extraí-lo, você terá o que eu tenho aqui. Se você escrever, clique, poderá abrir com o código VS. Então, quando estivermos no código VS, se abrirmos um novo terminal e digitarmos o servidor Hugo, poderemos dar uma olhada no modelo, você pode controlar o clique nesse link Se inspecionarmos a página, olharmos dentro da cabeça, podemos ver que o arquivo CSS está saindo de uma rede de distribuição de conteúdo CDN E está baixando o arquivo CSS do Bootstrap que não foi modificado, está apenas usando todos os padrões do Bootstrap Então, se descermos até a parte inferior do corpo, você verá que o arquivo JS, novamente, é o arquivo JS completo e vem do CDN Agora que estamos no código VS, darei uma visão geral rápida de como o modelo funciona. Se você tiver algum problema com algum desses conceitos, dê uma olhada no meu curso de introdução ao Hugo Você verá o link para isso na seção de recursos. Archetypes serve para configurar uma nova página. Sempre que você executa Hugo new Hugo usará os dados em arquétipos para gerar O conteúdo das suas páginas é armazenado na pasta de conteúdo. Há dois tipos de índice Dodd sendo anotados, o ponto D do índice com um sublinhado é para uma página de lista Nesse caso, esses MDs de pontos de índice para a página inicial. Mas se você entrar na pasta de produtos, temos várias páginas secundárias aqui. Nosso underscore index dot MD é um modelo de lista que lista todos esses produtos E eu vou te mostrar quais são os modelos de lista em um segundo. Já esse ponto de índice MDs é a página única normal. Não estamos usando dados neste projeto. Se você exibisse informações retiradas de um arquivo de dados, você as armazenaria aqui. layouts aqui são padrões, base de é para a Todos os diferentes componentes HTML, temos parciais e blocos Os blocos são controlados no nível da página. Este é o nosso bloco aqui, o bloco principal da nossa página única. As parciais são extraídas da pasta de parciais. Se estivermos usando um ponto d de índice de sublinhado, usaremos um modelo de lista Se for um ponto de índice padrão d ou qualquer outro arquivo, usaremos nosso modelo único. Aqui estão todas as nossas parciais. Neste curso, trabalharemos no rodapé do script. Vamos substituir o arquivo CDN Javascript. Também, em resumo, substituiremos o arquivo CSS CDN Bootstrap Temos uma pasta de resultados que é gerada pelo Hugo. Você não precisa se preocupar com isso. Há uma pasta estática, temos um arquivo CSS lá e temos um arquivo JS. Neste curso, vamos nos livrar desse arquivo CSS e colocá-lo em uma pasta Assets para que possamos construí-lo por meio de CSS ou SS. Então, se você tiver alguma dúvida sobre o que isso faz, dê uma olhada no meu curso introdutório sobre Hugo, caso contrário, começaremos 4. Lição4: Nesta lição, inicializaremos seu projeto Hugo como um projeto NPM, criando assim um arquivo Json de pacote Em seguida, instalaremos o Bootstrap como uma dependência do NPM Ou seja, baixaremos o Bootstrap do registro do NPM, instalando-o na pasta de módulos do nó E então, na próxima lição, acessaremos os arquivos de origem do Bootstrap Vamos configurar nosso projeto para que ele esteja pronto para aceitar pacotes NPM Você deve ter o Nots instalado no Gerenciador de Pacotes NPM. Você pode instalar os dois ao mesmo tempo apenas instalando as notas. Se você ainda não fez isso, é muito importante. Você vê meu curso de introdução ao Hugo, e o primeiro Leslie trata de baixar todos os pacotes de software de que você precisa, esteja pronto para começar O que você precisa fazer é iniciar um novo terminal e executar o comando NPM Agora, se isso não funcionar, é mais do que provável que você não tenha o NPM instalado, volte para o outro curso e siga essas instruções Quando você executa isso, a primeira coisa que ele faz é pedir um nome para o pacote. Agora, se você for publicar no NPM, precisará colocar um sinal de arroba no início e o nome do seu nome de usuário do NPM Mas não vamos publicar no NPM, estamos apenas usando isso para baixar pacotes Você provavelmente pode aceitar o padrão se quiser, o que, se você já salvou seu projeto para obtê-lo, provavelmente o incluirá para você. Caso contrário, você pode simplesmente dar a ele um nome como Hugo SCSS resolveria o problema ou, claro, Hugo Então eu peço uma versão. Normalmente, vou começar com 0.0 0.1 Mas isso realmente não importa neste estágio, a menos que você esteja usando descrição de alguma ferramenta de gerenciamento de versão. Novamente, não estamos publicando o NPM Não é muito importante, mas você sempre pode fornecer uma descrição se desejar ponto de entrada realmente não se aplica ao que estamos fazendo aqui porque não é um pacote NPM verdadeiro Não precisamos de um comando de teste. Novamente, se você tiver um repositório Git configurado, você o incluirá Novamente, isso não é tão importante porque não estamos publicando palavras-chave. Realmente não importa. Autor, você pode configurá-lo se desejar e licenciar. Agora eu tenho esse pacote JSON, pacote Jason. Se você olhar lá, verá todos os dados que acabou de inserir. Isso serve para gerenciar pacotes. O primeiro pacote que vamos instalar é o Bootstrap. Da maneira como você faz isso, você escreve o NPM e depois instala o Bootstrap Antes de entrar, vou mostrar como isso funciona pesquisando no registro do NPM Eu fui ao pms.com e vou pesquisar o Bootstrap. Temos a versão cinco do Bootstrap. Temos um comando aqui para instalar esse pacote NPM específico, que é bastante útil se você for iniciante Eles também se vincularam ao repositório Github, onde todo esse código foi retirado Em seguida, precisamos criar um link para a página inicial deles buscando acesso às documentações Tenho algumas estatísticas interessantes. Você verá que eles têm 3,5 milhões de downloads por semana. Isso permite que você saiba que na verdade é um pacote muito popular e que está sendo baixado no momento. Você sabe, não ficou obsoleto. Estamos na versão 5.1 0.3, a versão cinco é definitivamente o que você deseja. Você pode ver que a última publicação foi há um mês. Pelo menos você sabe que está sendo desenvolvido atualmente e não está obsoleto Temos alguns documentos básicos aqui, mas eu recomendo que você use um link para o site deles Pressionamos Enter e ele será baixado do registro do NPM. E está instalado. Vamos dar uma olhada no arquivo Json do nosso pacote novamente Fecharemos o terminal, você verá que temos uma dependência do Bootstrap Se examinarmos nosso projeto, em módulos de nós, veremos que não apenas instalamos o bootstrap, mas também há uma pasta no PoperJS O que é isso, na verdade, é uma dependência entre pares do Bootstrap É uma biblioteca adicional na biblioteca Javascript da qual o Bootstrap Javascript depende Não instalamos apenas o Bootstrap, também instalamos algumas dependências ao mesmo tempo. Se entrarmos no pacote Json do Bootstraps e dermos uma olhada nele, você verá que há uma dependência entre pares do Pops, e é por você verá que há uma dependência entre pares do Pops, e Para nós, isso é somente se você tiver node JS versão sete ou superior, que provavelmente é o caso. Há uma última coisa que você precisará fazer, ou seja, se estiver usando o Git para salvar o progresso, você terá que entrar no Git e ignorar a lista de módulos do nó, porque atualmente o Git deseja enviar 472 arquivos para lá Os arquivos acabaram de ser baixados em módulos de nós. Você não quer enviá-los para o seu repositório Git e eu vou te mostrar o porquê em um segundo Vamos entrar em nosso Git ignore. Adicionaremos um novo nó de linha, módulos de sublinhado. Termine com a barra, guarde isso. Você verá que acabou de ser reduzido aos três arquivos nos quais estou trabalhando atualmente. Mas eu não vou incluir o git neste curso em particular só para simplificar as coisas Agora, se você salvasse este projeto para obter o conteúdo da pasta de módulos do nó, não seria salva seu repositório Get ou Github Só para mostrar como isso funciona, digamos que devemos excluir a pasta de módulos do nó e emular o download desse projeto do Get Mostrarei como podemos instalar tudo com um comando. Limitei a pasta de módulos do nó, então você acabou de baixar este projeto da sua conta get. Tudo o que você precisa fazer é executar a instalação do NPM. Em seguida, ele examina o arquivo dot json do pacote e instala tudo no arquivo dot json do pacote conforme acabamos de discutir. Nós temos o Bootstrap Como você pode ver, ele instalou dois pacotes, que são Bootstrap e pops É por isso que você não confirma o conteúdo dessa pasta de módulos do nó para obter , pois ela preencherá sua conta get muito rapidamente. Temos que ignorar essa pasta e, se você baixou seu projeto do Get, basta executar o NPM install e pronto Aí está. Instalamos o Bootstrap como uma dependência do NPM. Estamos prontos para começar. 5. Lição5: Nesta lição, vamos configurar alguns comandos do NPM. A razão pela qual estamos fazendo isso é para que possamos executar rapidamente diferentes comandos hugo Vamos criar alguns comandos hugo complexos. Você provavelmente não vai querer digitar na linha de comando. Se você acessar seu pacote no arquivo, verá que temos um script de teste. Agora, o que vamos fazer para começar é criar um script de desenvolvimento. Você deve colocar uma vírgula depois disso. Em seguida, vamos criar um script de construção. Vamos abordar esses dois primeiro e depois adicionaremos mais alguns. Em termos de desenvolvimento, você sabe que precisa executar o servidor Hugo para executar o servidor de recarga automática Há algumas coisas extras que podemos acrescentar a isso. O primeiro é o GC e é para coleta de lixo. Quando você fechar esse servidor, ele removerá todos os arquivos não utilizados O próximo que vamos fazer é desativar a renderização rápida. Na verdade, coloque maiúsculas no início de cada palavra, exceto a primeira Isso significa que toda vez que você salva um arquivo, todo o seu site é recarregado, então você garante ter a versão mais atualizada do seu site A próxima coisa que faremos é o script de construção. Desta vez, vamos apenas executar o comando Hugo. Vamos adicionar GC para coleta de lixo. Desta vez, também vamos limpar a pasta que estamos usando para criar. Ele será criado em uma pasta pública. Queremos ter certeza de que está completamente vazio para que não haja arquivos obsoletos de versões anteriores do site Executaremos o destino D limpo com apenas D maiúsculo . A próxima coisa que faremos é unificar para tentar reduzir a minificação do arquivo HTML Vamos guardar isso e dar uma olhada. Você verá na parte inferior se estiver usando o código VS, há uma seção chamada scripts NPM E isso é muito útil. Esses dois scripts que acabamos escrever e agora estão disponíveis aqui, se você passar o mouse sobre eles, poderá ver o comando real que você escreveu e eles se alinham. Vamos testar se o desenvolvedor quiser começar jogando. Está sendo executado no terminal, você pode ver que ele construiu os arquivos, não fez nenhuma limpeza com a coleta de lixo Ele te dá o endereço. Você pode clicar nele para abrir no navegador. Agora que estamos no site, escreveremos e clicaremos, veremos a fonte e você verá como há muito espaço em branco entre todas as linhas. Vamos voltar ao código do VS e tentaremos executar o script de produção. A primeira coisa que faremos é pressionar o controle C ou ir para a lixeira. Então vamos construir. Isso não executará um servidor , apenas gravará os arquivos no disco. Em seguida, entraremos na pasta pública. Vamos conferir nosso índice, Html. Você verá como ele vai, remova todo esse espaço em branco porque eles estão executando o comando minify Há mais uma coisa que você precisa fazer e pode ver os arquivos que acabamos de criar. Teremos que ignorar esses arquivos se você estiver usando o Git para gerenciamento de versões E para apoiar seu trabalho, basta adicionar público. E você vê que caiu de 29 para dois. Estamos apenas enviando os dois arquivos em que estamos trabalhando para conseguir isso Se você está usando , não precisa fazer este curso, isso é muito importante. Vou adicionar mais alguns scripts ao nosso pacote, Jason. A próxima que adicionaremos é a renderização que, à medida que o Hugo for executado, ele renderizará todos esses arquivos no disco para que possamos inspecioná-los, se necessário, copiaremos e colaremos o conteúdo do script de desenvolvimento A única coisa importante que temos que adicionar é renderizar em disco porque estamos trabalhando fora do disco. Também precisamos limpar o diretório de destino antes que isso aconteça. Deve colocar uma vírgula após seu segundo comando. Agora, para renderizar, faremos com que essa renderização seja desenvolvida porque estamos rodando como um servidor de desenvolvimento. Em seguida, criaremos um desses, mas para produção, que possamos testar como será o site em produção. Mas com um servidor de desenvolvimento, colocaremos um desenvolvedor de renderização e o alteraremos para Render Prod para produção Vamos fazer algumas mudanças. O primeiro que precisamos fazer é dizer a ele que será um servidor de produção. Faremos uma produção de espaço ambiental que imitará a aparência do seu site quando você realmente executar a construção Por exemplo, você pode ter alguns scripts que só são executados em produção. Ou algumas coisas que podem ser unificadas, por exemplo, com Javascript ou SCSS A próxima coisa que você precisa adicionar é Unify. Isso é apenas para o seu HTML. Você também precisa ser capaz de executar um servidor de desenvolvimento, mas para arquivos com datas futuras. E também para arquivos ou páginas marcados como rascunhos. Copiaremos e colaremos nosso script de desenvolvimento e o colaremos abaixo, chamaremos isso de dev colon drafts Em seguida, vamos adicionar duas opções. O primeiro será construir capital futuro e construir rascunhos. Não gosto de usar essas duas opções para produção porque acho que é um pouco enganador, porque não é isso que vai acontecer no servidor Mas eu gosto de usá-lo para o servidor Dev. Há um último comando que você colocará? E isso é para PM, é realmente complicado de usar quando se trata de atualizar seus pacotes Mas há um programa que você pode instalar que é meio gráfico e torna tudo muito fácil. Abra um novo terminal e execute NPM install NPM ou hyfen check, ele dirá que foram instalados oito pacotes e isso porque eles são dependências do eles são dependências Se você der uma olhada na pasta que não é de módulos, verá que ela está começando a ficar um pouco cheia. Mas o principal que realmente instalamos foi o NPM check. Mas há muitas outras que as dependências do NPM verificam. Em seguida, usaremos uma nova linha e verificaremos se você pode escrever uma atualização, mas isso pode ser enganoso Na verdade, está sendo atualizado com o NPM. Eu só chamo isso de NPM check. Eu sei exatamente o que estou fazendo. Coloque uma coluna e depois algumas vírgulas invertidas. E o comando que vamos executar, NPM check, você precisa executar, é para atualizar, caso contrário, você não terá essa opção ao clicar nela Podemos testar isso clicando em PM check, que está nos dizendo que Irving está atualizado E isso porque acabamos de instalar o Bootstrap. Mas se você tiver pacotes desatualizados, ele fornecerá uma lista de pacotes que podem ser atualizados. Faremos um teste rápido do comando render. Para começar, faremos o desenvolvimento de renderização, você verá que ele está construindo o Hugo, mas também está renderizando Se entrarmos em nossa pasta pública, eles são todos os arquivos que estão sendo usados no site do host local. Se olharmos para o nosso índice HL, você verá muito espaço. Vou fechar isso. Eu farei a produção de renderização. Se você observar com muito cuidado, verá produção do ambiente em vez do desenvolvimento. E aqui estão todos os nossos arquivos aqui, mas eles também estão visíveis no servidor de carregamento da biblioteca. Se abrirmos o HTML com pontos de índice, você verá que não há tudo, mas a maior parte do espaço em branco foi removida para manter o tamanho do arquivo baixo. Então, vamos nos sentar para esta lição. Te vejo na próxima. 6. Lição6: Nesta lição, adicionaremos mais alguns pacotes NPM. E estamos fazendo isso para que possamos adicionar hugo como uma dependência do NPM Isso significa que quem trabalha no projeto ou onde quer que você trabalhe no projeto, seja em um computador diferente, você estará usando a mesma versão do Hugo Ele funcionará em qualquer plataforma, seja Linux, Mac ou Windows. Hugo fará o download no formato necessário para essa plataforma Vamos instalar dois pacotes NPM. Abra um novo terminal. Vamos digitar NPM install O primeiro é o instalador Hugo. segundo é do mesmo autor e é para garantir que todos esses nomes estejam corretos , porque se você perder a grafia, poderá baixar algo que não deseja Vamos dar uma olhada rápida no arquivo Json do nosso pacote. Você verá que, em dependências, agora temos cada pino e o Hugo instalados A maneira mais fácil de fazer o instalador do Hugo funcionar é acessar a seção de dependências. Colocar um depois em uma nova linha, colocar uma nova seção chamada outras dependências faz com que você use um D maiúsculo para dependências Em seguida, colocamos dois pontos e algumas chaves em uma nova linha, vírgulas invertidas digitando Em seguida, você precisa fornecer a versão mais recente. Você vai digitar exatamente como Hugo tem em seu site Vou fazer uma busca pela versão do Hugo. Em seguida, vou para a página do Github. Você vê que a versão atual, quando esta lição for gravada, é 0,89 0,4 Vamos digitá-la exatamente sem as pontas V. 0,89 0,4 Você não precisa um depois dessa linha ou depois das chaves porque elas são as últimas em suas respectivas seções Em seguida, vamos ao nosso roteiro. Vamos colocar um script final aqui chamado pós-instalação. Agora, após a instalação, seu penúltimo script, pós-instalação será executado. Depois que a instalação do NPM for executada, colocaremos dois pontos. E depois para as vírgulas inventadas. E vamos executar o Hugo installer, que é o que acabamos de instalar Para a versão, usaremos outras dependências hugo. E isso se referirá a esta seção que acabamos de criar. Então você pode atualizar Hugo aqui embaixo. Em seguida, solicitaremos que ele instale a versão estendida que instala o fold na placa Linux e Mac no Windows. Isso não acontece. É muito importante que você precise disso para o que abordaremos nesta lição com CSS e como construção. Temos que dizer ao instalador do Hugo para onde queremos ir os arquivos que baixaram o arquivo executável do Hugo Especificaremos o destino e, em seguida, instalaremos os módulos de sublinhado do nó No Hugo, você provavelmente deveria dizer ao get que não faça o upload da pasta de módulos do nó Você receberá o arquivo ignore, não precisa se preocupar com o upload do arquivo hugo. Vamos guardar isso. Se executarmos o comando NPM install, hugo será e dependerá do seu sistema e será salvo na módulos do nó. Vamos seguir em frente e fazer isso. Execute o NPM install, ele está examinando e verificando, agora está baixando o binário hugo no Windows, será um arquivo C. Vamos dar uma olhada. Agora, em nossa pasta de módulos de nós, estamos procurando por módulos de nós. Hugo, entramos e depois temos Hugo. E você verá que temos Hugo Doc. Se você estivesse executando o Macolinux, teria um arquivo executável adequado ao seu sistema teria um arquivo executável adequado ao seu sistema. Isso é ótimo. Mas nossos comandos aqui são todos sobre servidor hugo ou hugo. Eles não estão apontando para esse arquivo. E estamos tentando configurar nossos scripts de forma multiplataformas ou independentes de plataforma Temos que adicionar um pouco mais a isso que faremos. Vou clicar antes de Hugo. Cada vez que pressiono o botão Alt, isso significa que posso editá-los todos ao mesmo tempo. Vou executar o Exec bin. Exec bin, que é outro pacote que acabamos de baixar Vou dizer ao exec bin que examine os módulos de nós do Shinhugo Então, precisamos mostrar que o compartimento exato é multiplataforma, independente da plataforma. Ele executará o arquivo hugo file, dependendo do sistema em que você estiver Vamos salvar isso e executar um dos nossos scripts aqui embaixo. E experimente. Então parece que está funcionando muito bem. Ele está usando a versão estendida do Hugo , que solicitamos que fosse baixada Você pode ver os compartimentos exec executando o executável Hugo a partir de módulos conhecidos. Hugo, Hugo. Ou se você estiver no Macolinux, não estará, o que é ótimo. Então é isso para esta lição. Verei na próxima lição onde começaremos a criar com CSS. E como 7. Lição7: Nesta lição, vamos importar os arquivos fonte CSS do bootstrap do pacote NPN Em seguida, vamos compilá-los em CSS para que possam ser usados em um navegador O que vamos fazer é que, se você olhar em sua pasta de layout, nas parciais e na parcial principal, você verá que o CSS do Bootstrap está sendo extraído de um servidor CDN ou rede de entrega de conteúdo Ele está baixando a versão 5.1 0.3 do Bootstrap Esse é um arquivo CSS com defeito com todos os padrões do Bootstrap Sua cor primária será azul, sua cor secundária será cinza. Nada foi personalizado. Inclui tudo. É um arquivo bem grande. O que vamos fazer é extrair CSS do Bootstrap do pacote NPM E então, em outra lição, vamos personalizá-lo e também remover peças Não precisamos fazer isso O que faremos é voltar à raiz do projeto. Criaremos uma nova pasta chamada Assets. Essa é uma pasta com a qual Hugo trabalha. Em seguida, eles criarão uma pasta chamada CSS. Eles farão um arquivo lá chamado Missa. O que precisamos fazer agora é importar o CSS do Bootstrap do pacote MPM. Vamos executar a importação e seguida, colocar um cometa invertido Estamos procurando bootstraps. Bootstraps. Isso será relativo à pasta de módulos do nó. Certifique-se de colocar um resfriado no final. Vamos procurar isso. Entraremos na pasta Nodemodules e depois desceremos para o Bootstrap. Em seguida, estamos examinando o CSS. Esta é uma fonte, compilou CSS que não queremos. Queremos a fonte. Vamos para a pasta SCSS e você verá na parte inferior que temos um arquivo CSS bootstrap Isso é o que vamos extrair de dentro desse arquivo Todos esses arquivos são importados e estão prontos para uso. Agora temos que configurar o Hugo para que ele use liss para executar esse arquivo SCSS Atualmente, nada realmente vai acontecer com esse arquivo, ele está apenas parado voltando para os layouts de cabeçalho, Parciais, cabeçalho, comentaremos esse controle de linha KC para comentá-lo Vamos deixá-lo lá, mas caso precisemos dele para testes. Mais tarde, vamos tentar fazer isso da forma mais simples possível. Para começar, coloque duas chaves K e criaremos uma nova variável chamada CSS, porque estamos declarando isso, precisamos usar dois pontos e inserir Vamos usar recursos, obter recursos, obter recursos, obter um recurso O caminho que vamos fornecer é relativo à pasta de ativos. Voltamos à nossa pasta de ativos, você verá que são ativos, SS, SS, vou digitar isso em massa. É assim que acessamos o arquivo. A próxima coisa que fazemos é compilar o que está nesse arquivo Porque o navegador, vou dizer isso, o navegador não sabe o que fazer com isso. Além disso, esses arquivos existem na pasta NPM e o navegador não conseguirá acessá-los. Hugo não fornecerá esses arquivos. Vamos retirá-los e processá-los. Precisamos fazer isso, colocá-lo em um cano, que é a chave acima. Insira a barra invertida, mude a barra invertida para obter um cano. E vamos executar dois CSS. É CSS maiúsculo que funcionará sozinho, sem nenhuma opção. Mas não sabe onde encontrar esse bootstrap, folded boto fold Ele não sabe que precisa procurar na pasta de módulos do nó. A configuração será fornecida como um objeto. Mas em Go and here go, isso é chamado de ditado ou dicionário. Colocamos alguns colchetes, reescrevemos então nosso primeiro item de configuração e nosso primeiro neste relatório a tempo será incluir caminhos Quando você especifica os caminhos de inclusão, eles precisam receber uma matriz. A razão disso é porque você pode fornecer vários caminhos de inclusão. Uma matriz é a maneira perfeita de fazer isso. Abra e feche nossos colchetes e digitamos Slice, em Go e em Hugo Slice é o que você usa para matrizes, forneceremos forneceremos Portanto, é um pouco estranho para uma matriz, mas você pode adicionar mais se necessário. Forneceremos módulos de sublinhado do nó como o caminho que precisa ser incluído Então, o que precisamos fazer é fornecer um link para o navegador. Se digitarmos um link, dois pontos fornecem um link de estilo, nos livraremos desse arquivo Vamos colocar nossos colchetes encaracolados. Vamos nos referir à variável CSS que acabamos de criar, link permanente L com R maiúsculo e maiúsculo. Então você tem que fechar os colchetes. Hugo fornecerá um link para esse arquivo que foi gerado por meio dessa variável Rel permalink, ou link permanente relativo significa que não incluirá o domínio, parte do domínio com esse link parte do Vamos salvar isso e dar uma olhada. Em seguida, clicaremos no link com o controle e o verificaremos no navegador. Vamos clicar com o botão direito do mouse e inspecionar. Vamos até a cabeça. Primeiro você verá que há um link para o Cssmin. Esse é esse arquivo bootstrap. Na verdade, esse arquivo é convertido em um arquivo CSS por meio dessa variável. Se formos para a guia Fontes e abrirmos a pasta SCSS, podemos visualizar o conteúdo do arquivo que acabou de ser gerado Você verá que é praticamente o mesmo que o CSS do Bootstrap que você pode obter do CDN ou até mesmo baixar do site do Bootstrap Há muitas vantagens. Podemos modificar todas essas informações muito mais por meio de variáveis. Também podemos remover peças que não queremos. Podemos até remover partes não utilizadas do arquivo em comparação com as tags que solicitamos no HTML do nosso site Se você conseguir que o CSS do Bootstrap apareça na pasta SCSS em seu SS principal, você está pronto para passar para a próxima lição 8. Lição8: Na última lição, configuramos a compilação do SCSS. Agora, precisamos criar alguns parâmetros para ambientes de produção e desenvolvimento para que o compilador CSS se comporte de forma diferente, seja usando um servidor de desenvolvimento ou construindo a produção do hugo Four Na seção de recursos, você verá um link para esta página. São os tubos Hugo, CSS e a página, o número de opções que podemos passar quando estamos compilando Primeiro, vou dar uma olhada no transpiler. Por padrão, Hugo atualmente usa Lipsas. Vamos configurar isso para que isso force Hugo a usar Lipsas Caso Hugo seja atualizado para dartsas. No futuro, não teremos nenhuma alteração significativa. Vamos analisar o estilo de saída. O padrão é aninhado, o que é ótimo para quando estamos desenvolvendo Mas também queremos que ele seja compactado para reduzir o tamanho da produção Vamos analisar como habilitar mapas de molho para desenvolvimento. Já analisamos a inclusão peças para módulos de nós. Vamos ao que interessa. Se você entrar na pasta de layouts e depois na pasta de parciais e HTML, destaque tudo o que você forneceu para dois Todas as opções que você forneceu, que atualmente são apenas a opção include pass, destaque-as e recorte-as com o controle X ou o comando X. Em vez disso, forneceremos uma variável que chamaremos opção para CSS Agora vamos declarar essa variável e criar as opções que colocaremos entre colchetes. Vamos digitar opt to CSS porque estamos declarando isso. Temos que usar carvão e inter. Em seguida, criaremos um dicionário que é um objeto para nossas opções. O primeiro que faremos é transpilar. O transpilador que vamos usar é Lisa. O motivo pelo qual estamos bloqueando isso é que haverá algum momento no futuro em que Hugo fará o upgrade para Dart As e não queremos nenhuma Em seguida, declararemos o estilo de saída por padrão. O estilo de saída é aninhado, o que é ótimo para desenvolvimento, mas queremos usar comprimido para No momento, estamos analisando nossas opções de produção. Então, temos nosso último, incluindo o Pass, que você pode simplesmente colar se quiser. Isso será uma fatia e teremos módulos de nós. Tudo bem, então esses são nossos valores de produção. Você pode então copiar isso e criar uma nova linha. E vamos usar uma declaração if se for igual a O ambiente com um desenvolvimento E maiúsculo. Se estivermos no ambiente de desenvolvimento, colocamos uma tag aqui dentro. Vamos inserir a tecla Tab e colar o que acabamos de escrever, mas você precisa remover essa coluna. Super importante. Agora vamos remover o estilo de saída compactado porque queremos usar o padrão de aninhado Mas vamos habilitar mapas de origem, então, como no singular, não há nenhuma fonte no final, é apenas uma fonte com um no ES. Em seguida, mapeie com capital e capital. Vamos usar a opção de verdadeiro. Você não precisa usar vírgulas invertidas ao redor true porque é um É verdadeiro ou falso, sem necessidade de vírgulas invertidas Vamos guardar isso e tentar. Começarei com o script de desenvolvimento, depois controlaremos o clique e o abriremos no navegador. Em seguida, clicaremos com o botão direito do mouse e inspecionaremos. Vamos até Sources e abriremos o CSS Mass. Se você rolar até o final, verá que há um link para o mapa de origem que geramos, o que é ótimo para depuração Vamos dar o roteiro de produção para começar. Agora vamos fazer o controle C para sair e depois Y, caso contrário, você pode simplesmente usar o que está na lixeira para matar o terminal Em seguida, executaremos a produção. Para isso, teremos que usar o comando Render. Clique em Render Production Control. Então você pode escrever, clicar e inspecionar, ir para Fontes e depois CSS e talvez não CSS Você verá que ele foi reduzido ou compactado. Então, temos que remover todos os espaços em branco. Está em uma grande fila longa. Se você estiver certo até o fim, não há link para um mapa de origem, o que é ótimo para produção. Nós não queremos isso. Há arquivos extras gravados e os mapas de origem não são realmente úteis para produção. Além disso, significa que Allah não pode entrar sorrateiramente e ver exatamente como nosso código está sendo escrito Isso torna um pouco mais difícil para outras pessoas separarem nosso código, mas não é impossível se você conseguir fazer os scripts de desenvolvimento e produção funcionarem e tiver munificação, não tiver mapas de origem em sua produção, em seu desenvolvedor Você tem código não unificado e tem um mapa de origem. Você está pronto para passar para a próxima etapa, veremos na próxima lição. 9. Lição9: Nesta lição, vamos tirar impressões digitais da saída CSS Vamos aplicar uma soma de verificação, um hash ao arquivo Isso significa que sempre que atualizarmos o arquivo, ele direcionará o navegador para a forma mais recente desse arquivo Não haverá confusão com o navegador armazenando versões antigas do arquivo em cache Você também pode usar a impressão digital para fins de segurança, mas não abordaremos a implementação disso neste curso Seu link final para esta página na seção de recursos da página Hugo Pipes para impressão digital e Agora, se você estiver usando a impressão digital apenas para verificar se a versão mais atualizada do arquivo está sendo solicitada pelo navegador Se você tem novas versões da página constante evolução e quer garantir que o navegador procure a versão mais recente, você provavelmente deveria usar o MD five Md five vai ser um pouco mais curto. No entanto, se você está tentando proteger seu site com CSP, o que não é algo que eu vou abordar neste curso, você pode querer usar uma criptografia de alto nível como S HA 384 Vamos ao que interessa. Vamos passar por esse processo aqui em nosso projeto em nossa linha com a variável CSS. Usando recursos, conseguimos tirar o arquivo da pasta de recursos. Em seguida, o executamos por meio de dois CSS para processá-lo. Em seguida, vamos executar outro comando. Em vez de canalizar com shift back, o comando é impressão digital A opção que vamos usar é MD five. E isso significa manter o nome do arquivo um pouco mais curto , pois ele usará um hash no final do nome do arquivo Se você estiver usando o CSP por motivos de segurança, talvez não queira usar o MD five, basta mantê-lo como padrão Nesse caso, você simplesmente se livraria disso completamente. Vamos usar o MD five apenas para manter o nome do nosso arquivo curto. Em seguida, vamos colocar nossa etiqueta aqui embaixo. O nome do arquivo gerado por uma impressão digital será automaticamente inserido no link Para integridade, precisamos colocar uma etiqueta de integridade para isso. Usaremos algumas chaves curvas e será CSS, que é a mesma variável usada para nosso link de arquivo, mas serão dados com integridade em D maiúsculo Em seguida, abriremos um espaço e fecharemos nossos colchetes Ur. Vamos guardar isso e dar uma olhada. Então, se dermos uma olhada na fonte, vá até o link, você verá que os nomes dos arquivos mudaram. Tem a primeira parte principal, mas depois eles incluíram um hash que é um MD five Então, na tag de integridade, tem MD five e tem uma chave que pode ser usada para verificar se esse é realmente o arquivo correto, mas não vamos usar CSP e explicar como configurá-lo com hitters, porque esse é um tópico totalmente diferente Se você conseguiu gerar um arquivo com hash e gerar sua tag de integridade, você está pronto para passar para a próxima lição 10. Lição10: Agora vamos instalar mais dois pacotes NPM, que são o post CSS e o Autoprefixer O motivo pelo qual os estamos usando é porque, quando você executa a fonte CSS do Bootstrap a partir do pacote NPM, eles não fornecem prefixos para É algo que o Bootstrap faz quando oferece sua fonte CSS pré-compilada Vamos fazer exatamente o mesmo processo para que o arquivo que estamos gerando tenha a mesma compatibilidade com navegadores mais antigos que o CSS pré-compilado Bootstraps Então, se você olhar a página de documentos do Bootstrap para Bill Tools, trata-se mais de criar uma versão do arquivo CSS que corresponda exatamente à deles, mas eles estão usando o SAS para compilar, o que estamos fazendo Em seguida, eles vão executar o Autoprefixer. O que vamos fazer é, na verdade, copiar o arquivo da lista do navegador Bootstrap para oferecer suporte exatamente aos mesmos navegadores que o Bootstrap suporta quando você baixa o arquivo CSS padrão do site Antes de começarmos a analisar como implementar o pós-CSS e o prefixo automático Então, precisaremos de um arquivo para definir quais navegadores estamos tentando atingir em termos de prefixo Antes de continuarmos, vamos acessar a página Github do Bootstraps Você pode descobrir isso procurando o link na seção de recursos. Ou você pode fazer uma pesquisa no Google pelo Bootstrap Github. Vá até a página e, em seguida, role para baixo e procure o ponto da lista de navegadores. A maneira mais fácil de obter isso é copiar o conteúdo desse arquivo, ir até a raiz do seu projeto , fazer um novo arquivo chamar a lista de navegadores R e, dentro desse arquivo, e, dentro desse arquivo, colar as informações da página do Bootstrap Skew Esse arquivo dirá ao Autoprefixer quais prefixos ele precisa criar Muitos navegadores mais antigos exigem prefixos diferentes nas classes CSS, o não é tão comum nos navegadores modernos Ao definir quais navegadores estamos segmentando, estamos usando a lista padrão do Bootstrap Aqui, estamos evitando adicionar quantidades excessivas de aulas. Por exemplo, não forneceremos prefixos do Internet Explorer Estamos de volta à página do Hugo em Peças do Hugo para postagem CSS, e você encontrará um link para isso na seção de recursos Se você tiver uma leitura rápida, verá que precisa ter uma CLI pós-SS, e também precisa ter uma postagem CSS e um prefixador automático Agora, Hugo sugere que você os instale globalmente. Eu recomendo que você os instale no ambiente. Vamos voltar e adicionar mais alguns pacotes NPM, abrir um novo terminal executar a instalação do NPM O primeiro foi o post CSS, depois o post CSS CLI e depois o Autoprefixer Solicitamos três pacotes, 39 foram instalados porque há muitas dependências Solicitamos três pacotes. 54 foram instalados porque há muitas dependências Se você abrir seu pacote Jason, verá que temos nossas dependências listadas aqui e elas foram adicionadas Em seguida, lendo os documentos, você verá que temos que usar recursos PostSS, há um atalho para contornar isso, mas você pode remover a parte de recursos e depois minúscula Vamos dar uma olhada em layouts, parciais e cabeçalho. Então, no final da nossa string CSS pouco antes da impressão digital, colocaremos outro tubo E então publicaremos nossas opções. Vamos voltar ao médico. Agora precisamos criar um arquivo de configuração para pós-CSS. Post CSS procurará automaticamente esse arquivo de configuração na raiz do projeto. Criaremos um arquivo na raiz do projeto e o chamaremos post Css config A primeira coisa que precisamos fazer é autoprefixador como um plugue. Executaremos o autoprefixador constante, que é igual a um colchete aberto, duas vírgulas invertidas e o autoprefixador, na Executaremos o autoprefixador constante, que é igual a um colchete aberto, duas vírgulas invertidas e o autoprefixador verdade, colocará um ponto e vírgula colocar o autoprefixador como um plugue. Executaremos o autoprefixador constante, que é igual a um colchete aberto, duas vírgulas invertidas e o autoprefixador, na verdade, colocará um ponto e vírgula no final. Em seguida, precisamos executar as exportações. Faremos exportações de módulos iguais a colchetes abertos. Declararemos os dois pontos dos plug-ins e faremos um colchete e faremos um colchete É aqui que as coisas começam a ficar complicadas. Voltando ao nosso script Hugo, notaremos que o post CSS está sendo executado o tempo todo, tanto no desenvolvimento quanto na produção A maneira mais fácil de configurá-lo para ser executado apenas em produção não é por meio desta parte aqui no Hugo, mas por meio de JS É muito mais fácil substituí-lo para testes. Você verá que podemos acessar o ambiente Hugo. Vamos voltar. Acessamos o ambiente do Hugo com o processo. Este é o ambiente de sublinhado Hugo em maiúsculas. Estamos procurando três iguais para uma réplica exata do que foi escrito E isso é desenvolvimento. Existe um, você pode ter alguns ambientes de produção diferentes. Quando se trata de desenvolvimento, você provavelmente só tem aquele que é quando está testando com o servidor de carregamento da biblioteca. Em seguida, vamos colocar um ponto de interrogação. Se for em desenvolvimento, retornaremos null, mas na verdade retornaremos algumas matrizes Vamos colocar null dentro de alguns colchetes. A próxima linha será colocada em uma coluna. E tudo isso pode ser feito em uma linha, mas estamos separando para facilitar essa linha Esses são os plug-ins que serão executados quando não estiver em desenvolvimento. Vamos devolver o Autoprefixer e adicionaremos outro plug-in na próxima lição Como fornecemos os valores que retornam como matrizes, precisamos das cadeias de caracteres individuais, não da matriz de cadeias de Para extrair as cordas das matrizes, foram colocados três pontos, no início dessa linha E então, quando essa linha for executada, ela fornecerá à matriz um valor nulo dentro ou fornecerá à matriz um prefixador automático Vamos desconstruir essa matriz em cadeias de caracteres individuais por causa dos três pontos Deveria funcionar. Vamos guardar isso. Executaremos o servidor Dev e o testaremos com o servidor Dev original. Primeiro, verifique quantos prefixos estão presentes atualmente. E são prefixos incorporados ao Bootstrap. Isso faz parte dos pontos normalizados. Executaremos o servidor Dev, controlaremos o clique no link para que você atualize Depois de recarregar, o servidor não será atualizado automaticamente no primeiro Em seguida, verifique suas fontes. Indo para CSS e Main. E faremos uma busca de controle para o web kit. Você verá que há 40 presentes. Eles vêm por padrão com CSS normalizado. CSS normalizado é um arquivo HTML que foi escrito para fazer com que todos os elementos em vários navegadores diferentes tenham a mesma aparência CSS normalizado substitui os padrões do navegador forma que todos os navegadores tenham a bootstraps usam isso e também trabalharam um pouco nisso E eles o incluíram como parte do Bootstrap. É daí que vêm essas 40 aulas de webkit. Vamos agora encerrar esse processo. Vamos executar a produção de renderização. Isso ocorre em um ambiente de produção que imita o que acontece quando você constrói Você verá que o ambiente deles é a produção. Vamos controlar, clique no link. Em seguida, entraremos em Sources, CSS e Main, e faremos Control e webkit Você verá as 99 classes presentes lá. prefixo automático adicionou essas 99 classes com base no arquivo de lista de navegadores Se você olhar diretamente na raiz, verá que os navegadores B listam RC com base nesses navegadores que o Bootstrap especificou Eles são os prefixos da web. São os prefixos necessários para esses navegadores que serão os navegadores mais antigos desta lista, geralmente não os Você pode modificar essa lista se estiver especificando alguns navegadores mais antigos do que os apresentados aqui Você receberá mais prefixos. Mas existem alguns atributos CSS que foram usados na versão atual do Bootstrap, o Bootstrap five, que, mesmo com prefixos, não funcionarão em navegadores mais antigos, é preciso ter cuidado Esse arquivo produzirá um arquivo CSS, compatível com o Bootstrap Tenha cuidado, você não exagera nas coisas ou talvez não obtenha os resultados aqui depois. Se você puder produzir um arquivo CSS com 99 ou mais ou menos prefixos no ambiente de produção, poderá executar seu ambiente de desenvolvimento, o servidor de desenvolvimento , e terá 40 prefixos de webkit Isso significa que você está usando o Autoprefixer corretamente e está pronto para passar para a próxima lição Estou vendo a próxima lição. 11. Lição11: Agora que configuramos o Hugo para compilar a fonte CSS do bootstrap um arquivo CSS que atenda às mesmas especificações do arquivo CSS disponível do bootstrap, que pode ser baixado em seu site Agora vamos usar um pacote chamado CSS para remover classes CSS não utilizadas Para reduzir o tamanho do arquivo, precisamos instalar o programa CSS de limpeza Se você fizer uma pesquisa por NPM e limpar CSS, você encontrará esta página aqui que é instalada com a instalação do NPM ou NPM e Mas não se confunda porque esse pacote específico não funcionará com o post CSS e o Hugo O que você precisa é do seguinte plug-in e eu colocarei o comando para ele na seção de recursos desta lição. Esta é uma versão do Per CSS que funciona como um plug-in para pós-CSS. Depois de instalá-lo, podemos executá-lo com esse código Javascript aqui. Vamos em frente e copiaremos e colaremos esse comando e o executaremos em nosso projeto. Abriremos um novo terminal. Vamos colar o código que está instalado. Vamos agora escrever o código em nosso arquivo de configuração pós-CSS. Começaremos com esse texto aqui, copiaremos isso. Em seguida, colaremos esse texto abaixo do prefixo automático alinhado na parte superior da página Agora, para simplificar as coisas aqui, como você viu, copiamos e colamos os colchetes de abertura e fechamento para executar o Para conectar a parte superior onde está sendo definida. Também faremos isso para o PERGSS. O que precisaremos fazer é nos livrar completamente dessa linha e de seus colchetes associados E então nos livraremos da palavra por CSS. Vamos trazer isso à tona. Podemos usar o Alt Shift para reformatar tudo o que parece muito novo Em seguida, colocaremos a fonte em uma nova linha. E também colocaremos esse colchete de fechamento em uma nova linha Vamos mudar a pasta de origem para layouts. É aí que vive nosso HTML. A estrela dupla se refere a qualquer pasta nos layouts, ou pode até mesmo não ser nenhuma pasta nos layouts Se não tivermos novas pastas, faça uma vírgula e uma nova linha e colocaremos algumas vírgulas invertidas e faremos o conteúdo estrela, estrela, estrela, Isso se referirá a qualquer um dos arquivos markdown se eles estiverem em uma pasta ou não dentro do conteúdo Agora, isso fornecerá apenas classes CSS HTML para classes CSS HTML para postagens que foram explicitamente escritas em markdown É Pss que não conhecerá nenhuma tag HTML produzida por meio de markdown Agora que configuramos isso, o que podemos fazer é ir até lá. Diz autoprefixer. Colocaremos uma vírgula e depois executaremos a purga. A constante CSS, que se referirá novamente aqui. Nós colocamos o plugue e o executamos com essas configurações. Vamos dar uma chance. Vamos salvar nossa configuração. Temos que executar o produto, renderizar a produção para verificar se ele funciona. Em seguida, clicaremos no link com o controle ou abriremos seu navegador. Se você já o tiver em execução, atualize sua página, clicaremos com o botão direito do mouse e inspecionaremos Em seguida, vamos para os três pontos. E vamos usar mais ferramentas. E vamos fazer a cobertura. A cobertura aparecerá na parte inferior. Você tem que recarregar. Você pode fazer o controle R ou o comando R, ou você pode pressionar o botão Recarregar e recarregar seu site E ele monitora quantidade de recursos que foram usados. Por exemplo, o arquivo Javascript, 65% do arquivo Javascript Bootstrap não é usado Você pode ignorar a carga da biblioteca porque ela é do Hugo. Mas o SS principal diz que 47% não é usado Vamos fazer uma verificação em um minuto. Vamos comparar isso com o script de desenvolvimento nenhum desses plug-ins está em execução. Mas faremos uma verificação rápida de que todas as páginas estão funcionando. Antes de continuarmos, encontramos nosso primeiro problema, que é a paginação paginação não foi fornecida por meio do arquivo HTML, foi fornecida por meio de um modelo embutido do Hugo Vamos voltar ao projeto rapidamente e dar uma olhada nele. Uma rápida recapitulação caso você tenha feito o último curso, para que você possa ver exatamente como isso funciona Se você entrar em layouts e usar o padrão, liste Html. Você verá na parte inferior que estamos inserindo o modelo de paginação interna de Hugo Volte ao site e nós inspecionamos. E veremos quais classes estão sendo usadas. Na verdade, clicaremos com o botão direito do mouse na navegação quebrada e a inspecionaremos Temos algumas aulas. Temos paginação, página padrão desativado, item de página ativo E então temos o link da página que é para cada link fornecido. Agora, vamos voltar para limpar o CSS, a configuração e configurá-lo para que ele coloque essas classes CSS na lista branca Se você acessar a página de documentos do Pss, limpar o CSS.com e o link op na seção de recursos, vamos para a vamos para Você verá que há algumas maneiras pelas quais podemos fornecer essas informações para limpar o CSS Há uma lista segura padrão na qual você pode colocar uma lista de aulas ou podemos fazer é fornecer formulários padrão profundos e gananciosos Há alguns exemplos aqui. Se você olhar para greedy, isso é muito útil para nós porque usará o texto que você forneceu Também terá aulas em ambos os lados. Esses exemplos estão usando o texto no final da aula. Se nos livrarmos desse cifrão e colocarmos uma cenoura, que é o turno seis, no início, usaremos o texto no início da string e esses são comandos re jx Vamos entrar em nossa configuração e vamos configurá-la, copiar e colar essa configuração de lista segura. Vamos voltar aos nossos projetos e configurá-los. Colocaremos uma vírgula no final da seção de conteúdo. Colaremos o que obtivemos dos documentos e excluiremos o que está dentro do deep and standard e também do greedy Por enquanto, comentaremos de forma padrão e profunda porque não vamos usá-los. Vamos escrever uma lista rápida de todas as classes que estamos tentando atingir. Essas são todas as nossas aulas. Vamos escrever algumas rejeições. Começaremos com os dois primeiros. Se fizermos uma barra e depois uma cenoura, que é shift six e depois paginação, ela também assumirá a paginação padrão Em seguida, colocaremos isso em uma nova linha para tornar as coisas um pouco mais fáceis de ler. Coloque uma barra final e depois uma vírgula para nossa próxima cenoura rejeitada A cenoura combina esse texto com o início da string. Não corresponderá a nada antes da palavra paginação, mas corresponderá às coisas depois dela, porque estamos usando Em seguida, você combinará a página que reunirá todas essas classes aqui embaixo. Vamos deletar nossas anotações. Vamos guardar isso, vamos verificar o site. Está ótimo. Temos nossos links desativados para páginas anteriores na primeira página, que está desativada porque já estamos na primeira página. Temos a página atual destacada em azul. Temos a segunda página e os links da próxima página e da última página , todos funcionando. Ótimo. Vamos fazer uma comparação rápida agora para ver quanto tamanho de arquivo realmente salvamos. O que vamos fazer é desativar a limpeza de CSS. Vou colocá-lo em sua própria linha, depois vou comentar com um duplo e salvá-lo. Em seguida, voltaremos ao navegador, inspecionaremos e atualizaremos Estou vendo 165 kilobytes e 96% sem uso. Em seguida, reativarei o CSS de limpeza. Vamos atualizar com o controle ou comando R, temos 13 kilobytes e Essa é uma grande redução se você conseguiu chegar a esse estágio que habilitou o CSS e reduziu substancialmente o tamanho do arquivo Na seção de cobertura, você tem uma porcentagem muito menor que não é usada e conseguiu fazer sua paginação funcionar Você está pronto para passar para a próxima lição. Veja lá. 12. Lição12: Agora que terminamos de escrever nosso código para a compilação da fonte SCSS, agora vamos mover todo esse script para uma parte para que ele possa ser usado novamente na importação de outros arquivos Dessa forma, não precisamos copiar e colar nosso código. Podemos simplesmente chamar a parcial várias vezes com parâmetros diferentes. A primeira coisa que precisamos fazer para criar nossa parcial é colocá-la na cabeça e encontrar o código que queremos mover. Toda essa seção aqui será movida para uma parcial. Vamos cortar esse código e depois voltaremos para nossa pasta de parciais. Vamos criar um novo arquivo. Vamos chamá-lo de lib sa hl. A razão pela qual eu o chamo de libsas é porque em nossa configuração estamos forçando Hugo Che Lipsas, que atualmente é o padrão Mas isso pode mudar e não queremos mudanças significativas. Vamos guardar isso aqui. Nosso alvo é o arquivo. Vou destacar isso e controlar ou comandar X para cortá-lo e substituí-lo por um ponto. E salvaremos o arquivo. Em seguida, vamos configurar, chamar nossa parcial para que o arquivo que estamos tentando recuperar seja o contexto da parcial Voltamos à nossa cabeça, colocamos os dois colchetes e executaremos a função chamada parcial A parcial será, como você não precisa inserir HTML, depois das libsas, normalmente, para uma parcial, você colocaria um ponto final Você está fornecendo todo o contexto do seu projeto Hugo ao parcial Mas, nesse caso, vamos colar o nome do arquivo. Agora, por exemplo, queríamos criar um arquivo Vendors CS. Voltaremos aos nossos ativos e ao CSS, criaremos um novo arquivo e o chamaremos de fornecedores. Então, é tão fácil quanto fazer uma nova parcial. Poderíamos até copiar e colar esse. Mudaremos main para CSS do fornecedor. Digamos que devêssemos inserir alguns plug-ins de terceiros. Poderíamos executar o código deles no arquivo do fornecedor se quisermos dividi-lo e manter o tamanho do arquivo baixo para diminuir o tempo de carregamento da página devido ao carregamento simultâneo dos arquivos Essa é uma ótima maneira de fazer isso por enquanto. Eu vou comentar isso. Para comentar as tags Hugo, colocamos barra com estrela e depois uma barra com estrela Porque eu não estou usando esse arquivo atualmente. Vamos executá-lo e verificar se funciona. Parece que está funcionando bem. Basta ir e inspecionar nossas fontes. Tudo ainda está sendo inserido como desejávamos. Se você ainda conseguiu gerar o CSS mesmo depois de colocar seu código em uma parte, você está pronto para passar para a próxima lição. 13. Lição13: Então, terminamos de lidar com os pacotes NPM e o script Agora vamos ver como importar apenas as partes da fonte do Bootstrap de que precisamos Isso reduzirá substancialmente o tamanho do arquivo e, de certa forma, é melhor do que o Perd CSS. Mas, obviamente, há coisas que o Perd CSS faz que você não pode fazer por meio da importação seletiva Começarei esta lição no site do Bootstrap Five Docs e colocarei o link para esta página específica Na seção de recursos, vamos personalizar e Sas. Atualmente, temos nosso projeto configurado para importar todo o projeto Bootstrap, mas o foco desta lição é criar uma importação enxuta Estamos apenas importando as partes do Bootstrap que queremos para o nosso site Essa é a opção A. Vamos analisar a opção B. E é assim que incluímos apenas partes do Bootstrap Você verá aqui que eles o dividiram em pedaços. Mas se você ler o texto com muito cuidado, precisará incluir tudo o que quiser. E eles estão incluindo apenas partes dela aqui para você. O que vamos fazer é mergulhar pacote Bootstrap e dar uma olhada em todas as diferentes partes que são importadas E configure nosso próprio arquivo SS principal para importar apenas as partes do Bootstrap de que precisamos Começaremos copiando e colando tudo o que está aqui Em seguida, abriremos a pasta Assets e o CSS e o CSS principal. E você verá originalmente que estamos importando todo o projeto Bootstrap Vamos apenas comentar isso por enquanto , pois é uma boa referência. Em seguida, colaremos o texto que acabamos de copiar do site do Bootstrap Verifique a referência acima, você verá que temos bootstraps Bootstraps aqui. Nos exemplos fornecidos, você tem módulos de nó, teremos que remover essa parte dos módulos de nó no início. Você pode fazer tudo de uma vez apenas destacando e clicando botão direito do mouse e alterando todas as ocorrências E vamos remover isso, está pronto para ser usado. No entanto, ainda não incluímos todos os componentes do Bootstrap. Vamos salvar nosso arquivo e depois vamos conferir o que o Bootstrap tem em seus projetos Abriremos os módulos de nós, uma olhada e encontraremos o Bootstrap Estamos procurando nas pastas CSS, como aqui. Bootstraps+n' navegue até este arquivo original, BootstrapsS. Isso está bem na parte inferior. Esses são alguns outros arquivos. Temos utilitários, reinicialização e rede elétrica. Importações opcionais. Pessoas que não querem usar toda a biblioteca do Bootstrap Eles provavelmente apenas importarão, por exemplo, a grade ou a reinicialização Se estivermos olhando aqui, você verá todos os componentes. Vamos destacar todos eles. Copie-os. Em seguida, fecharemos a pasta Node Modules porque ela é sempre grande e volumosa Volte aqui e vamos colá-los na parte inferior. E então descobriremos o que temos e o que não temos. Temos funções na parte superior para que possamos removê-las. Temos variáveis e combinações. Ainda não temos serviços públicos, então tudo isso até o final Nós não os importamos. Agora temos um pequeno problema. É por isso que precisamos configurar o caminho porque atualmente esses links são relativos à bootstrap na pasta de módulos do nó, enquanto nossos links de importação aqui são relativos ao nosso arquivo O que faremos é destacar tudo isso. Corte-os e depois os colaremos aqui. Teremos que destacar a primeira parte do URL. Em seguida, mantenha pressionada a tecla antiga, clique no início dessas importações e cole-a. Outra maneira de fazer isso é destacar tudo o que está lá, apenas os que você não tem, o URL completo e cortá-los. Crie um novo arquivo, cole-o lá, volte e destaque a parte que você precisa adicionar. Copie isso. Em seguida, você pode destacar essa parte do código, clicar com o botão direito do mouse e alterar todas as ocorrências. Use a tecla de seta e cole-a. Economize muito tempo. Então vamos cortar isso. Feche o arquivo. E cole. Estamos quase lá. A próxima coisa que precisamos fazer é criar um arquivo para as substituições de variáveis padrão e criar um arquivo para código personalizado adicional Voltaremos para nossa pasta SCSS e criaremos um novo arquivo Agora, arquivos que não devem ser importados diretamente, usamos sublinhados Vamos sublinhar variáveis personalizadas, CSS, sublinhar CSS personalizado Em seguida, voltaremos ao nosso site principal e colocaremos um link de importação nele. Você não precisa passar o mouse sobre o sublinhado ao executar uma importação, vamos criar variáveis que não precisam do CSS Ele resolve isso automaticamente. Devemos colocar o cólon no final. Em seguida, vamos rolar até o final. Etapa cinco, faremos uma importação e será um CSS personalizado. Vou colocar uma coluna e vamos corrigir o nome desse arquivo e acabamos com um sublinhado Tudo bem Diremos que vamos executá-lo, verificaremos se tudo funciona. E então voltaremos e começaremos a desabilitar algumas partes do Bootstrap para ajudar a torná-lo mais enxuto e realmente importar as partes de que precisamos Isso, no entanto, não é tão bom quanto a etapa anterior. Nós limpamos o CSS Você precisa executar essas duas coisas juntas para realmente obter um arquivo pequeno. Vamos executar o script de desenvolvimento. A página ainda está funcionando. Dê uma olhada rápida, podemos ver que temos os cartões de imagens da barra de navegação, temos a paginação Essas são algumas das coisas que precisamos garantir que não removamos. Vamos examinar nossa lista. Não podemos remover nenhum dos itens de configuração em um a quatro, podemos ficar examinando os componentes. É mais do que provável que você precise ter root e reinicializar. Digite imagens, latas de contêineres e grade, não estamos usando tabelas, podemos comentar isso. Na verdade, você pode destacar algumas coisas. Novo controle K C ou comando C no código VS. Precisaremos de botões. Destacaremos as transições e os menus suspensos. Grupo de botões, precisaremos de navegação, barra de navegação e cartão. Não estamos usando acordeão ou migalhas de pão. Controle o KC para comentá-los, somos um grupo de alerta ou progresso, feche, brinde, dica de ferramenta modal, pule sobre o carrossel, giradores da tela ou espaços reservados controlam o KC para eliminá-los espaços reservados controlam Manteremos a API de ajudantes lá. Guardaremos isso e verificaremos nosso site. Você precisa examinar cuidadosamente todo o site e garantir que nenhum CSS do seu site tenha sido quebrado pelo que você acabou de fazer. É um processo um pouco trabalhoso, mas toda vez que você restringe as importações de CSS ou altera ou limpa a configuração de CSS, é muito importante verificar se não quebrou o site, está tudo ótimo Se você conseguiu reduzir a importação de CSS do bootstrap para apenas alguns componentes necessários e não quebrou o CSS do seu site, está pronto para passar para a próxima etapa e está se saindo muito bem com o projeto 14. Lição14: Agora, veremos como personalizar o arquivo CSS do Bootstrap que foi gerado para que ele tenha coisas como cores, tamanhos e sombras de estilo que correspondam à aparência o arquivo CSS do Bootstrap que foi gerado para que ele tenha coisas como cores, que queremos Por padrão, o Bootstrap é bastante genérico e existem muitos sites que usam os padrões do Bootstrap Estamos pensando em alterá-los, mas sem criar CSS adicional que acabará por criar arquivos maiores para seu site. Na verdade, vamos alterar a fonte do Bootstrap para que a saída seja diferente Mas estamos fazendo isso sem tocar arquivos na pasta de módulos do nó Basta criar nosso próprio arquivo de variáveis. Vamos começar esta lição na mesma página de documentos de bootstrap da anterior Na página, concluímos tudo na seção de estrutura e importação de arquivos Agora estamos nos padrões de variáveis. E diz que cada variável as no Bootstrap inclui o sinalizador padrão de exclamação. Se você remover isso, poderá substituir esse padrão com sua própria variável sem modificar os códigos-fonte do bootstrap Você não precisa modificar o código-fonte do bootstrap. Você também não precisa usar seu próprio CSS para sobrescrevê-lo Na verdade, podemos modificar código-fonte do bootstrap por meio de nossas próprias variáveis O Bootstrap é instalado na pasta sem módulos. Não modificamos nada lá, apenas fornecemos nossas próprias variáveis. Ao importarmos o Bootstrap, você encontrará uma lista completa das variáveis do Bootstraps no arquivo SS das variáveis de sublinhado Vamos verificar isso em um minuto, porque é daí que vamos copiá-los e colá-los. Você precisa importar as funções de bootstraps, que temos, então já configuramos nosso próprio arquivo para esta seção Aqui, o que faremos é entrar e conferir arquivo CSS da variável bootstrap E então começaremos a criar o tema do nosso site por meio de variáveis. No primeiro exemplo, copiaremos e colaremos as variáveis que o Bootstrap nos forneceu para fundo e a cor do texto para o corpo Antes de mergulharmos na pasta de módulos do nó, abriremos nossa pasta de variáveis personalizadas e as colaremos. Estamos criando um tema com um fundo preto e uma cor de texto muito escura Sempre guardaremos isso, mas vamos salvá-lo e dar uma olhada. Obviamente funcionou. Não é a melhor ideia, mas pelo menos sabemos que funciona. Vamos voltar agora e reformular nosso site de acordo com o nosso gosto Nos disse para excluí-los completamente e salvá-los. Como você pode ver, ele voltou às cores padrão originais Vou descer até os Módulos do Node, inseri-los no Bootstrap e depois abrir as variáveis É aqui que encontramos todas as variáveis padrão. A primeira coisa que faremos é descer e encontrar as variáveis para a do texto e a cor do plano de fundo. Depois de analisar isso algumas vezes, você começará a se lembrar da localização de tudo. Todas as variáveis comuns aqui. Temos o plano de fundo do corpo, cor do corpo e a linha do texto. Vamos apenas copiar os dois primeiros. Aqui está o problema. Eu só vou colá-los. Aqui está nosso primeiro problema. Se eu salvar isso, o compilador SCSS live Sas não saberá o que significa branco e não saberá o que significa grão 900 O motivo pelo qual ele não saberá é porque, neste momento , a única coisa importada são as funções. Ele não importou nenhuma dessas variáveis de cor que podemos ver aqui. Vou guardar isso. Está gerando um erro e diz variável indefinida Se eu comentar isso e salvar, gerará um erro diferente, que é a variável indefinida cinza, 900 O que temos que fazer é ir contra o que os documentos do SCSS recomendam. Se você não tem certeza do que são os documentos do SCSS, é uma gíria que entra lá, você encontrará todos os documentos para executar CSS e, como é Mas se você olhar os documentos, por padrão, cada página realmente usa CSS como padrão. Por exemplo, entraremos em uma das páginas, ela já está no SCSS Podemos alterá-lo para SS, mas o padrão é SCSS porque o SCSS realmente Isso porque o SSS é, na verdade, escrito exatamente como o CSS, com algumas pequenas diferenças que estão fora do escopo dessa classe Para resolver nosso problema, temos que entrar em variáveis e encontrar a variável branca e a variável grão 100. E temos que declarar essas variáveis antes de modificá-las Nessas aulas, o que faremos é colocar algumas linhas em branco. Volte para Variáveis e voltaremos para cima. Algumas pessoas copiam e colam o arquivo inteiro, mas é um pouco excessivo. Vamos copiar e colar em nossos tons de cinza na parte superior. Podemos deixá-las com as tags padrão, se quisermos , porque não as estamos modificando. E então vamos descer e encontrar nossas cores. Aqui estão as cores básicas. Cole-os. Eu diria que há uma grande chance de você precisar mapear as cores para primárias e secundárias e assim por diante Então, podemos muito bem colocá-los. Bem, certo. É necessário garantir que o pedido também seja o mesmo. Porque aqui o primário se refere ao azul e, em seguida, o azul é declarado aqui. Agora vamos remover o padrão em vez do branco, vamos alterá-lo para claro, que é uma cor muito mais suave, pois a cor do corpo do fundo está atualmente em cinza 900 Recon, vamos experimentá-lo em cinza 800 em vez disso. Vamos guardar isso, vamos verificar. Está ótimo. A cor do nosso texto é muito mais suave. Planos de fundo. Um slide esbranquiçado. Se inspecionarmos e prosseguirmos, você verá que a cor é uma variável Bs, cor do corpo, cor de fundo é BS, corpo BG. Vamos clicar nele, você verá que há um 800 cinza. Se procurarmos o fundo do corpo, na verdade é um IGB, mas essa é a nossa cor clara Isso está funcionando. Bem, vamos continuar agora e mudaremos nossa cor primária para algo um pouco mais palatável É muito comum que as pessoas usem essa cor azul. Em seguida, podemos prosseguir e também mudaremos a aparência de nossas cartas. A maneira mais fácil de fazer isso é nos livrarmos do azul. Na verdade, podemos escolher apenas uma dessas cores. Essa é a maneira mais básica. Então eu vou te mostrar uma maneira mais avançada. Não queremos mais ser azuis. Queremos que seja, por exemplo, laranja. Estamos apenas digitando a variável laranja porque ela já foi declarada aqui Vamos salvar essa alteração. Nosso secundário pode tornar 700 um pouco mais escuro. Só tenha cuidado. Mas como texto do nosso botão também é cinza, não queremos entrar em conflito Nossas primárias agora se tornam laranja. E em todos os lugares em que usamos primário para qualquer um dos nossos elementos, ele agora mudou em todo o site, que é muito mais fácil do que substituir o CSS Em seguida, entraremos e trocaremos nossas cartas. Entraremos em nosso arquivo de variáveis o arquivo bootstrap do pacote MPM. Faremos o controle e procuraremos o cartão. Agora estamos na seção de cartas. Vamos destacar tudo isso. E vamos ter cuidado porque está se referindo a outras variáveis e isso causará um erro. Vamos copiar e colar. Voltaremos às nossas variáveis personalizadas. Vamos tentar manter as coisas na mesma ordem. Teremos que achar complicada a largura da borda do espaçador. Como você pode ver, é por isso que algumas pessoas simplesmente copiam e colam o arquivo inteiro. O que realmente nos preocupa, no entanto, eu gostaria de alterar o raio, vamos para o raio da borda do cartão, ele usa o raio da borda Uma maneira de fazer isso é realmente excluir partes. Portanto, não queremos modificar para dizer que eu só queria alterar o raio da borda Também pode alterar a espessura da borda. Vou deletar os três primeiros. Vamos deixar a cor por enquanto. Vamos mudar o raio. Vou deletar o resto deles apenas para simplificar as coisas. Temos algumas variáveis aqui, temos raio e largura da borda Vamos apenas guardar isso. Você verá que isso gerará um erro. Voltaremos ao nosso arquivo de variáveis e pesquisaremos a largura e o raio da borda A maneira mais fácil de fazer isso é voltar para a largura da borda de controle superior. Temos uma largura de borda de um. A maneira mais fácil de mudar é simplesmente colocar um valor de dois P x três Px e assim por diante. Então temos o raio da fronteira. Vou copiar tudo colocá-lo acima dos cartões. Digamos, por exemplo, que eu queira alterar o raio da minha borda. Antes de tudo, livre-se do padrão. Eu poderia alterá-lo para, digamos, por exemplo, para dar a ele um pequeno raio Nossa largura de borda, que atualmente está em um pixel, pode mudar isso para dois P X. E vamos salvar isso e dar uma olhada Agora temos nossa borda de dois pixels de largura e nosso raio estreito Se clicarmos com o botão direito do mouse, inspecionarmos e acessarmos a etiqueta do cartão, você verá o raio da borda de 0,2 m, que é um raio de borda muito estreito Em seguida, contorne uma borda de 22 pixels de espessura. Isso é feito exatamente como pedimos. Se você rolar até o final de praticamente todas as seções dos documentos do bootstrap, ele realmente dirá quais variáveis você pode substituir para personalizar, é muito útil Digamos, por exemplo, que você queria ter uma borda de dois pixels em seus cartões, mas queria que tudo com uma borda tivesse dois pixels. Isso é muito fácil. Vamos apenas deixá-lo na largura da borda padrão. Você pode até comentar isso porque não estamos ignorando isso Em seguida, voltamos à largura da borda, que não copiamos e colamos. Vamos encontrar a largura da borda novamente, verifique se você está procurando a primeira instância. Vamos voltar para o primeiro. Então, copiaremos e colaremos a largura da borda, para garantir que esteja na ordem correta. Então vamos mudar esses dois. Agora, cada item em seu site que tem uma borda, agora teremos uma largura de dois. E ainda teremos uma largura de borda de dois. A última coisa que precisamos fazer é observar as cores e as mudanças de cores. Não usando bootstraps, cores padrão antes de mudarmos o primário para laranja E isso foi usando uma laranja embutida. Há duas maneiras de fazer isso. Em primeiro lugar, analisaremos a modificação da laranja Vamos remover a bandeira padrão no código VS. É muito fácil, basta passar o mouse sobre a pequena amostra que ela lhe dá Então, podemos fazer algumas mudanças. Então, queríamos trazer um pouco mais de vermelho para ele. Podemos nos arrastar para cima, na verdade não é mais uma laranja que mudou, então é mais uma explosão de sol Vamos guardar isso. Agora, o laranja é transformado em um vermelho mais intenso. Da outra forma que podemos fazer isso, vou apenas comentar que laranja não comentará porque pode ser necessária no futuro. Vou controlar Ed para trazê-lo de volta. A outra coisa que podemos fazer é que, em vez de usar uma variável aqui, podemos colocar um hash e depois uma cor Por exemplo, se começarmos com branco, por exemplo, passe o mouse sobre Podemos então entrar lá e personalizar para qualquer cor. Onde. Depois que depender totalmente de nós, acho que posso escolher um belo azul profundo. Bem, tenha cuidado com o blues, porque em muitos sites de bootstrap, vamos salvá-lo Essa é a nossa principal. Eu recomendo, se possível, que você os mapeie para variáveis de cor. Dessa forma, você pode usá-los mais abaixo em seu código. Mas de qualquer forma, essa é uma maneira de fazer isso. Então vamos dar uma olhada. Nosso azul profundo está sendo reproduzido em todo o site. Se você conseguiu substituir as variáveis do bootstrap e alterou com sucesso alguns componentes do site por meio dos diferentes métodos que mostrei, você está pronto para passar para a próxima lição 15. Lição15: Agora vamos ver como criar nossas próprias classes de utilitários. Ou seja, classes como as que usamos que fazem parte do bootstrap Mas vamos fazer nossos próprios porque às vezes o bootstrap simplesmente não é suficiente Existe uma API, um sistema incorporado ao Bootstrap que nos permite criar nossas próprias classes com bastante facilidade Vamos começar esta lição novamente em uma página do Bootstrap Do Agora estamos analisando a API do utilitário que está na seção de utilitários em API no Bootstrap five Usamos a API de utilitários para gerar nossas próprias classes de utilitários? Classes utilitárias são as classes que usamos com o Bootstrap As duas coisas que são necessárias quando você cria nossas próprias classes são a propriedade que você está segmentando e os valores que você está atribuindo a ela Se você rolar para baixo, o primeiro exemplo é bem simples. Temos uma propriedade de opacidade. Temos valores de 0,25507500 e atribuímos valores de 0,25 0,5 0,75 0,1 Você provavelmente não usará 100, a menos que esteja tentando substituir Se usarmos um valor de 25, por exemplo, que será opacidade 25, teremos opacidade de 0,25 teremos opacidade de 0,25 Agora você pode estar pensando que é uma palavra bem longa. Você precisa digitar toda vez e provavelmente não é necessário. E é aí que você pode adicionar classe. No próximo exemplo, estamos fornecendo uma classe de O e essa é a letra, o número zero e temos nossos mesmos valores. E então produz 02550 e assim por diante. Reduzimos com a classe personalizada. Ainda estamos focando na opacidade, mas agora temos uma Eles são um pouco difíceis de implementar. Percorreremos os estados mais tarde. Se você rolar até a parte inferior abaixo usando a API, há um exemplo aqui. Precisamos ter funções, variáveis e utilitários importados , variáveis e utilitários Depois de importar os utilitários, podemos realizar um mapa Combine com nosso próprio mapa de utilitários. Esse será o único mapa. Por fim, copiaremos e colaremos esse exemplo de como usá-lo. Bem, então vá para os ativos e o SCSS no Maine. Vamos passar por baixo de onde importamos serviços públicos. Vamos reorganizar isso em um minuto. Vamos fazer com que tudo funcione. Vamos colar isso. Então, voltaremos à nossa capacidade. Vamos usá-lo com a classe personalizada. Copiaremos apenas a seção com opacidade incluindo os colchetes necessários . Vamos copiar isso. Em seguida, eliminaremos a seção do cursor Certifique-se de selecionar os colchetes corretos ao fazer isso Vamos colar isso em O Shift para reformatar. Vamos guardar isso. Em seguida, adicionaremos a turma à imagem em nosso site. Vamos, provavelmente, usar a opacidade de 0,75. Por enquanto, entrar em layouts Procuraremos nossa imagem , iremos às aulas e colocaremos 75 unidades de desconto. Em seguida, executaremos o servidor Dev. Nossa imagem está muito mais transparente do que costumava ser. Se a inspecionarmos, podemos ver aquela classe aqui dizendo que a classe cria uma opacidade de 0,75. Mas podemos fazer melhor do que isso porque a próxima coisa em nossos documentos inicializados são os nossos documentos inicializados Analisamos a propriedade e a classe, agora estamos analisando o estado e, por exemplo, Hova, isso é útil O que faremos é copiar e colar esse exemplo. Só a parte da opacidade. Poderíamos até mesmo copiar e colar a linha Hova, se você quisesse Em seguida, voltaremos à rede elétrica e destacaremos o código existente. Provavelmente poderíamos simplesmente adicionar a linha extra, mas colar em nosso novo formato de código. Agora, ele criará as tags de opacidade originais de 25, 50 e assim por diante Também teremos a opção do estado de Hova. Vou salvar isso. Vamos dar uma olhada no CSS e dar uma olhada. Antes de fazermos isso, há um exemplo aqui. Eu tenho opacidade, mas você também obterá essa opacidade, opacidade 25, bem como os estados de Hova, temos Acho que podemos deixar opacidade como nome de classe. Um pouco fácil de lembrar. Se você está acessando um site que não vê há algum tempo, provavelmente é um pouco mais fácil refrescar sua memória Temos o site, vamos inspecionar, entrar nas fontes, abrir a pasta SCSS Já estou nesse ponto em que você pode controlar e digitar a opacidade Então você verá que temos opacidade zero, que é opacidade que é opacidade Então temos opacidade zero. Fogão, não muito útil, zero, mas por exemplo 25 e depois 25 Hoa Podemos configurar um objeto de forma que, à medida que o mouse passa sobre ele, ele fique mais transparente. Vamos continuar com isso. Voltaremos ao índice Html. Desta vez, faremos opacidade 75, passe o mouse. E vamos guardar isso. Então, ao passar o mouse, obtemos o efeito de opacidade. Vamos até nossas cartas e vamos configurá-las para que todas as cartas tenham esse efeito. Vou apenas remover esse efeito da imagem do herói porque não acho que seja muito apropriado. Faça o controle X. Em seguida, vou rolar para baixo até nossos cartões, até a imagem Vamos para a aula e vamos colar isso. Isso será aplicado a todas as cartas porque estamos variando as cartas a partir dos parâmetros. Se você ainda não fez meu curso de introdução, vou te mostrar rapidamente. Vamos acessar o conteúdo e depois indexar. Você verá os cartões aqui e nós configuramos, cada traço é um novo cartão, e esses dados são colocados em loop sobre o cartão, um cartão dois, cartão três, produzindo três cartões partir de um cartão no valor de Vamos salvar isso, então você pode ver que, ao passar o mouse sobre eles, obtemos o efeito de foco Se você conseguir criar suas próprias classes utilitárias, especialmente usando um estado que é ótimo para realmente levar as botas a um novo nível , você terminou esta lição. 16. Conclusão de aula16 p1: Parabéns por chegar ao final do primeiro projeto. Com certeza tem muito o que aprender. Lembre-se de compartilhar um link com seu trabalho na seção do projeto para que eu possa dar uma olhada no seu trabalho no projeto dois. 17. Lição17: Bem-vindo ao projeto dois. O projeto dois é um projeto criativo. Você precisa estilizar a página inicial ou de destino e a página sobre usando as seguintes técnicas. Modifique as variáveis de bootstrap. Eu dei uma aula em vídeo sobre como fazer isso. Você faz isso por meio do arquivo SCSS. Você também precisa alterar as classes do utilitário CSS do Bootstrap no HTML do singlet e nos modelos HTML de ponto índice O arquivo HTML singlet é para a página sobre, e o arquivo HTL de índice é para a página inicial ou de destino Você também precisa criar suas próprias novas classes de utilitários usando a API do utilitário Bootstrap Por exemplo, em um Hoa, eu dei uma aula em vídeo sobre como fazer isso Também forneci alguns links para alguns exemplos de ideias de estilo na seção de recursos do projeto dois Estou realmente ansioso para ver seu trabalho em seu próprio projeto. Certifique-se de compartilhar o link. Você pode usar serviços como Cloud, Dropbox, One Drive ou Google Drive e compartilhar um link para a pasta que contém seu trabalho Mal posso esperar para dar a vocês alguns comentários. 18. Conclusão do projeto 2: Parabéns por ter chegado até aqui e até o final do projeto dois. Lembre-se de que, se você ainda não fez o upload de um link para seu trabalho na seção do projeto , eu posso lhe dar um feedback. Obrigado por fazer este curso. Tem sido ótimo trabalhar com você. Estou sempre fazendo upload de novos cursos sobre web design estático, Hugo e Te vejo no meu próximo curso.