Transcrições
1. Introdução: Oi, eu sou Christopher Dodd e nesta aula vamos aprender como aumentar seu desenvolvimento CSS usando Sass. Sass é uma linguagem de script de pré-processador que é interpretada ou compilada em CSS. É essencialmente uma linguagem de programação que nos permite escrever CSS com recursos de
programação como variáveis, aninhamento e cálculos. Claro, antes de tomar esta classe, você já deve estar familiarizado com CSS. Mas se você usa CSS há algum tempo, você provavelmente enfrentou algumas situações em que você teve que escrever seletores
ridiculamente longos ou esqueceu o código hexadecimal ou RGBA de uma cor que você tem usado em todo o documento. Bem, estes são apenas alguns dos poucos problemas que Sass nos ajuda a resolver e confiar em mim, uma vez que você começar a usar Sass, você não vai querer voltar para a velha maneira de escrever CSS. Então, como o título sugere, esta classe vai ser toda sobre como melhorar seu fluxo de trabalho de desenvolvimento CSS com Sass. Vamos ver como Sass funciona, e então vamos começar a usá-lo, refatoração do código CSS existente para usar alguns dos melhores recursos do Sass. Então, se você está pronto para sobrecarregar seu desenvolvimento CSS com Sass, clique no próximo vídeo e eu vou vê-lo por dentro.
2. Como a Sass funciona: Antes de começarmos a analisar alguns dos recursos do SASS, eu queria ter certeza de que todos nós entendemos como o SASS realmente funciona. Deixe-me ser claro. SASS não substitui CSS, ajuda a gerá-lo. Como você já deve saber, HTML é a linguagem de marcação para a web, CSS é a linguagem que descreve o estilo de HTML, e JavaScript é a linguagem de programação da web. Essas linguagens são o padrão quando se trata de desenvolvimento web
front-end e SASS não muda isso. SASS não é algo que pode ser executado em seu navegador. Em vez disso, o SASS adiciona outra camada ao nosso desenvolvimento de CSS. Ele vai exigir um pedaço extra de software que leva o código SASS e compilá-lo em CSS, que CSS compilado agora será executado no navegador como um arquivo CSS normal. Dado que CSS permanecerá a linguagem da folha de estilo da web, por que precisamos adicionar uma camada extra aqui? A resposta é que não precisamos usar o SASS, mas usá-lo apenas torna as coisas muito mais fáceis quando começamos a trabalhar em projetos maiores. Para transformar o código SASS em CSS, é necessário
um software para compilar o código SASS, e este software pode ser baseado na nuvem ou ser executado localmente. Na próxima lição, demonstrarei os recursos legais do SASs usando uma ferramenta baseada em nuvem
e, na lição a seguir, aprenderemos como configurar uma ferramenta em seu próprio computador para compilar SASs. Soa bem? Ótimo. Vamos pular para a próxima lição, onde vamos começar a escrever alguns SASs reais.
3. Os principais recursos da Sass: Como é o caso de aprender praticamente qualquer tecnologia na web, o melhor lugar para começar é o site oficial. Estou aqui em sass-lang.com e este é o site para Sass. Como você pode ver, muita informação aqui. Vou clicar neste link para aprender Sass. Aqui você pode ver uma página para o básico do Sass. Estes são alguns dos recursos que vamos falar neste vídeo. Se você se perder em algum momento, você pode apenas vir aqui para referência. Observe que para cada um desses exemplos, há uma versão Sass e uma versão SCSS. Vamos cobrir a diferença entre esses dois nesta lição também. Não se preocupe com isso ainda, vamos cobrir isso muito em breve. Para demonstrar esses recursos principais, eu não quero começar com a instalação de um compilador em seu computador ainda. Quero começar a mostrar-te o Sass. Vou começar com um emulador Sass baseado na nuvem aqui. Esse chama-se sassmeister.com. Aqui você pode ver que ele já está salvo algum código de exemplo no qual eu já estive trabalhando. Deixe-me esclarecer isso, e vamos recriá-lo agora para vocês, para verem o que está acontecendo. Pouco antes de começarmos com a sintaxe Sass, eu queria mencionar brevemente que se você ainda não estudou CSS e sabe como usá-lo, então definitivamente vá e faça isso primeiro. Quero dizer, você pode aprender Sass e como ele gera CSS sem saber CSS, mas é muito melhor aprender CSS primeiro e depois aprender como Sass pode ajudá-lo a gerar CSS. Só que eu mencionei que eu tenho certeza que a maioria de vocês já sabe CSS, e é isso que você está aqui para aprender a escrevê-lo de forma mais eficiente, mas para aqueles de vocês que não sabem CSS em tudo ou não passaram muito tempo com ele, eu definitivamente recomendo dar um passo para trás. Há muitas aulas online. Eu tenho uma aula sobre Skillshare sobre HTML e CSS. Então sim, definitivamente recomendo que você saiba CSS antes de começar a começar com Sass. Então, com isso fora do caminho, vamos realmente aprender a primeira grande característica de Sass e que é aninhamento. Eu vou até aqui para a documentação, rolar para baixo para o ninho. Como você pode ver aqui neste exemplo que eles forneceram, nós temos elementos seletores aqui, e eles estão aninhados dentro deste elemento nav. O que isso está fazendo vai prepend nav na frente de
todos esses elementos para que você possa visá-los somente quando eles existirem dentro de um nav. A outra coisa que você vai notar sobre Sass é que não
há ponto e vírgula no final dos estilos, e não há chaves. Muita gente gosta de escrever código assim. Tudo isso é baseado em recuo. Com CSS, podemos agrupar tudo isso em uma linha, mas com Sass, definitivamente temos que ter linhas e recuo. Caso contrário, ele não saberá o que fazer, e acabamos escrevendo menos código porque não temos esses colchetes ou ponto-e-vírgula. Mas como você verá muito em breve, essa sintaxe não é a maneira usual que as pessoas gostam de fazer isso. Vamos mudar-nos para o SCSS em breve. Mas vamos realmente olhar para um exemplo diferente agora. Digamos que, por exemplo, temos um elemento de cartão, e nesse elemento de cartão temos o corpo do cartão, e nesse corpo podemos ter um botão que queremos atingir. Tudo bem, então fazendo isso do jeito Sass, eu posso escolher o corpo da carta de dentro da carta, assim. Vamos apenas dizer que queremos ter uma cor de fundo de preto e uma cor de branco. Agora o CSS vai ser gerado e como você pode ver, ele é precedido o cartão para a frente lá. Mas também podemos ir outra camada mais profunda, e talvez queiramos segmentar um elemento de botão dentro desse corpo do cartão. Vamos alternar as cores aqui. Eu vou fazer cor de fundo branco, ea cor de preto. Agora você pode ver que ainda temos cartão pré-pended para o corpo do cartão, mas também temos o nosso elemento botão selecionado aqui com o corpo do cartão e cartão precedido a ele. Isso é muito útil quando você está escrevendo muitos elementos profundamente aninhados. Se eu fosse escrever um elemento de lista, por exemplo, e talvez eu queira transformar texto em maiúsculas. Estes são todos apenas estilos aleatórios, a propósito, é apenas para mostrar como ele será gerado em CSS. Você pode ver aqui que onde se repetindo muito escrevendo-o em CSS. Bem, em vez de escrever cartão de
ponto, corpo de cartão de ponto e cavar o elemento dessa maneira, como
faríamos no CSS, podemos criar uma árvore de recuo e quebras de linha, e ele vai criá-lo para nós lá. Dito isto, também podemos colocar em um estilo para cartão aqui. Talvez queiramos estofamento de dez pixels. Podemos colocar em nossos estilos para esse elemento. Também podemos aninhar outros estilos dentro dele. Bastante fixe. Há também esse outro recurso no Sass que usa o e comercial para segmentar pseudo-classes. Uma pseudo-classe é quando você tem dois pontos atrás de um elemento, e talvez seja o primeiro filho, talvez seja o estado pairante, talvez seja a pseudo-classe depois desse elemento. Um comum é pairar, e temos um botão aqui em baixo. Poderíamos escrever outra pequena regra de estilo aqui para o estado de pairar do botão. Talvez tenhamos uma cor de fundo de cinza em vez de branco. Isso vai funcionar, mas podemos realmente fazer algo um pouco mais sexy do que isso. O que podemos fazer é aninhar isso dentro e usar um e comercial para acessar o pai ou para referenciar o pai. Agora vamos recuar isso. Agora ele vai gerar e você pode ver que nós não temos que repetir usando o botão selecionado do elemento, podemos usar o e comercial. Então, um grande uso do e comercial, como vemos aqui, é mirar uma pseudo-classe de um elemento. Na verdade, não precisamos reescrever o nome do elemento. Podemos aninhar dentro com essa pseudo-classe. Nós também podemos fazê-lo para modificar classes. Digamos, por exemplo, que tínhamos um corpo de cartão cinza. Vamos apenas dizer que usamos um sistema como BEM para escrever aulas, o que eu vou mostrar em apenas um segundo. Digamos que temos cartão, desculpe, corpo do
cartão, e usamos um modificador como cinza. Então temos uma cor de fundo cinza. Vamos ver o que temos aqui. Nós temos cardas-corpo pastando dentro das cartas. Queremos dar-lhe uma cor de fundo de cinza. Mas como podem ver aqui, repetimos com o uso do corpo do cartão. O que podemos fazer é substituir isto por um “e “comercial”. Agora, isso está sentado no cartão, então você só precisa recuar mais um. Agora você pode ver, temos exatamente o mesmo resultado de antes. Isto é o que tínhamos antes. Isto é o que temos agora. Como você pode ver, o mesmo resultado. Isso é nidificação. O próximo recurso legal que temos no SSAS são variáveis. Portanto, as variáveis são mais comumente usadas para cores, mas também podemos usá-las para valores como este preenchimento, e isso nos dá uma vantagem de definir nossas cores uma vez e depois ser capaz de mudá-las em um só lugar e para essa mudança ir ao longo de todo o projeto. Ele também nos permite dar nomes a coisas como, digamos, por exemplo, que queríamos chamar este preenchimento médio. Bem, poderíamos definir uma variável aqui em cima. Vamos fazer isso agora mesmo. Médio - preenchimento 10 pixels
e, em seguida, podemos substituir este valor aqui com a variável. Nós vamos obter o mesmo resultado em nosso CSS. Mas, se precisarmos mudar isso mais tarde, talvez queiramos um valor maior para o preenchimento médio, podemos realmente entrar e mudar a variável aqui e em qualquer lugar em nosso documento que faça referência a essa variável. Ele vai puxar o valor mais recente daqui de cima. Na maioria das vezes, no entanto, você verá variáveis usadas para cores. Aqui você pode ver que estamos usando três cores diferentes, temos preto, branco e cinza. Obviamente, a relação entre essas cores
precisa fazer sentido porque você tem que ter contraste e tudo isso. O que podemos fazer aqui é escrever alguns nomes para nossas cores e então podemos usar a variável em vez de escrevê-la explicitamente em nosso documento. Eu vou ter cor-bg-escuro. Isso vai nos permitir mudar a cor de fundo escuro agora é preto. Mas podemos entrar e mudar isso mais tarde para todos os fundos escuros, se assim quisermos. Eu também vou ter um cor-bg -light, que será branco. Lá temos o nosso fundo claro e temos o nosso fundo escuro. Também vamos ter cor texto-claro e cor texto-escuro. A cores muito básicas no momento, mas podemos entrar e substituir estes por códigos hexadecimais. benefício adicional de usar variáveis de cor é que não temos que lembrar códigos hexadecimais loucos. Se em vez de preto outra maneira de representar preto é assim, você pode ter um código hexadecimal mais louco então isso pode ser algo como isso. Não sei se pode ser qualquer coisa. Mas agora que temos nossas cores definidas aqui, agora
podemos substituir nossas cores explícitas por esses nomes de variáveis. Esta cor de fundo é a cor de fundo escura, então eu vou mudar isso aqui, e esta é a luz de texto bem aqui. Queremos um texto colorido claro em um fundo colorido escuro. Aqui temos o fundo colorido claro e o texto escuro. Temos o oposto. Também temos este cinzento. Eu só vou chamar isso de cor secundária. Podemos substituir isso por cor-secundário e col-secundário. Eu vejo que estamos usando apenas como uma cor de fundo, então talvez eu vou namespace um pouco colocando em fundo aqui, background-secondary. Uma vez que recompila o que ele faz automaticamente, vamos agora ver que temos exatamente o mesmo resultado em nosso CSS, mas temos variáveis aqui. Agora o que podemos fazer é mudar o fundo escuro e ele será atualizado aqui. Talvez queiramos usar algo agitado como este, código hexadecimal, e agora você pode ver que a cor de fundo do escuro nós realmente estamos usando apenas uma vez aqui, mas isso vai atualizar. Podemos atualizar esta cor texto-luz, mas talvez essa cor cinza seja melhor para atualizar porque estamos usando em dois lugares. Vamos mudar isso para um cinza claro. Agora você pode ver em qualquer lugar onde estamos usando essa variável está sendo alterada aqui. Agora isso é, naturalmente, útil quando você deseja alterar a aparência geral da
sua folha de estilos, alterando variáveis ou cores em um só lugar. Mas ele tem o benefício adicional de fornecer nomes
legíveis para colocar em seus atributos de cor, especialmente quando você está usando códigos hexadecimais. Houve inúmeras vezes em projetos onde eu tive que procurar o código hexadecimal que eu preciso usar para certas coisas. Se eu estivesse usando SSAS eu poderia apenas nomear esta cor primária algo como cor-primária, e sempre que eu estou usando essa cor em todo o meu documento, eu posso apenas escrever cor-primary em vez de ter que lembrar um código hexadecimal que provavelmente não vai ser tão simples como #000. Esse é outro grande benefício das variáveis. O próximo recurso que eu quero mostrar a você, e vamos apenas rotular esses recursos agora. Este é o curso número 1, aninhamento, número 2 variáveis. Vejamos extensão/herança. Este terceiro recurso, podemos voltar para os documentos, rolar para baixo para extensão/herança. Diz que este é um dos recursos mais úteis do SSAS. Ele permite que você compartilhe um conjunto de propriedades CSS de um selecionado para outro. Sinceramente, não acho que seja útil e mostrarei o porquê em um segundo. Mas vamos realmente copiar o exemplo deles e eu vou mostrar-lhe o que ele realmente faz aqui. Vamos colocar o exemplo deles aqui. Este aqui é um exemplo de algo
que não foram aplicados então eu vou apenas remover isso completamente. O exemplo que tenho aqui, uma mensagem. Se olharmos aqui para baixo o CSS compilado, temos esses quatro estilos de mensagem diferentes, que cada um compartilha essas três propriedades. Mas, dependendo se é um sucesso, é um erro ou é uma mensagem de aviso, temos cores diferentes de fundo ou borda. Como você pode ver aqui, não
estamos nem economizando muito espaço com SSAS. Se você olhar aqui é sobre a mesma quantidade de linhas entre o CSS de saída e o exemplo aqui no SSAS. Essa é uma razão pela qual eu não sou um grande fã. A outra razão pela qual eu não sou um grande fã de estende é porque eu acho que nós podemos apenas usar uma classe modificador secundário. O que eu quero dizer com isso, é que em vez de escrever tudo isso, nós apenas escrevemos uma mensagem com essas propriedades. Então podemos fazer tudo isso sem a extensão. Então tudo o que precisamos fazer em nosso HTML, é ter certeza de que incluímos ambas as classes. Incluímos a classe de mensagem e incluímos a classe de erro de sucesso e aviso. Para ser claro, este é o exemplo de ssas-lang,
e, em seguida, o meu exemplo aqui. Como você pode ver aqui, ele produz uma quantidade semelhante de linhas para ambos. Se você olhar para o meu exemplo, é uma quantidade menor que se alinha do site da SSAS. Faça seus próprios julgamentos. Mas a única vez que eu acho que realmente faz sentido usar estende no SSAS é quando você tem dois elementos que devem ter a mesma aparência, mas você realmente quer que a classe seja diferente. Talvez você tenha JavaScript anexado a este elemento ou talvez por qualquer motivo, só
faz mais sentido semanticamente ter a classe diferente, mas você quer que o estilo seja o mesmo. Bem, nesse caso, definitivamente
faz sentido usar uma extensão. Mas é raro que eu tenha essas situações, então eu sou mais fã
de escrever uma classe base e, em seguida, sempre que eu precisar criar um elemento, eu posso apenas ter a classe mensagem e a classe de sucesso nele. Se eu quiser deixar isso um pouco mais claro, posso ter mensagem — sucesso, mensagem — erro, mensagem — aviso. Contanto que eu coloque a mensagem de classe e a mensagem — sucesso
no elemento em que eu quero ter os estilos de mensagem de sucesso, então eu vou ficar bem. Podemos realmente usar um exemplo de aninhamento aqui. Podemos usar o comercial em vez disso aqui. Este é outro recurso que eu gosto do SSAS que podemos usar aqui. Precisamos de recuar estes também. Então, como podem ver, isso é muito mais compacto do que escrever isto. Decidam suas próprias mentes. Eu não sinto que estender é tão poderoso, mas está lá para o caso de você precisar usá-lo. Outra coisa que você pode fazer no SSAS é usar operadores. Isto não é particularmente útil. EVA é apenas um recurso de programação que você pode usar no SSAS. Vamos criar uma nova seção para operadores. Deixe-me rolar até aqui para os operadores. Vamos pegar esse exemplo palavra por palavra e colocá-lo em nosso playground. Os comentários que você cria aqui no SASS onde ele realmente vem através de seu CSS. By the way, esses comentários CSS padrão será. Então esta é a maneira que você pode fazer comentários em CSS e SASS, mas estes são apenas comentários SASS puros. Então estes não vão realmente passar na sua folha de estilo final, só para que você saiba. Olhando para este exemplo para operadores, temos nosso contêiner com uma largura de 100 por cento e estamos realmente fazendo algumas contas aqui para descobrir a largura do artigo e o lado ao lado dele. Como você pode ver, a saída é a porcentagem final. Se eu removi essa porcentagem do final daqui, você verá que os números aparecem com a unidade. Então precisamos dessa porcentagem lá apenas para definir a unidade, mas deve ser bem claro o que está acontecendo aqui. Estamos tomando valores absolutos de 600 em 960, e estamos transformando isso em uma porcentagem. Agora, essas larguras são responsivas, em vez de apenas 600 e 300 com base em uma largura de contêiner de 960. Se a largura do contêiner fosse 960, então poderíamos remover isso e seria o mesmo. Mas se queremos que esses contêineres sejam responsivos, então devemos usar porcentagens. Esta matemática aqui nos permite usar isso. Novamente, não é uma característica crítica do SASS. Eu não me encontro escrevendo muito matemática em SASS, mas é um recurso legal que se você precisar dele. O recurso final que vamos falar nesta lição e provavelmente está lá em cima três
primeiros recursos legais do SASS é mixins. Mixins são funções que você veria em uma linguagem de programação, exceto que podemos usá-los em SASS. Vou apenas copiar um exemplo aqui e então podemos dar uma olhada no que ele está fazendo aqui. Eu vou colar neste mixin código flex. Este mixin como uma função em qualquer linguagem de programação, leva um argumento ou um parâmetro. Esta variável irá para o mixin e pode ser usado dentro do mixin. Então aqui estamos nós, na verdade, incluindo o mixin. Então vamos dar uma olhada no que isso resulta aqui. O que temos aqui é onde colocar esse número de um dentro do nosso elemento flexível e estamos jogando isso quase como um gerador, que vai nos dar esses quatro atributos com esse número. Oh, se eu mudar aqui para dois você verá que ele atualiza para todos eles. Então o benefício disso é dizer, por exemplo, que nós não estávamos usando este mixin e então nós apenas tivemos isso assim. Agora digamos, por exemplo, algo mudou e queremos usar um valor flexível diferente. Bem, nós teríamos que entrar aqui, mudar em quatro lugares diferentes. Diga três ali, três ali, três ali. Isso é um pouco ineficiente e estamos nos repetindo várias vezes. Em vez disso, o que poderíamos fazer é finalizar isso em um mixin. Sabemos que sempre que alteramos o flex, queremos alterar essas versões prefixadas, bem como para o mesmo valor. Por que não usar um mixin? Fazemos isso colocando mais o nome
do mixin e, em seguida, podemos passar esse parâmetro em. Agora, se rolarmos para baixo, vemos que obtemos o mesmo resultado. Como eu mostrei antes, nós só precisamos mudar um número e ele vai mudá-lo para todos os quatro. Agora que é uma introdução rápida de mixins, obviamente eles são muito poderosos e podemos usá-los para uma variedade de coisas. No exemplo, quando realmente temos uma página HTML, vou mostrar-lhe um bom uso de mixins e prática. Na verdade, vou mostrar-lhe usos práticos de todos esses recursos na prática. Mas para este vídeo, eu só queria dar-lhe uma visão geral
dos recursos e uma demonstração do que eles realmente fazem. Agora há uma outra característica aqui. Fizemos operadores, estender e mixins, variáveis de aninhamento. Há parciais e módulos aqui. Falaremos sobre isso em um vídeo mais tarde porque só temos um documento aqui. Não vamos trazer parciais, mas parciais, se voltarmos aqui, podemos criar arquivos SASS parciais que contêm pequenos trechos. Podemos modularizar SASS para que possamos colocar nossas variáveis em um arquivo. Podemos colocar nosso estende mesmo e, em seguida, em um arquivo, colocar em mixins em um arquivo, e então podemos trazê-los para dentro. Mas vamos ver isso uma vez que realmente obter configuração
SAS em nosso computador e começar a trabalhar com ele. Essa é uma introdução rápida ao SASS. Se você quiser saber mais sobre isso, o que acabamos de abordar, você pode acessar esta página no site da SASS. Uma coisa que eu quero fazer antes de mudar para o próximo vídeo e realmente instalar o SASS no seu computador é eu quero mudar para o SCSS. Se eu clicar neste botão aqui, agora de repente tudo o que escrevemos é transformado em SCSS. Como mencionamos, o SCSS é exatamente como o SASS, mas para aninhamento usamos as chaves como no CSS. Usamos ponto-e-vírgula para definir o fim de uma regra. Em vez de iguais e mais, usamos palavras mais descritivas como realmente ter um em mixin aqui e escrever em include. O benefício de usar SCSS é que ele é compatível com CSS, então eu posso jogar CSS normal aqui e não haverá nenhum problema, não haverá nenhum erro. Talvez eu queira colocar uma família de fontes do Times New Roman no corpo. Como você pode ver aqui eu posso apenas ter que colocá-lo entre aspas. Então, como você pode ver aqui, ele sai da mesma maneira em seu arquivo CSS de saída. Isso é muito bom porque você pode pegar tudo isso que acabamos de gerar e se eu me livrar do que temos aqui, e eu jogar esse CSS palavra por palavra em nosso SASS, ele não aparece com nenhum erro em nosso CSS. Então podemos realmente entrar aqui e refatorar isso se quisermos. Posso entrar e fazer alguns aninhamentos e você verá que temos o benefício de usar o SASS, mas também temos a compatibilidade com o CSS. É por isso que a maioria dos exemplos que você verá on-line usa o SCSS. Para o resto desta classe, vamos usar o SCSS. SCSS significa Sassy CSS, acredito. É algo que eles desenvolveram depois de fazer a sintaxe SASS tradicional inicial porque eles perceberam, eu acho que era melhor tê-lo mais parecido com CSS. Isso torna mais fácil escrever quando você está acostumado a escrever CSS. Também como mencionado, é compatível com versões anteriores, então eu posso simplesmente jogar qualquer número de CSS em um arquivo SCSS e ele vai funcionar. Isso é ótimo no caso em que eu só quero escrever um CSS, mas eu só tenho um arquivo SCSS. Ambos funcionarão no mesmo arquivo. Há muitos benefícios em usar a versão SCSS. Como eu disse, vamos usar o SCSS a partir de agora. Mas, na maior parte, deve ser mais fácil de entender usando SCSS porque ele se parece mais com CSS. Você provavelmente me viu antes quando eu estava escrevendo SASS, eu estava tendo o hábito de colocar ponto-e-vírgula. Só estou acostumado a escrever coisas em CSS. Eu acho que ao usar o SASS, a sintaxe do SCSS apenas faz mais sentido. Espero que tenham gostado desta introdução. No próximo vídeo, nós realmente vamos instalar algum software em seu computador e este software vai compilar SASS para nós. Estou ansioso por isso. Vejo você no próximo vídeo.
4. Configurando a Sass em seu computador: Na última lição, usamos uma ferramenta online, o SASSMeister, para começar a executar o Sass in the Cloud super-rápido sem termos que instalar o Sass em nosso computador. Eu queria fazer isso rápido para que pudéssemos ver as características do Sass, ter uma boa introdução a ele. Mas agora é hora de realmente instalar o Sass em seu computador para que você possa realmente executá-lo em seus próprios projetos. Na verdade, vamos usar um projeto de exemplo da minha página do GitHub em apenas um segundo. Mas o que eu quero que você faça é clicar neste link para instalar, e vamos aprender sobre algumas das maneiras que podemos executar o Sass. Agora, como você pode ver aqui, ele nos dá um monte de diferentes aplicativos para olhar. Infelizmente, Sass não fornecem seu próprio compilador, pelo aspecto das coisas. Podemos usar o Sass na linha de comando, mas em termos de aplicativos, você tem um número de opções pagas e open source. A maneira mais fácil que encontrei para executar o Sass no seu computador é usando o Sass Live Compiler dentro do VS Code. O que é VS Code? Bem, é apenas um editor de codificação que é fornecido pela Microsoft. Na verdade, é grátis, o que é incrível. Se eu procurar por VS Code no Google, será o primeiro link
e, como você pode ver, significa Visual Studio Code. É um editor de código de ID muito bom completamente gratuito e tem algumas grandes extensões nele. Você não precisa necessariamente usar este editor de código e esta extensão dentro dele para esta classe. Mas há tantas maneiras diferentes de fazê-lo, e esta é a maneira mais fácil que encontrei. É tudo gratuito, o mais automático possível, então eu definitivamente recomendo. Eu estou obviamente em um Mac, então ele vai me pedir para baixar para Mac, mas você pode escolher qual opção você quer baixar aqui. Já o instalei no meu computador, então não preciso fazer mais nada. Eu também tenho o Live Sass Compiler já instalado. Tudo o que você precisa fazer para isso é ir para a guia Extensões do VS Code, digite o compilador Sass ao vivo e instale o aqui. Dado isso, você instalou o VS Code, e você tem essa extensão instalada, vamos realmente abrir um projeto e ver como isso funciona. Você pode abrir qualquer projeto que você quiser, ou você pode ir para a minha página GitHub, GitHub/Christopherdodd/SkillShare. Como diz aqui, recursos para todas as minhas aulas no SkillShare.com. Se você fez algumas das minhas outras aulas, você deve estar familiarizado com este repositório. Bem aqui eu incluí este chamado Projeto Classe Sass. Quero que descarregue este. Vou baixá-lo para o meu diretório de códigos aqui. Uma vez terminado o download, queremos expandi-lo. Agora podemos ver que está expandido. Queremos entrar no VS Code, abrir essa pasta, um único clique e, em seguida, clicar em “Abrir”. Livre-se dessa tela de boas-vindas. Como pode ver, temos dois arquivos aqui. Um índice, que contém a nossa página de aprendizagem, e a nossa folha de estilo bem aqui. Temos alguns pontos de quebra responsivos no fundo aqui, temos alguns componentes e temos nossa base e reinicializamos aqui. Bastante básico. A primeira coisa que queremos fazer é clicar em Go Live aqui, e isso realmente irá criar um servidor automático para nós usando VS Code. Vou clicar nisso. Agora você pode ver como nosso pequeno site se parece. É totalmente responsivo. Obviamente não são as cores mais sexy, e tem algumas reivindicações bem ousadas aqui. Pode ou não mudar toda a sua vida. Obviamente não é um redator. Mas sim, este é o nosso projeto. Se você olhar para ele no iPhone, ele é responsivo. Sim, é com isso que vamos trabalhar nos próximos vídeos. Temos um servidor ao vivo funcionando, a próxima coisa que queremos fazer é começar a observar o Sass também. Vamos para o nosso arquivo CSS, e vamos escrever outros estilos. Isto é só para te mostrar que podemos fazê-lo funcionar. Temos outros estilos aqui e nosso editor de código detectará automaticamente que agora temos um arquivo SCSS, então temos assistido Sass aqui embaixo. Eu vou criar outra tag link aqui apenas copiando e colando que outros estilos, devemos chamar isso de outros estilos não de outro estilo, otherstyles.scss. Agora você pode ver aqui nós vamos incluir esses estilos aqui. Nós também vamos incluir otherstyles.css. Mas é claro que esse arquivo ainda nem existe. Nós só temos outros styles.scss. Colocamos isso aí? Claro que não, porque não podemos realmente executar SCSS em nosso navegador. O que vai acontecer aqui quando executarmos o relógio Sass, é que o arquivo vai ser gerado para nós usando o que está aqui. Agora, porque não fizemos nada aqui, haverá nada gerado aqui além de um comentário que diz sem CSS. Vamos, na verdade, escrever um pouco de Sass. Uma característica básica é que podemos aninhar. Digamos que dentro do corpo, dentro do cartão, e vamos apenas fazer algo dramático como cor de fundo amarelo importante. Se eu salvar
isso, ele vai detectar mudanças. O que vai acontecer aqui? Você pode ver que nosso arquivo CSS é gerado instantaneamente. Se voltarmos aqui, podem ver
que o amarelo não está passando. Isso é porque eu tratei o corpo como uma classe, não como um elemento. Eu salvo que ele irá atualizar o Sass e agora você pode ver a cor de nossos cartões é alterado para amarelo como você pode ver aqui. Legal. Podemos apagar isso a qualquer momento. Não é grande coisa, porque sempre que salvamos alterações nosso arquivo SCSS, isso é regenerado. Só precisamos gerenciar o arquivo SCSS. Mas é claro que a saída CSS é o que usamos em nosso navegador e nós vinculamos em nosso HTML. Vamos deletar essa, porque isso foi apenas para fins de demonstração. Vou apagar outros estilos e todas as referências a ele. Eu acidentalmente apaguei toda a pasta lá. No entanto, agora temos Sass rodando em nosso projeto, e ele está compilando automaticamente nosso Sass e SCSS. Agora, é claro, se você não quiser usar VS Code e quiser usar algum editor de código, você vai ter que olhar para uma solução diferente. Esta é a maneira mais fácil e obviamente completamente livre de fazê-lo. Mas você pode ter suas preferências sobre como deseja configurar suas ferramentas de compilação. Se você tem suas próprias preferências, infelizmente, eu não posso passar por todas as maneiras diferentes para executar Sass em seu computador. Definitivamente, confira o link do site. Você tem algumas opções aqui, na verdade, Eu acho que é Koala e Escoteiro App livre, e você pode ir para o site deles para descobrir como executá-los. Mas eu descobri que executar Live Sass Compiler no VS Code é super simples. Tudo o que eu preciso fazer é apenas executar este Watch Sass e ele faz o resto para mim. Se tudo funcionou para você e agora você tem Sass compilando em seu computador, então definitivamente é hora de ir para o próximo vídeo. No próximo, vamos realmente começar a refatorar esse CSS que eu tinha antes no SCSS. Vamos aproveitar alguns desses recursos que falei na lição anterior. Estou ansioso para vê-lo no próximo.
5. Convertendo CSS para SCSS: Desculpe o início desta lição, eu nos trouxe de volta ao nosso ponto de partida original dentro do Projeto Sass Class. Eu me livrei dos outros estilos.scss. Nós só temos nosso arquivo HTML e então nós temos o arquivo CSS vinculado. Assim como no último vídeo, vamos clicar em Ir ao Vivo aqui no código VS para executar o servidor, e agora você pode ver nosso site está sendo exibido. O que vamos fazer é criar um arquivo styles.scss aqui. Aqui você pode ver VS código reconheceu que temos um arquivo SCSS, então temos este botão Watch Sass aqui. Eu estou indo para primeiro de tudo copiar todos, desses estilos em nossos styles.scss. Economize em ambos, e agora eu vou clicar em “Watch Sass”. Agora você pode ver instantaneamente nós geramos nossos estilos novamente, mas usando SCSS. Como você pode ver aqui, há realmente algumas outras coisas que compilador Live Sass adicionou. Mais notavelmente, temos algumas propriedades cross-browser aqui. Display flex não funciona em alguns navegadores, por isso adiciona automaticamente a versão WebKit e Microsoft para que possamos maximizar a compatibilidade do navegador. Como você pode ver aqui, ele também adicionou alguns atributos que foram implícitos pela nossa folha de estilo, que apenas os tornou muito específicos aqui. Além dessas mudanças, esta é exatamente a mesma folha de estilo. Se voltarmos ao nosso site e atualizarmos a página, ela deve ser exatamente a mesma, e parece. O que podemos fazer agora é fechar este styles.css. Nós não precisamos olhar para ele mais, e nós só queremos trabalhar a partir deste arquivo.scss styles.scss. Todas as alterações que fizermos aqui serão automaticamente compiladas e colocadas neste arquivo styles.css, e esse é o arquivo, é claro, que nosso documento HTML usa para estilizar a página da Web. Mas não precisamos nos preocupar com esse arquivo CSS gerado. Podemos trabalhar com o SCSS até que haja um problema, caso
em que queremos dar uma olhada e ver o CSS que ele está gerando. Mas até esse ponto, podemos trabalhar completamente aqui. Agora, assim como eu mostrei em nossa demonstração, a primeira coisa que eu quero fazer é escrever algumas variáveis para as cores. É melhor fazer aqueles na parte superior do seu documento. Em vez de variáveis, vou colocar cores. Vamos dar uma olhada em que cores estamos usando, e vamos dar nomes a eles. Aqui temos uma cor de fundo azul. Se eu olhar para o documento, a melhor maneira de descrever esta cor azul é que é a cor primária. É a única cor que se destaca. Só temos preto, branco, que não são realmente cores, e então temos azul. Vou nomear isto em vez de azul, cor primária de fundo. Agora vamos criar essa variável aqui em cima, cor de
fundo primária, e podemos defini-la para azul. Vamos passar e encontrar outras referências a esta cor azul de fundo. Este tem uma cor de fundo ligeiramente diferente. Aqui você pode ver no cabeçalho lateral, estamos usando esse azul. Podemos substituí-lo por nossa variável recém-criada. Rolando para baixo, podemos ver que o cartão tem um fundo de azul. Podemos mudar isso para cor de fundo principal. Espere, não, essa é a cor da fonte. Não queremos mudar isso, e acho que pode ser isso. Se salvarmos nosso documento, atualize a página, você verá que nada foi alterado. Mas como eu mostrei antes, se quiséssemos mudar essa cor de fundo primária, talvez ela seja um azul claro, agora você pode ver que todos os fundos foram alterados. O próximo que vou mudar é a cor do primeiro plano. Onde quer que haja uma cor de fonte com branco, eu vou mudar isso para color-font, digamos brilhante. Copie isso. Escreva aqui. Vamos fazer a nossa cor de fonte brilhante branco. Vamos mudar isso aqui também, cor-font-brilhante. Onde mais estamos falando de branco, também
estamos fazendo isso aqui. Aqui também para o boletim informativo da seção. Aqui também, na verdade, há alguns pontos. A coisa a lembrar aqui não é apenas substituir cada vez que você vê branco, tem
que fazer sentido. O que estamos fazendo é descrever a cor aqui. É importante como isto se chama. Esta é a nossa cor de fonte brilhante. Por algum motivo em toda a web, você verá que a convenção é escrever cores e, em seguida, escrever as palavras descritivas depois dela. Você pode sempre colocar isso em inverso, cor de fundo primária. Cabe a você. Mas é assim que é feito por convenção. Que outras cores temos aqui? Temos a cor do texto do corpo. Então, fonte de cor, vamos chamá-lo de primário, e vai ser este código hexadecimal em particular. Eu vou colocar isso bem no topo, e eu vou apenas encomendá-los um pouco bem tendo as cores da fonte primeiro e, em seguida, as cores de fundo. Agora podemos substituir este aqui. Vamos lidar com este um pouco mais tarde, e como você pode ver aqui nós temos essas cores de fundo de preto. Vou criar uma cor de fundo escuro com valor de preto. Agora, quando temos fundos escuros, vou substituí-lo pela minha variável. Como tal. Ótimo. Agora vamos apenas verificar com o nosso documento novamente, certificar-se de que não cometemos grandes erros. Bom. Essa fonte primária, não acho que seja o melhor nome. Vou chamá-lo font-default em vez disso. Quero continuar descrevendo esta cor aqui, o azul. Eu vou chamar isso de cor font-padrão. Novamente, como você nomeia depende de você. Mas notei que praticamente todo o texto é azul ou branco, com apenas isso na parte inferior, é aquela cor cinza,
aquela cor tripla sete. Eu só vou chamar essa fonte padrão em vez disso. Também notei aqui que temos uma cor de fonte daquele azul. Eu quero chamar isso de uma fonte de cor primária em vez disso. Acho que esse nome faz muito mais sentido. Eu vou subir aqui, cor-fonte primária, azul, e há mais uma cor aqui. Nós não precisamos necessariamente criar variáveis de cor para todas as nossas cores, apenas onde isso faz sentido. Aqui para as luzes de fundo, cor-background-light. Bem, digamos brilhante por causa da consistência, e vamos à luz de fundo de cor. Agora temos nossas variáveis definidas. Eu realmente tenho um erro aqui em nosso console Live Sass Compile. Aparentemente, temos uma variável indefinida de cor-background-bright. Aqui vamos nós. Eu acidentalmente chamei esta luz. Você pode chamá-lo de brilhante ou leve, apenas algo que descreva. Agora parece que estamos bem. Se eu atualizar a página, está tudo bem. Essa é a outra coisa a observar é que se houver um erro Sass, ele não será compilado para o arquivo CSS. Quando você atualiza a página em seu documento HTML, talvez
você não veja uma alteração, então você pode pensar, oh yeah, está funcionando. Mas então você verifica aqui e percebe que na verdade não está compilando as novas mudanças. Está mostrando uma versão mais antiga do arquivo CSS. O que você quer fazer é verificar periodicamente aqui, ter certeza de que não há erros Sass, e se você alguma vez experimentar algo um pouco estranho, você não sabe o que está acontecendo, você sempre pode verificar a saída CSS e certifique-se de que ele está se deparando corretamente. Nós temos nossas variáveis aqui, e isso torna mais fácil para nós fazer um pouco de temática. Vamos apenas dizer que em vez de ter um fundo preto, queremos criar todos os fundos escuros para cinzento escuro, eu acho que é uma cor, e agora você pode ver que o contraste não é o melhor, mas nós podemos realmente afetar todo o escuro fundos em nosso documento CSS. Esperemos que esteja se tornando claro agora os benefícios de usar variáveis. Número 1, podemos mudar a variável em um lugar, e número 2, nós apenas damos às cores mais de um nome descritivo. Também o número 3 é se temos um código hexadecimal como este, não
temos que lembrar o código hexadecimal toda vez que queremos usar essa cor, podemos usar esse nome em vez disso. Esses são alguns benefícios de armazenar suas cores em variáveis. Agora, como vimos antes, temos essa cor extra aqui, que não é atribuída a uma variável. A razão para isso é que esta cor é exatamente azul, mas mais escura em 20 por cento. É exatamente essa cor escurecida em 20%. Para isso, podemos realmente usar uma função. Já vimos mixagens em Sass, mas na verdade há algumas funções embutidas também. Vamos até o site e procurar este. Vou até a caixa de busca aqui. Não importa qual página você está
no site Sass e eu vou procurar por escurecer. Vou clicar no resultado para escurecer, e como você pode ver aqui, leva como primeiro parâmetro uma determinada cor, e então leva como segundo parâmetro o quanto você quer escurecer essa cor por. Como você pode ver aqui, alguns exemplos, você também pode dessaturar, há um monte de funções diferentes. Se você quiser ir conferir esta página, você pode colorir, ajustar de muitas maneiras diferentes. Mas escurecer é muito fácil. Eu só vou pegar a cor aqui em cima, a cor background-primary, rolar de volta para onde escurecer está, e o segundo parâmetro, eu vou colocar 20 por cento. Vamos salvar. Agora lembre-se que isso está em um estado de foco, então se eu voltar para minha página da web, e atualizar a página, devemos ver essa mesma cor escurecendo em 20% enquanto eu passar o mouse sobre o botão, e reiterando isso novamente, é bom para usar uma variável aqui, porque se alterarmos essa cor de fundo primária para outra coisa, como um azul claro, por exemplo, e atualizarmos a página. Infelizmente, temos um erro aqui, esqueci de colocar no meu sinal $. Se atualizarmos a página, você verá que ela escurece a cor padrão desse botão, então ele reage a qualquer cor armazenada nessa variável. Se não tivéssemos uma variável. Vamos colocar isso de volta para azul, e vamos ter certeza de que há $ sinais lá. Se não usássemos essa função, e usássemos o que eu tinha antes. Se fôssemos mudar a cor da cor background-primary para azul claro, você verá que ainda é a mesma cor que definimos especificamente, então a função escurecer usando uma variável é uma boa maneira de obter a mesma cor que o que você armazenou na variável, mas apenas manipulado de uma certa maneira. Vai reescrever isso novamente, cor escura, fundo primário 20 por cento, e também é bom ler. Podemos ver que esta é a cor de fundo primária, mas 20% mais escura. Não importa qual seja a cor, quando você passar o mouse sobre ela, ele vai d a cor em 20 por cento, muito legal. Vou mudar isso de volta para azul porque o azul claro é muito claro, e temos nossa cor azul de volta. O próximo recurso SAS que eu quero mostrar a vocês neste pequeno projeto é extensões. Como eu mencionei antes, eu não sou um grande fã de extensões. Eu acho que há apenas algumas situações em que você realmente precisa usá-lo. Mas temos uma situação aqui com os botões que podemos refatorar para usar extensões, então vamos fazer isso agora mesmo. Se eu entrar no meu index.html, podemos ver o que eu fiz está incluído duas cláusulas em cada botão, então nós temos nosso botão CTA bem aqui,
e aqui em baixo temos nosso botão boletim informativo. Em vez de usar extensões, o que eu gosto de fazer é apenas adicionar uma classe de nível base, que como você pode ver, ambos
têm nomes de classes diferentes em termos de sublinhado boletim informativo, botão de
sublinhado, e o outro é Sublinhado do CTA, botão sublinhado. Mas ambos têm uma segunda classe sobre eles, o
que lhes dá os estilos de botão base. Mas a idéia por trás de usar uma extensão no SASS é que nós só precisamos usar uma classe, então se eu apenas remover btn, a segunda classe de ambos, e salvar isso. Volte aqui, e você pode ver que perdemos os estilos de nível básico para nossos botões aqui. O que eu vou fazer é voltar para o nosso arquivo CSS bem aqui, e em vez de ter uma classe para botão, eu vou transformar isso em uma extensão, então aqui mesmo, e para o estado de foco, eu vou transformar isso em uma extensão, e, em seguida, para cada um desses botões, podemos incluir esse CSS, então aqui em baixo no botão CTA, eu vou escrever extend btn, e então eu vou fazer o mesmo para o outro botão boletim informativo. Posso estender aqui. Salve, atualize aqui
ou, de fato, foi atualizado para nós, e você pode ver que temos exatamente o mesmo resultado de antes. Como você pode ver, nós realmente não fizemos muita economia em termos de linhas de código. Mas o que fizemos foi reduzir a quantidade de cláusulas que precisamos de utilizar num determinado elemento. Eu não necessariamente acho que isso é um grande negócio, mas definitivamente tem seus méritos, e é um recurso do SAS que você pode querer aproveitar. Vamos deixar isso com a implementação do SAS por enquanto. A última coisa que este arquivo CSS realmente beneficiaria de nós e mixins. Um ótimo uso de mixins é para criar suas consultas de mídia de ferro. Se eu rolar para baixo aqui, eu tenho consultas de mídia para vários tamanhos de tela diferentes, e eu já os rotulei com uma variável que vamos usar em nossos mixins, então aqui, esta é a consulta de mídia para tamanhos de tela ampla, e como você pode ver, eu tenho alguns estilos lá dentro. Isto é como tamanhos de ecrã médio, média
de ambiente de trabalho e tamanhos de ecrã largo. Apenas todos os tamanhos de tela de desktop, então você tem tamanhos de tela de tablet e tamanhos de tela móvel. Alguns deles têm estilos neles,
algumas dessas definições de arestas que eu quero ter que apenas no caso de eu precisar usá-los, mas esses são os pontos de interrupção que eu configurei. Agora, como você pode ver, nós sempre podemos apenas, se quisermos dizer, por exemplo, ter um estilo diferente para o corpo de código através de um desses pontos de interrupção, nós podemos apenas jogá-lo em que nós fizemos aqui na nossa tamanhos de tela tablet, nós tornamos o tamanho da fonte menor no corpo do código, mas há uma maneira melhor de fazê-lo com CSS, e é isso que eu quero mostrar a vocês neste vídeo. O que eu vou fazer é, mover todos esses breakpoints responsivos até o topo, e então nós vamos transformá-los em SASS, então eu vou criar um comentário aqui, consultas de
mídia, e vamos colá-los Aqui. Isso vai quebrá-lo se nós apenas salvar isso e executá-lo aqui por causa de encomendar nosso CSS, isso vai ser ordenado incorretamente, então nós vamos começar a ver as coisas. Talvez não, mas há uma chance de quebrar porque mudamos o pedido. Mas o que vamos fazer aqui é, não
vamos deixar essas consultas de mídia aqui em cima. Nós vamos apenas ter estes aqui para referência para que possamos escrever nossos próprios mixins que gera consultas de mídia para nós. Há várias maneiras de fazer isso,
podemos criar mixins para cada tamanho de tela de ponto de interrupção, ou podemos criar um e usar uma instrução if para determinar quais larguras de tela aplicar, então eu gosto do if then abordagem, então eu vou fazer isso, e o que isso nos permite fazer é simplesmente escrever uma consulta de mídia de código mixins. Eu vi isso rotulado como muitas coisas diferentes no passado, você pode chamá-lo responde, ou tamanho da tela, ou o que você quiser chamá-lo. Eu gosto de chamá-lo de media query porque isso é exatamente o que é, e para o parâmetro, vamos colocar em tamanho. Eu vou abrir essa mixins, e eu vou escrever minha primeira declaração se. Como você pode ver aqui, eu já dei nomes a todos esses intervalos de largura da tela, então nós podemos realmente usar isso como nosso atributo aqui, então eu vou criar uma instrução if usando a sintaxe aqui de, se tamanho W é igual a largura da área de trabalho, não precisamos usar o sinal $ novamente, ou colocar isso em citações, então queremos que a consulta de mídia a partir daqui seja aplicada. Eu só vou copiar e colar isso, e o que nós fazemos para que o conteúdo seja exibido
aqui dentro é apenas colocar nesta tag de conteúdo especial. Você verá como isso funciona em apenas um segundo. Agora eu vou criar uma declaração else if, e se o tamanho vai ser meio desktop. Em seguida, a consulta de mídia que usarei é isso. Mais uma vez, o que precisamos fazer fechá-lo e colocar em conteúdo. O próximo ponto de interrupção que vamos colocar. Nós podemos nos livrar disso agora porque nós realmente não temos nenhum estilo lá. Vamos fazer este meio desktop M-wide. Esqueci de colocar os iguais aqui em cima. Lembrem-se, rapazes, vocês não precisam nomeá-los exatamente da mesma forma que eu chamei o meu. Eu defini meus pontos de interrupção, como eu gosto deles. Você não precisa usar o meio de desktop M largo nas larguras de tela específicas. Foi assim que preparei tudo. Pode usar o que quiser aqui. Conteúdo, de modo que um não tem nenhum estilo nele também então eu vou apenas remover aquele. Em seguida, temos desktop, rolando para baixo, copiando isso novamente fechando-o, certificando-se de que temos essa tag de conteúdo lá. Este não tem nenhuma regra de estilo em qualquer um, então eu posso apenas remover isso. Então temos um tablet. Caso contrário, se o tamanho for igual, é igual a tablet. Estou copiando colando isso. Na tag de conteúdo, eu não vou excluir esse porque há alguns estilos nele e, finalmente, temos o nosso ponto de interrupção móvel ou faixa de tamanho de tela. Eu vou escrever mais se o tamanho for
igual a celular e jogar em nossa última tag de conteúdo lá. Agora, temos todas essas larguras de tela definidas nesta consulta de mídia. Isto é configurar o mixin. Ainda não o usamos. Agora, que temos eles configurados, podemos realmente usar este mixin. Você pode ver como isso vai agilizar a forma como escrevemos consultas de mídia. O que eu vou fazer é ver aqui que eu tenho um estilo diferente para o tamanho da fonte do cabeçalho CTA quando estamos em toda a área de trabalho. Deixe-me pegar o tamanho da fonte. Vamos descer e encontrar o título de sublinhado do CTA. Aqui vamos nós. Aqui está o tamanho padrão da fonte. Mas é claro que queremos que ele apareça cinco pixels maiores em telas largas. O que podemos fazer aqui é usar nosso mixin recém-criado. Vou escrever inclusivamente. É assim que você inclui um mixin. Incluir consulta de mídia. Acredito que o ponto de interrupção foi o código da área de trabalho. Há o primeiro lá e vamos jogar aquele tamanho de fonte alternativo. Guarde isso, sem erros no nosso console. Vamos ver se realmente funcionou. Vou abrir nossas ferramentas responsivas e clicar em um tamanho de tela muito grande. Esta é uma tela muito ampla de mais de 2.000 pixels. Se eu clicar com o botão direito do mouse para inspecionar o cabeçalho do CTA, você pode ver que esse estilo responsivo agora está sendo aplicado sobre o padrão. Ativando e desativando isso, você pode ver que em telas mais largas, nós tornamos essa direção do CTA um pouco maior. Isso funciona. Agora, vamos passar e refatorar o resto do nosso código para usar este mixin media query. Podemos remover este agora e para o nosso cabeçalho do boletim informativo, vamos alterar o tamanho da fonte em telas amplas da área de trabalho. Foi o título sublinhado da newsletter? Vamos descer aqui e escrever” incluir media query desktop wide a partir de outro tamanho de fonte”. Agora, podemos nos livrar dessa consulta de mídia completamente. Vamos descer agora para os tamanhos da tela do tablet. O que estamos fazendo aqui é o tamanho da tela do tablet. Vamos fazer o tamanho da fonte menor no corpo sublinhado do cartão. Aqui em baixo, corte sublinhado corpo, vai jogar em media query, acreditar que era tablet, e lá vai você. O tamanho da fonte agora será menor para o corpo do cartão nos tamanhos da tela do tablet. Podemos voltar aqui, remover este. Podemos remover este comentário também. Agora, nós temos apenas os tamanhos de tela móvel. Uma linha flexível, vamos mudar a direção flexível. Linha Flex “incluir media query mobile”. Você pode ver aqui isso é muito mais legível. Aqui estão os estilos para linha flexível. Isto é o que ele tem por padrão. Mas em um tamanho de tela móvel, queremos que a direção flexível seja coluna. É muito mais agradável, eu acredito do que escrever isso uma e outra vez e outra vez. Temos como pontos de interrupção definidos e rótulos com nomes agradáveis. Podemos simplesmente jogá-los para o CSS inline e temos tudo empacotado muito bem. Espero que esteja começando a ver isso agora. Vamos acabar com o resto destes. Temos cartão não último filho. Queremos que a margem inferior seja de 15 pixels, e precisamos criar um novo para isso. Cartão, lá vamos nós, não último filho, e então vamos “incluir a consulta de mídia móvel”. A outra forma de escrevermos isto é assim. Você poderia escrever o contrário. Mas nós vamos realmente re-fatorar isso usando nidificação em um segundo. Vou escrever assim por enquanto. Vou remover isso. Agora só temos um último estilo. Título sublinhado do cabeçalho do traço do site. Acredito que também não temos essa configuração. Nós vamos para o site e, em seguida, incluir media query mobile e dar-lhe esse preenchimento. Agora, podemos remover todas as nossas consultas de mídia porque agora
é tudo tratado pelo nosso mixin aqui em cima. Vamos apenas salvar verificar como console Sass aqui em baixo. Olhando bem. Atualize nossa página e agora devemos ver que tudo funciona exatamente da mesma forma. Mas é muito melhor ler em termos de como escrevemos nosso código. É muito mais fácil de gerenciar também. Aqui vamos nós. Tudo em termos de nossa capacidade de resposta ainda funciona. Nós aproveitamos totalmente o poder deste mixin aqui. Agora, o último recurso que quero mostrar nesta lição é o aninhamento. Obviamente vimos nidificação na primeira lição onde nós,
experimentamos no SassMeister, mas aqui em um projeto real, onde podemos realmente encontrar oportunidades para aninhar? Bem, no meu projeto particular, o que eu fiz foi usar um código de convenção de nomenclatura CSS BEM. BEM significa modificador de elemento de bloco. Isso é o que esses sublinhados duplos são no caso de você estar se perguntando. Se você usar BEM, vamos apenas procurar BEM agora. Você pode acessar o site deles e aprender como ele funciona. Eu sou um grande fã de BEM. Eu acho que é ótimo. Mas uma das características do BEM é que ele tem nidificação embutido. Neste projeto em particular, eu realmente não preciso ninho porque como você pode ver, o sublinhado é fazer o ninho para nós. Faz parte da convenção de nomes. Mas o que vou fazer em um segundo é remover essas classes BEM e podemos ver como podemos usar o aninhamento neste projeto. No caso em que você realmente não queria usar esta convenção de nomenclatura de classe BEM. Este site é getbem.com Se você quiser aprender mais sobre BEM, algo que eu usei para o último ano e eu realmente gosto, mas nem todo mundo é um fã de BEM. Definitivamente faça sua pesquisa sobre isso. Uma coisa que podemos fazer apesar de usar BEM neste projeto é usar comerciais. Há alguns lugares em nosso código aqui onde usar um e comercial faz muito sentido. Deixe-me passar e ver onde estamos nos repetindo. Aqui, podemos ver um exemplo clássico de onde um e comercial faz sentido. Temos nossa extensão aqui, sinal de
porcentagem, BTN definido duas vezes. O que podemos fazer em vez disso é copiar tudo depois do segundo BTN, e então podemos entrar na regra BTN e usar um e comercial. Agora obteremos exatamente o mesmo resultado. É mais agradável e mais limpo. Vamos passar de novo, ver onde mais podemos usá-lo. Se quiséssemos, na verdade, poderíamos entrar aqui e ninho assim. Isso não adiciona muito, mas é uma opção, então se eu salvar isso, atualize a página aqui, obtemos o mesmo resultado, então o que fizemos é que já estávamos usando o ponto CTA aqui em cima, então o que podemos fazer é mover isso para o conjunto de regras do CTA e referenciar o nome dos pais, usando esse e comercial. Algumas pessoas gostam assim, algumas pessoas realmente não gostam assim, então eu vou colocá-lo de volta do jeito que era na verdade, porque eu acho que é um pouco mais gerenciável assim, que a opção está lá para usar comerciais quando você está nomeando suas classes em BEM também, há outro exemplo que eu vi mais cedo do que eu quero corrigir aqui é este. Então, onde colocar um pseudo-seletor neste cartão, então nós realmente não precisamos de outra definição aqui, então o que eu vou fazer é usar um e comercial e aninhá-lo dentro desse componente de cartão lá. Ao salvar, atualize a página conforme isso for para o tamanho da tela do celular para se certificar de que está funcionando. Desculpe, iPhone X, e se inspecionarmos um cartão que não é o último filho, que é este ou este, você pode ver que ainda temos esse estilo vindo através do e comercial, mas obviamente não se aplica ao último cartão. Então, como eu mencionei antes, este projeto usa BEM, então o aninhamento é cuidado para nós por esta convenção com os sublinhados duplos, mas digamos, por exemplo, removemos todos os elementos dentro de nossos blocos. O conceito legal em BEM é que você tem seu bloco bem aqui, e então dentro de seu bloco você tem elementos. A maneira de nomear seus elementos é prefixando-os com o nome do bloco, seguido de sublinhado. Mas vamos apenas dizer que não gostamos de BEM e vamos apenas remover estes completamente. Então eu vou me livrar de todos esses seletores de nível de elemento, não mais corpo de cartão, não mais título de cartão, eu poderia avançar através disso porque há algumas instâncias aqui, nós estamos basicamente apenas tirando tudo o que está usando essa convenção de nomenclatura de sublinhados duplos. Eu removi todos os seletores de nível de elemento além deste aqui, e além deste aqui, porque este é um div dentro de um div, então eu vou deixar esse aqui, você também pode nomeá-lo assim também. Então vamos salvar e atualizar nossa página e devemos ver que nosso layout agora está quebrado. Então o layout é realmente bom, mas muitos de nossos estilos estão quebrados. Agora, o que podemos fazer é usar aninhamento em vez de BEM. Então aqui mesmo para o título CTA, o título que tínhamos é apenas um H2. Então, em vez de ter o título CTA, o que eu posso fazer é pegar tudo isso e apenas direcionar o elemento h2 dentro do nosso CTA. A mesma coisa com botão, nosso botão é simplesmente um, uma etiqueta. Então eu posso entrar aqui, copiar tudo isso, e aninhar nossas regras para a etiqueta, lá dentro. Agora nossa seção CTA deve estar de volta ao que era antes, sim agora vamos fazer a mesma coisa com o boletim informativo da seção, então temos nosso cabeçalho da newsletter bem aqui, que é um h2, assim como fizemos com o CTA seção, então eu vou pegar todos esses estilos aqui e, em seguida, aninhá-lo aqui. Portanto, qualquer h2 dentro de um div newsletter ou um elemento de newsletter agora terá os estilos. mesmo vale para o formulário boletim informativo, então podemos apenas segmentar o elemento de formulário real aqui por seu nome de elemento em vez de uma cláusula particular, então formulário, e, em seguida, mesma coisa com entrada e botão, para que possamos fazer entrada, Eu acredito que era um elemento de botão, então nós podemos apenas usar um seletor de elementos aqui, mover tudo isso, e vamos ver se o nosso boletim
parece bem, sim, parece exatamente como era antes, então eu estou indo avançar agora e fazer a consistência resto. Este último exemplo de componente cartão aqui é um exemplo perfeito de por que eu gosto de usar BEM. Você pode ver aqui que para os nossos outros, foi fácil segmentar elementos, especificamente dentro da nossa newsletter div e da nossa div CTA, já que eram todos nomes de elementos diferentes. Nós temos h2, nós temos tag de parágrafo, e nós temos uma tag. Aqui no nosso boletim informativo, temos um formulário, temos uma tag de entrada, e temos uma tag de botão. O caso em nossas cartas é que estamos usando divs dentro de nossa div. As cláusulas realmente ajudaram a diferenciá-las. Em vez disso, usando essa abordagem de não escrever uma classe extra e usar Sass, estou escrevendo algo que é um pouco mais sujo, que está mirando os divs por sua posição dentro desse elemento de cartão. Como você pode ver aqui, quando você está apenas lendo, não faz tanto sentido quanto a classe BEM antes, existem outras opções aqui, não
precisamos remover todas as classes porque as classes são úteis, mas um exemplo melhor é bem aqui em cima onde, digamos, por exemplo, não queríamos escrever um nome de classe para alguns desses elementos, e não podemos direcioná-los apenas pelo nome do elemento, podemos sempre fazer isso com Sass. Esse é um exemplo aqui de usar esse recurso de aninhamento. Temos nosso documento exatamente o mesmo de antes, mas refatoramos para usar Sass. Espero que você esteja começando a ver agora como estamos usando alguns dos recursos do Sass para escrever CSS de uma maneira mais fácil e sucinta. Talvez em um projeto pequeno como este, os benefícios são particularmente claros, mas quando você tem um arquivo CSS de muitos milhares de linhas, então essa estrutura e ter recursos como mixins e variáveis tornam-se muito importantes. Há mais uma característica que eu quero mostrar a vocês em Sass no entanto, e que é parcial. Então nós podemos realmente dividir partes do nosso arquivo SCSS aqui em arquivos diferentes e trazê-los para dentro quando necessário. Mas para isso, eu vou esperar pelo próximo vídeo em que vamos
olhar para modularizar nosso arquivo SCSS. Vejo você no próximo vídeo.
6. Escrevendo Sass de forma modular: Nesta lição, vamos falar sobre modularizar nosso documento [inaudível] em diferentes, o que é chamado de parciais no SASS. Isso é parte de um tópico maior em torno da arquitetura CSS, que no nosso caso aqui, executar um arquivo SCSS, temos menos de 200 linhas, não é um grande negócio, mas torna-se muito importante em como você estruturar seus projetos SASS quando você começa a ter folhas de
estilo com milhares e milhares de linhas de comprimento. Então poderíamos ter abordado isso facilmente na lição anterior como um recurso extra e uma maneira de refatorar CSS, mas eu queria dar-lhe uma lição dedicada aqui porque, é um tópico que deve ser considerado em si mesmo. Então o que eu vou fazer é, vamos primeiro modularizar nosso documento e então vamos ver como podemos fazer isso para um projeto maior. Tudo bem. Então, como fazemos uma parcial no SASS, é criar um novo arquivo e nos certificamos que o arquivo começa com um sublinhado. Então, uma parcial comum para começar é colocar para fora variáveis em sua parcial de ferro. Então eu vou ter uma parcial com o nome de variables.scss. Então o que eu vou fazer, pegar todas as nossas cores, movê-las para cá. Agora, se voltarmos ao nosso documento aqui, verá que nada mudou. Mas se descermos aqui, você verá que ele não compilou o novo documento CSS porque está faltando todas essas variáveis de cor. Então nós temos que realmente importar esta parcial para este documento, e a maneira como fazemos isso, é colocando em uma instrução de importação aqui, e tudo o que precisamos fazer é abrir algumas aspas, variáveis de entrada. Nós realmente não temos que colocar o sublinhado ou o ponto SCSS no final. Se eu rolar para baixo, verá que estamos todos bem. Atualize a página. Estamos todos bem. Então agora temos exatamente a mesma saída. Estamos apenas modularizando nosso SCSS para que ele seja organizado em diferentes compartimentos. A próxima coisa são os mixins. Então eu vou criar uma citação parcial sublinhado mixins.scss. Então vamos fazer a mesma coisa com o nosso mixin media query. Então eu vou escrever, importar mixins, salvar isso, e depois trazer isso aqui. Olhe para baixo para o console L SASS, nenhum problema detectado, e se nós atualizar a página e começar a se mover em torno de nossos breakpoints responsivos, eu posso ver um problema, e isso é da lição anterior onde nós esquecemos de segmentar este H1. Então, vou corrigir isso agora mesmo. Ainda temos o título do cabeçalho lateral aqui. Então, em vez disso, porque não estamos mais usando BM, nós vamos apenas direcionar o elemento, e nós vamos obviamente aproveitar isso lá dentro. Salvando isso, agora vai ver isso. Temos os mesmos resultados exatos, mas agora temos mixins e variáveis compartimentadas em seus próprios arquivos SCSS. Nós também podemos levar isso um pouco mais longe e colocar nossos estilos base em uma parcial também. Então, nossos estilos básicos, coisas que afetam todo o documento CSS e formam a base de nossos estilos. Então, neste caso, seria L Asterix, e L corpo. Então eu vou jogar isso aqui e importar base. Outra parcial que poderíamos fazer nossos elementos de layout L, então, temos linha flexível, largura
da página e centro de texto. Um centro de texto na verdade é mais uma utilidade, eu acredito que um layout. Então vamos pegar esses dois e criar uma parcial para eles. A ordem em que você faz isso realmente não importa. Então eu vou chamar esse layout, e então eu vou criá-lo, sublinhar layout.scss. Tudo depende de você como você quer fazer isso, a propósito. Eu estou seguindo convenção agora, e vamos ver no próximo vídeo realmente como Bootstrap, uma estrutura CSS popular faz isso, mas agora eu estou colocando minha página com MI flex drier no layout parcial aqui. Como você pode ver, atualizando a página, temos o mesmo resultado. Nós também podemos colocar componentes L em sua própria parcial. Então eu vou pegar tudo isso e colocar isso em uma parcial pelo nome de componentes. Vamos criar um novo arquivo para esse, CSS. Honestamente, podemos ir até que todos eles estejam em suas próprias parciais, mas não precisamos ficar muito loucos. Eu acredito que na verdade devemos ter botão, é um componente particular, então, devemos colocar isso aqui também. Então nós temos o componente cartão e o componente botão. Atualize a página deste. Tudo ainda parece estar funcionando e não temos erros SASS. Tudo bem. Agora o que fizemos, é que dividimos nosso arquivo.scss em vários arquivos, e isso apenas torna mais fácil. Se estamos procurando por um componente, podemos entrar em componentes, se estamos procurando estilos de base, podemos ir lá, procurando mixins aqui, variáveis aqui, assim por diante. Agora, como eu mencionei com um pequeno projeto como
este, isso não é tão importante. Eu definitivamente colocaria suas variáveis e mixins em sua própria parcial, mas para dividir as coisas em componentes, em layout e
base, em tão essencial quanto poderia ser em um projeto muito grande. Então, como eu mencionei, há algumas convenções a seguir ou não seguir. Se você acabar expandindo em sua folha de estilo ou trabalhando em um grande, grande projeto. Uma dessas convenções é chamada de arquitetura 7-1. Se eu apenas procurar isso no Google, você pode ver aqui há uma página no GitHub sobre SASS 7-1, há também muitos artigos sobre o assunto, mas você pode ver aqui um exemplo da patente 7 -1. Então, como você viu em nosso documento aqui, nós apenas fizemos um parcial para base, nós fizemos um parcial para componentes, um parcial para layout. Mas se você tivesse um projeto ainda maior, esses componentes, layouts e base, isso poderia ser uma pasta real, e então você poderia ter parciais dentro dela. Então, por exemplo, eu poderia transformar parcial do
meu componente em componentes diferentes dentro do diretório de um componente. Então eu poderia entrar aqui,
e em vez de ter isso chamado componentes, eu poderia ter chamado cartão, e eu poderia colocar isso dentro do diretório de componentes. Sim, eu tenho certeza que eu quero mover, e então, claro, nós também temos um botão aqui, então, nós não queremos isso, então, mover isso daqui,
criar uma nova parcial dentro do nosso diretório de componentes para botão como tal, e, em seguida, podemos incluir ambos, como tal, ou se quiséssemos, poderíamos criar outro arquivo SCSS dentro aqui e importar nossos vários componentes para esse arquivo
e, em seguida, importar esse arquivo para o arquivo principal folha de estilo. Novamente, isso seria um exagero para este tipo de projeto, mas quando você está trabalhando em aplicativos de maior escala, você definitivamente vai precisar entender como estruturar seu CSS melhor. Não é incomum quando você está trabalhando em um grande aplicativo para ver fotos e fotos de vários componentes diferentes. Na verdade, veremos na próxima lição usando o Bootstrap, quantos arquivos SCSS diferentes estão nessa estrutura. Assim, você verá um exemplo ao vivo no próximo vídeo. Por isso, neste momento, é tudo o que quero fazer com a modularização do nosso projecto aqui. Como mencionado, são projetos muito pequenos, então, não precisamos fazer muito disso, mas é outra característica legal do SASS e se torna muito importante como mencionado ao escrever grandes aplicativos. Então, no próximo vídeo, vamos olhar para Bootstrap. Bootstrap é uma estrutura CSS que usa SASS, e podemos realmente ver como uma estrutura SASS adequada é estruturada. Ele vai reunir alguns dos conceitos que aprendemos nesta aula. Além disso, vamos aprender como podemos realmente usar Bootstrap, e eu vou novos conhecimentos de SASS para realmente modificar Bootstrap e fazer o que é chamado de tema personalizado. Então, estou animado para essa lição. Vejo você no próximo vídeo.
7. Bônus: usando Sass com o Bootstrap: Nesta lição, vamos estender o que acabamos de aprender para trabalhar com uma estrutura CSS altamente popular, como Bootstrap. Antes disso, você pode ter trabalhado com o Bootstrap no passado, mas você pode ter usado esta versão CSS. Bem, agora que conhecemos Sass, podemos realmente usar a versão Sass do Bootstrap e podemos realmente obter muito mais disso. Se você não está familiarizado com o Bootstrap, você pode vir aqui para o site em getbootstrap.com. Você pode pensar nisso como um conjunto de estilos
predefinidos que você pode simplesmente carregar rapidamente em seu documento. Ele também tem JavaScript, mas esse não é o foco da classe de hoje. Você pode ver aqui alguns exemplos de sites Bootstrap. Provavelmente será muito semelhante a alguns dos sites que você já viu na web. Se olharmos para este exemplo, você pode ver muitos elementos Bootstrap. Basicamente, tudo o que é necessário para obter esse olhar é usar as classes certas. Se eu entrar na documentação e, em seguida, em componentes, você pode literalmente copiar e colar alguns dos códigos aqui. Desde que você tenha incluído a folha de estilo do Bootstrap, você terá exatamente a mesma aparência que esta. O que eu fiz para esta lição é que eu realmente refatorei o pequeno projeto em que estávamos trabalhando em lições anteriores para usar elementos Bootstrap. Como sempre, tudo que você precisa fazer para acessar este projeto, é ir para github.com/christopherdodd/skillshare. Como você pode ver aqui, eu incluí este exemplo de projeto Bootstrap para nós usar nesta lição. Vou guardar isso na minha pasta de códigos. Eu vou subir aqui e posso clicar para expandi-lo. Só vou redimensionar algumas janelas aqui para tornar mais fácil para você ver. Agora, temos o nosso exemplo de projeto Bootstrap lá. O que eu vou fazer é abrir o código VS novamente. Vamos abrir essa pasta. Exemplo, projeto Bootstrap. Vamos nos livrar dessa tela de boas-vindas e dar uma olhada no nosso projeto. Primeiro as coisas primeiro, vamos realmente ir ao vivo com isso para que possamos vê-lo em nosso navegador. Como você pode ver aqui, é um design semelhante ao nosso projeto antes, mas o que eu fiz é que eu acabei de mudá-lo para usar o Bootstrap. Nós temos os elementos Bootstrap lá, mas é praticamente o mesmo layout de antes. Podemos encerrar isso assim que tivermos o nosso projeto configurado com sucesso. Vamos dar uma olhada no código. Em nosso arquivo de índice, como eu disse, código
semelhante, mas estamos usando todas as classes Bootstrap aqui. Existem alguns personalizados que eu incluí na minha própria folha de estilo aqui. Estas são modificações no topo do Bootstrap. Temos Bootstrap aqui e temos a versão compilada deste arquivo SCSS e em um index.html. Você pode ver que estamos incluindo Bootstrap primeiro e, em seguida, estamos incluindo nossos estilos. Como sempre, podemos fazer “Watch Sass”. Poderíamos fazer mais mudanças aqui. Então, uma vez que salvarmos, ele irá recompilar para esta folha de estilo aqui mesmo. Aqui temos Bootstrap trabalhando. Podemos realmente substituir Bootstrap reescrevendo as definições de classe aqui. Como você pode ver aqui, eu mudei de linha para não ter margem porque estava me dando problemas. Se eu mudar para o arquivo SCSS e comentar isso, você verá que se eu abrir minhas ferramentas de desenvolvedor e descer para um tamanho de tela menor, as margens negativas nas linhas estavam me dando um tempo difícil. Na verdade, entrou e anulou esses estilos. Como você pode ver aqui, está parecendo muito mais agradável sem essas margens negativas. Não me entenda mal. Esta é uma maneira perfeitamente boa de fazê-lo com apenas CSS. Nós nem precisamos de SCSS neste caso porque eu realmente
não estou escrevendo nada além de CSS simples velho aqui. Como você pode ver, este é exatamente o mesmo arquivo. Na verdade, acho que é exatamente o mesmo código. Na verdade, não precisamos de SCSS neste caso. Mas o que podemos fazer para o número 1, ver como um framework Sass em larga escala é estruturado e, ao mesmo tempo, aproveitar alguns dos recursos do Sass, podemos realmente incluir o código Sass do Bootstrap. Vamos fazer isso agora mesmo. Vou voltar para o site do Bootstrap. Vamos para “Home” e depois clique em “Download”. Aqui você pode ver que eu estava apenas usando o CSS compilado. Mas o que eu posso fazer em vez disso é baixar o código-fonte. Vou clicar em “Download Source”. Vou colocar isso na minha área de trabalho. Vou expandir para isso. Agora, posso ir à minha área de trabalho e abrir o “Bootstrap 4.4.1”. O número provavelmente vai ser diferente dependendo de quando você está assistindo este curso. Mas no momento atual, essa é a versão mais recente do Bootstrap. Você pode ver aqui que há um monte de código diferente. Dentro desta pasta dist, por exemplo, temos o CSS compilado e também o JavaScript compilado. Mas o que estamos procurando é o SCSS bem aqui nesta pasta SCSS. Como podem ver aqui, temos uma variedade de parciais diferentes. Então temos esses três que nos dão o “Bootstrap-grid”, o “Bootstrap-Reboot” e o “Co-op Bootstrap”. Também temos pastas para mix-ins, utilitários e fornecedor. O que eu quero fazer é abrir nosso exemplo de projeto Bootstrap aqui. Vamos criar uma estrutura de pastas para manter este código Bootstrap. Vou criar uma pasta de fornecedor. Dentro desta pasta de fornecedor, vou criar uma pasta chamada Bootstrap. Então, dentro do Bootstrap, vou chamar isso de SCSS. Então, finalmente, agora, é hora de trazer todos os arquivos dentro dessa pasta SCSS em nossos próprios projetos. Lá vai você. Se eu voltar para o meu editor de código agora, você pode ver que temos a pasta do fornecedor e dentro temos fornecedor, Bootstrap, SCSS. Temos todos os arquivos do SCSS aqui. Agora, esta é uma estrutura importante para olhar e estudar se você quiser saber mais sobre a estruturação de aplicações em larga escala. Temos todos os mix-ins diferentes em parciais diferentes aqui. É altamente [inaudível] e estamos incluindo tudo isso neste arquivo final Bootstrap SCSS, que é basicamente apenas um monte de entradas. Encorajo-te a dar uma olhadela e reparar no que se passa aqui. Mas depois que você fez isso, nós podemos realmente ir e editar este arquivo Bootstrap para eliminar algumas das coisas que não precisamos e também editar algumas das coisas que queremos mudar. O benefício de fazê-lo dessa maneira é que podemos reduzir a quantidade de linhas que termina em nosso arquivo bootstrap.css final. Nós também podemos alterar variáveis antes que eles se acostumem no CSS. É realmente um sistema muito bom e algo para definitivamente
aproveitar se você sabe como fazê-lo e você está procurando eficiências extras. Antes de realmente fazer alterações neste arquivo, no entanto, nós vamos ter que reconfigurar como nosso compilador Sass ao vivo funciona. Lembre-se antes de nós apenas tinha uma pasta e assim o arquivo de saída iria apenas para a direita ao lado do nosso arquivo SCSS naquela pasta de saída. Bem, é um pouco diferente agora porque temos uma pasta só para o SCSS. Também temos o nosso SCSS específico Bootstrap armazenado nesta pasta. Nós realmente vamos precisar fazer um pouco de configuração para ter certeza de que todos os nossos CSS, não importa onde os arquivos SCSS estão localizados em nosso projeto, quem acaba neste diretório aqui. Para fazer isso, precisamos entrar nas configurações do usuário do nosso aplicativo VS Code. Vou entrar em configurações de código de preferências. Então vou procurar um compilador Sass ao vivo. Lá vamos nós. Agora, queremos ir até aqui e queremos editar nossos formatos. Também queremos mudar se ele gera o arquivo de mapa. Podemos editar, como diz aqui em settings.json. Vou clicar nisso. Como você pode ver aqui, eu já tenho meu código configurado. Este primeiro pequeno bloco aqui é para definir nossos formatos, e eu dei a ele o SavePath de. /css. Isso vai pegar nossos arquivos CSS e garantir que eles vão nesta pasta aqui. O que eu também fiz foi uma lista de excluídos. Vou excluir a grade Bootstrap e a reinicialização do Bootstrap. Se eu apenas remover isso, realmente vamos remover isso que gera o arquivo de mapa também. Vamos guardar isso. Se eu apertar “Watch Sass”, você verá que obtemos Bootstrap-grid, Bootstrap-grid.css.map, bootstrap-reboot, bootstrap-reboot.css.map, bootstrap.css.map, style.css.map. Nós realmente não precisamos de muitos arquivos CSS, então ainda vai funcionar com apenas isso aqui. Mas o que eu gosto de fazer é excluir esses arquivos e também não gerar o mapa. O que podemos fazer aqui é excluir todo nosso CSS aqui porque estamos usando o SCSS completamente neste projeto. Vou levar tudo isso para o lixo. Vou salvar isso. Então vamos acionar nosso compilador Sass novamente. Acho que precisamos reiniciar. Vamos desligar isso e clicar em “Watch Sass”. Agora você pode ver que ele está apenas gerando um arquivo bootstrap.css, assim como tínhamos antes. Então, se voltarmos à nossa página web, tudo estará funcionando normalmente. A primeira coisa que podemos fazer para reduzir a quantidade de linhas em um arquivo bootstrap.css. Se nós rolar para baixo até o final, podemos ver que isso é mais de 10.000 linhas de CSS bootstrap. Na maioria das vezes, não precisamos de tudo o que o bootstrap tem para oferecer. Um dos benefícios de usar a versão SCSS do bootstrap é que podemos começar a remover algumas dessas importações. O que podemos fazer é um processo de eliminação para remover coisas e ver se ele quebra nossa página web. Mas o que eu gostaria de fazer em vez disso é o inverso disso. Um processo inverso de eliminação onde reintroduzimos algumas dessas importações. O que eu vou fazer é comentar tudo isso para que nenhum deles corra e se eu atualizar a página aqui, você pode ver que perdemos todos os nossos estilos. Vamos começar a reintroduzir algumas
dessas partes do bootstrap até termos o olhar que estamos indo para. Definitivamente vamos precisar de funções, variáveis e mixins. Estes são obrigatórios no bootstrap e estes provavelmente não vão fazer qualquer diferença para a nossa página web. Mas eles apenas fornecem as funções, as variáveis, e mixins que são usados em todo o resto destas parciais aqui. Vamos querer incluir a rota. Vamos querer incluir formulários de grade. Nós definitivamente usamos botões que temos usado, o que mais temos usado? Navegação e navbar. Vamos apenas fazer navbar por enquanto, nós usamos cartões. Se você quiser verificar o que usamos em qualquer momento, você pode simplesmente ir para index.html e você pode ver alguns dos elementos que estavam usando, como cartões navbar aqui. Está tudo lá no html. Eu vou voltar aqui. Não estamos usando paginação. Estamos usando o jumbotron. O que mais estamos usando? Utilitários provavelmente serão algo que precisamos. Como você pode ver, nós ainda temos muito comentado fora. Vou guardar isso. Volte para aqui e você pode ver que já estamos um pouco mais perto. Temos muitos desses elementos, mas ainda estamos perdendo algumas coisas importantes. Vou incluir reinicialização e tipo, que tem estilos de tipografia nele e vamos atualizar a página. Agora você pode ver com reinicialização e tipo que nós realmente temos praticamente todos os estilos que precisamos. Eu não acho que haja alguma coisa necessariamente faltando aqui. Funciona em dispositivos móveis. Vamos entrar e dar uma olhada no nosso arquivo bootstrap.css final aqui. Você pode ver aqui que são pouco mais de sete mil linhas de código. Reduzimos em 3.000 linhas de código, o que é muito bom. Significa que o tamanho do arquivo será menor. É apenas mais eficiente em geral usar apenas o que você precisa. Com um framework como Bootstrap que é tão completo e tem tanto nele, há uma chance de que possamos realmente aumentar o tamanho do nosso projeto sem precisar. Este é um dos benefícios que o uso da versão SCSS do Bootstrap nos oferece. O outro benefício, é claro, é o tema Bootstrap. O que quero dizer com isso é se entrarmos em digamos, as variáveis em nosso arquivo de variáveis de sublinhado, e eu tenho que rolar todo o caminho para baixo. Aqui vamos nós. Você pode ver que todas as nossas cores são definidas com um modificador padrão de ponto de exclamação no final. O que isso faz é que ele só cria uma variável com esta cor azul se uma variável com o nome de azul ainda não existir. O que isso significa é que podemos facilmente modificá-los, substituí-los definindo as variáveis nós mesmos. Estes são apenas os padrões, mas podemos realmente entrar e mudar a cor azul ao longo da totalidade do bootstrap, apenas entrando aqui e mudando a cor azul. Vamos realmente olhar para a seção
do site bootstrap que fala sobre tema bootstrap. Se eu procurar por theming aqui, podemos ver Theming bootstrap. Como diz aqui, personalizado Bootstrap 4 com nossas novas variáveis Sass embutidas para preferências de estilo globais, para facilitar a temática e alterações de componentes. Como você pode ver aqui, ele está mostrando o que você precisa importar como um mínimo. Estes são necessários. Lembre-se aqui, funções, variáveis e mixins. Vamos realmente criar um espaço entre eles para que você possa ver que estes são necessários. Também vai rotulá-los como este necessário e, em seguida, reinicializar, tipo, imagens, código, grade. Estes são todos opcionais. Precisamos de root, reinicializar e digitar, mas ainda não precisamos de imagens. Porque não temos imagens em nosso projeto em particular. Mas esses também são opcionais e como diz aqui com essa configuração no lugar, você pode começar a modificar qualquer uma das variáveis Sass e mapas de
coluna dentro de um arquivo.scss personalizado. Mas eu acho que é fácil e seguro o suficiente apenas para criar nossas personalizações aqui. Podemos sempre criar o nosso próprio custom.scss e, em seguida, importar este arquivo para isso. Mas com um arquivo tão pequeno já, acho que não vai nos prejudicar modificar esse arquivo bootstrap. Vamos entrar e realmente começar a temar este arquivo bootstrap e alterar algo que existe em nossos arquivos bootstrap. Há um monte de opções diferentes aqui e exemplos diferentes que você pode encontrar nesta página sobre como começar a barra tema. Tantas opções diferentes. Mas algo que é realmente simples de fazer é mudar uma cor. Vamos dar uma olhada em quais cores estamos usando aqui. Estamos usando este botão primário aqui. Vamos mergulhar no index.html aqui, como você pode ver aqui, estamos usando a classe primária do botão. Isso provavelmente vai estar no componente para botões. Rolando para baixo e para cima aqui, podemos encontrar botões aqui e temos nossos estilos de base de botões. Podemos rolar para baixo até encontrarmos o botão principal ou você pode procurá-lo. Nada para o botão primário. E se procurarmos as primárias? Nada lá também. Acho que a razão é porque estamos usando mapas e loops. Então o que estamos procurando é a cor primária. É muito seguro supor que isso é o que é usado dentro do botão primário. Deixe-me voltar às variáveis e vamos procurar as primárias. Como você pode ver aqui, a cor para primário vai ser esta cor azul e se olharmos para a definição para este azul, ela é definida como um padrão desta cor aqui. O que, claro, combina com esta cor aqui. O que podemos fazer é realmente entrar e mudar essa cor primária. Talvez mudemos para amarelo em vez disso. Se eu salvar isso, volte aqui, você verá que a cor primária em todo o nosso projeto agora é alterada para amarelo. Mas é claro que não queremos mudar isso aqui. Na verdade, só queremos substituí-lo em nosso arquivo bootstrap final. Podemos fazer isso de qualquer lugar daqui. Chame essas variáveis, e eu vou substituir a cor do primário chamando-o amarelo e mesmo resultado. Você quer manter o arquivo de variáveis limpo, mantenha todos esses padrões lá e qualquer de nossas modificações que queremos colocar em um arquivo. Novamente, podemos colocá-lo aqui no nosso arquivo bootstrap.scss. Ou podemos criar um arquivo.scss personalizado e, em seguida, importar esse arquivo para ele. Esse é um exemplo. Não tenho certeza de que outras coisas você pode querer fazer. As possibilidades realmente são infinitas, cabe a você o que você quer mudar. Poderíamos alterar qualquer uma dessas variáveis e se propagaria para todos os lugares que essa variável é usada em nosso projeto durante o bootstrap, e então isso se aplicaria à nossa própria folha de estilo. Recurso muito poderoso dentro de bootstrap. Você sempre pode fazer a implementação CSS e você pode substituir coisas como esta. Mas se você quiser chegar à fonte de como o bootstrap é gerado, você pode vir aqui, reduzir o número de coisas que você está importando, e realmente modificar variáveis de dentro deste arquivo. Muito legal. Isso conclui esta lição sobre bootstrap e usando o formulário scss do bootstrap. Espero que você esteja se sentindo um pouco mais confiante com scss agora. Obviamente, como você codifica mais e se acostuma com isso, você vai começar a ficar mais confortável com ele. Eventualmente, tenho certeza que você não vai querer voltar a codificar do jeito antigo com CSS. Às vezes, se você só precisa fazer uma pequena mudança, CSS está bem. Mas como você vai ver, quando você entrar em projetos maiores e maiores, você vai precisar usar algo como SASS. Caso contrário, vai ficar muito confuso. Espero que tenham gostado desta lição e do próximo vídeo que vamos
encerrar e falar sobre o projeto da turma. Vejo-te no próximo.
8. Conclusão e projeto do curso: Nesta classe, abordamos uma boa visão geral dos recursos do SASS e como usar essa linguagem pode transformar totalmente a forma como você escreve CSS. Embora haja um monte de outros recursos dentro do SASS, o que cobrimos nesta classe é suficiente para você aproveitar o poder dessa linguagem incrível. Devo admitir que levei muito tempo para começar a adotar o SASS em meu próprio fluxo de trabalho. Mas com ferramentas como compilador SASS ao vivo, não leva muito tempo para configurar seu projeto para aproveitar todos os benefícios do SASS. O que eu quero que você faça para o seu projeto de classe é migrar algum código existente de CSS para SCSS, assim como fizemos nesta classe. Idealmente, este seria um projeto web em que você já está trabalhando, mas se você não tem seu próprio projeto, sinta-se livre para usar os projetos em que trabalhamos nesta classe. Todo o código, como sempre, estará no meu repositório Skillshare em github.com/christopherdodd/skillshare. Finalmente, se você precisar de alguma dica ou orientação sobre o que cobrimos na aula de hoje, deixe um comentário na caixa de discussão abaixo, e farei o meu melhor para apontá-lo na direção certa. Obrigado, como sempre, por assistir e espero vê-lo novamente em algumas das minhas outras aulas.
Christopher Dodd, Web Developer / Educator
