Aprenda SASS e melhore seu fluxo de trabalho de CSS | Rob Sutcliffe | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Aprenda SASS e melhore seu fluxo de trabalho de CSS

teacher avatar Rob Sutcliffe, UI Designer / Developer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

26 aulas (1 h 54 min)
    • 1. Introdução

      0:58
    • 2. Mitos de espalha

      5:48
    • 3. Configure seu ambiente

      2:42
    • 4. SASS ou SCS

      3:56
    • 5. Nesting

      3:49
    • 6. Propriedades de Nesting

      1:44
    • 7. Refrencing

      4:16
    • 8. Comentários de

      2:13
    • 9. Variável

      3:45
    • 10. Tipos de dados

      9:22
    • 11. Operações

      3:17
    • 12. Funcitons personalizados

      6:45
    • 13. Função de builtin

      2:02
    • 14. Onde encontrar mais funções

      0:37
    • 15. Mixins

      6:09
    • 16. Incluir

      3:17
    • 17. Ampla

      4:40
    • 18. O que é de Compass

      5:39
    • 19. Exemplo de sombras de caixa

      2:42
    • 20. Exemplo de opacidade em Compass

      1:11
    • 21. Exemplo de contraste

      2:51
    • 22. Onde encontrar mais funções de composte

      0:29
    • 23. Listas

      7:58
    • 24. Loops

      16:05
    • 25. Se ele for se se

      11:39
    • 26. Felicitações

      0:30
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

2.320

Estudantes

2

Projetos

Sobre este curso

Escrever CS, é lenta e despara a depuração. Todas as outras línguas de programação em sem ela de uma década, mas o CSS sem a capacidade de melhorar a que nos de nos de de que nos de para nos de de se fazer SASS nos dá esse poder, podemos construir em sobre o CSS começou sem a mudança na maneira de SASS

Em duas horas, você vai salvar pelo menos a menos de de a sua

Conheça seu professor

Teacher Profile Image

Rob Sutcliffe

UI Designer / Developer

Professor

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: No começo, isso era CSS, e você tem que escrever uma linha de cada vez, como se os computadores nunca tivessem sido inventados. Se você quiser fazer correções, era como ter que passar por todas as páginas com Branco na direita na substituição, como se os computadores não tivessem sido inventados. Meu nome é Rob, e eu estava com medo de me juntar à evolução também. Eu pensei que se eu aprendesse a ousadia, eu teria que aprender a linha de comando. E eu pensei que estaria colocando um código feio como você costumava entrar no Dreamweaver quando você usa o editor do Wiz E Week. Fantasiosamente, eu estava errado. E nas próximas duas horas estarei mostrando por que vou mostrar a vocês como escrever folhas de estilo mais simples. Estarão limpos e magros. Eles estarão atualizados e atualizados 9. Variável: Então eu mostrei as variáveis logo no início da introdução quando eu sei que você obviamente está morrendo de vontade de se apossar delas e ter um jogo com elas porque isso te dá muito, tanto controle. Então vamos apenas criar uma variável aqui em cima. Nós vamos criar as variáveis, a parte superior do documento, e então nós vamos ser capazes de usá-las em outro lugar. Então aqui eu tenho a família da fonte. Helvetica. Bem, tal se nós apenas nos divertíssemos um e então qualquer lugar que usa o mesmo fundo e você apenas colocar nesta pilha de fontes aqui e ele vai dizer a coisa toda para ter certeza que se alguém não tem saúde que está em seu computador, São os quatro de volta para Ariel e eles devem saber, até mesmo ter que ele está em conformidade com qualquer sensor engraçado. Agora, isso obviamente vai dar a esse problema um inferno que pode. Sabe, na verdade, na verdade, eu gosto que tudo na minha seção tenha a mesma família de fachada. Então vamos apenas colocar isso para baixo dissecação humana também. Obviamente eu poderia colocá-lo no corpo, mas vamos supor que vamos usar outros fundos em outro lugar no documento. Então agora é só ódio Juan e Seção e eu recarrego. E agora, obviamente, está carregando. família Font segurava aquela canoa em tudo isso. Agora, obviamente, uma grande vantagem disso é que eu poderia mudar isso em um lugar se eu precisasse mudá-lo. E assumindo que isso vai crescer como um projeto, eu posso ter isso como um arquivo externo com muitos arquivos CSS diferentes correndo fora dele. Então, se toda a marca mudou sua fonte ligeiramente, então podemos apenas mudá-la em um lugar e as folhas de estilo de todos correriam da mesma coisa. Então aqui estou eu usando algumas cores bem horríveis porque Aiken, eu não fiz algumas coisas talvez um pouco mais agradáveis. Talvez tivesse sido melhor se tivéssemos ido para o 33377 Algo assim talvez fosse um pouco mais agradável. Mas ao invés de resolver isso, coloquei a palavra azul. Apenas coisas básicas de CSS. Vamos escolher algumas cores diferentes. Em vez disso, digamos que vamos ter uma boa cor verde e a cor verde vai ser . Iam usar isso e mais tarde, onde ficou verde, colocamos o que diz “Grave”. Vamos deixar isso verde. Ok, então nós vamos ter uma bela cor amarela também. Esse fundo. Poderia ser um pouco? Não, senhor. Então vamos com algo um pouco mais agradável que tem este. E então aqui embaixo colocamos amarelo. Eu só vou tornar variável aqui. Então a variável que você pode detectar porque tem um cifrão no início e então vamos substituir esse vermelho também, só precisa de um sinal de libra na frente. Ok, e então vamos virar isto onde diz vermelho aqui, vamos fazer essa variável também. Então ele só tem um cifrão na frente para que você possa ver agora como é semelhante a como ele diz para um com um cifrão. Agora diz vermelho com um cifrão. E isso é apenas completá-lo como uma variável. Assim que conhecido agora sabe ir olhar para a parte superior do documento e ver qual a cor do vermelho é para segurança. Isso e eu refresco isso. Você pode ver que nós temos olhos ligeiramente diferentes cores agora, 11. Operações: A próxima coisa que precisamos olhar é o que podemos fazer com esses números? Como podemos? Como podemos alterá-los? O propósito de ter funções é que podemos fazer algumas matemáticas básicas ou algumas matemáticas complicadas com o nosso com os nossos números. Então aqui temos uma variável, e no momento ela tem uma string que diz operações numéricas. Mas vou alterar isto ao longo deste vídeo. Nós vamos estar olhando para o CSS aqui. Então este é um CSS. Isso é saída, e este é o SAS que vai entrar. Então vamos nos livrar disso um segundo. E vamos tentar adicionar um com um. E como você vê, isso é atualizado e é também. Então, obviamente, poderíamos. Se tivéssemos 10 mais um, seriam 11. Se tivéssemos 10 menos um , obviamente seriam nove. É um cinco por segundo. Se eu usar este símbolo Astra, ele vai multiplicá-lo. Então são 50. E se eu usar o Ford Slash, ele vai dividi-lo, ok, mas há um pouco mais do que isso, porque e se estamos lidando com pixels? Se eu escrever pixels aqui, está me dando um erro. Você vê o que acontece é que o SAS tira a denominação. O argumento que está à esquerda da equação tem sido a denominação para toda a equação. Então, se, por exemplo, se eu tivesse P x para o 10 e, em seguida, salvá-lo novamente está aparecendo aqui é um dois. Se eu tirar o P X dos cinco e salvá-lo de novo, ainda calado é agora que ele tem o PX. O que queremos é que você queira que o item à esquerda seja o tipo de denominação ou string que queremos usar. Então, por exemplo, se eu escrever uma corda aqui e, em seguida, um, um, mais ele para cinco vai para o dedo do pé, adicionar cinco como um isqueiro de corda. Agora, se você sair, os pedaços rápidos de matemática que devemos saber é que sobre se dividirmos cinco por três, então o que acontece? Bem, temos 1.66667. Podemos não querer esse número enorme lá. Isso vai ser talvez bastante complicado. Talvez queiramos arredondá-lo para cima ou para baixo. Então, há uma função construída chamada round. Seremos usados em algumas dessas funções. Muito do nosso fluxo de trabalho SAS. Então vamos nos acostumar com eles. Se você não quer uma rodada para o mais próximo você volta para a volta, você pode arredondar até o teto e isso vai te dar um dois ou você volta para o chão, que vai arredondar para baixo para o próximo número para baixo, que está me dando um. Alternativamente, o outro, que é bastante útil, é talvez você queira devolvê-lo como uma porcentagem, e isso vai me dar 166% porque cinco é 166% de desconto em três. 15. Mixins: Certo, então agora vamos falar sobre mixagens. Mix ins são um pouco como variáveis, mas você pode incluir um pouco mawr. Um pouco mais diferentes propriedades diferentes dentro. É como reutilizar um bloco deste código como se fosse uma variável. Então vamos olhar para esta página aqui. Eu tenho dois tipos de títulos e eu tenho o texto do corpo no texto do link. Agora, realmente, os cabeçalhos realmente têm essa é a mesma frente. Aqui em cima eu tenho uma família de fachada, que é Helvetica, e são todas fontes san serif. E eu tenho outro, que é um fundo mono espaçado. Agora eu acho que ir para também deve ser o Helvetica novo, e deve ter algumas das mesmas características que o do principal H um fundo. Então, na verdade, quer saber? Vamos copiar todo esse bloco de código aqui e ficar em cima com as variáveis e vamos aninhar tudo isso dentro de alguns colchetes e nós vamos chamar isso de mistura e vamos usar o sinal de at no início e então apenas misturar diretamente. Eu estou indo para o pé Diversão é exatamente o que eu estou chamando esta mistura. É muito semelhante a como essas variáveis têm nomes diferentes quando estamos nomeando nossas variáveis ou nossos mixins, desde que não tenhamos nenhum caractere especial além hífens e sublinhados Andi. Idealmente, não comece com números. Apenas a melhor prática e com algumas linguagens de programação, não vai funcionar. Enquanto cumprirmos essas regras, podemos chamá-las do que quisermos. Então aqui em Hetch um, vou escrever. Inclua, e eu vou escrever pé de cabeça. E se eu disser isso, deve funcionar bem. Eu atualizo isso vai ver que isso não mudou tudo. Isso ainda tem todo esse estilo, que eu separei do Hum tack. Então vamos incluir diversão em nosso ódio é o quê? Então agora nós temos o mesmo tipo de estilo, mas é um pouco conflitante porque na verdade, o ódio no ódio ter ambos tem quase o onde eles têm exatamente os mesmos estilos, então talvez eles odeiam deve ser um pouco menor. Então o que podemos fazer aqui é exatamente como com as funções, como com clarear e escurecer, que eu tenho pagando agora, assim como nós passamos nesses dois argumentos e dissemos, que cor? Em que porcentagem? Queríamos passar. Podemos passar na discussão para a frente. Então vamos tirar o tamanho da frente daqui e vamos passar isso é um argumento. Então agora diz incluir cabeçalho frente e, em seguida, entre parênteses. Então ele vai dizer para E N, mas se é um caminho para o tamanho, vai dizer 1.6 mina não gosta disso. Ok, então agora nós vamos apenas vir aqui para onde ele diz indo para a frente, e nós vamos para isso nesta variável aqui. Então isso aqui está passando. Um argumento que se dirige à frente está passando às 2 da manhã e aqui está passando outro argumento na frente 1.6. Então isso vai se tornar uma variável no âmbito desta mistura. Se eu chamar esse tamanho de fonte aqui em cima, isso se torna semelhante a uma variável, mas uma variável que só podemos usar dentro da mistura. E aqui em baixo, vou dizer tamanho da fonte. Então, quando eu atualizei esta página, isso vai recarregar com isso. Foi tamanho frontal dois AM neste sendo um tamanho de fonte off 1.6 anos. Então a razão aqui é porque isso cria uma nova variável dentro da mistura in, que só sobrevive enquanto esta mistura sobreviver. E usei aqui para o tamanho, e passei. Quando eu criei quando eu incluí que faz isso, espero que tudo faça sentido. Se isso não acontecer, então por favor escreva para mim nos comentários. Então vamos supor que temos um monte de títulos, que são na verdade 1.6, talvez alguns de nossos diferentes títulos ao longo de um 1.6. Então talvez devêssemos criar uma volta completa e apenas dizer, se não passamos lá qualquer valor, qualquer valor, vamos torná-lo 1.6 e m. E então nós podemos apenas remover isso daqui. Eu quero This is Stone é isso está dizendo que se não há um valor sendo passado quando o include é feito, basta dar o tamanho da fonte o valor de 1,6 cm. Então, se eu tirar às 2 da manhã daqui, ele vai assumir que eu quero que o título um seja 1.6 C e também, se eu ainda colocar em um valor diferente aqui, ele vai sobrescrever esse 1.6. Ok, então houve uma mistura. Espero que se divirtam criando alguns desses. 16. Incluir: Agora, se começarmos a adicionar muitos desses mix ins, vamos ter um estilo muito, muito ocupado. Lençóis no topo têm tudo isso nele. E também, podemos ter uma folha de estilo em outro lugar onde queremos ter os mesmos cantos redondos no mesmo estilo de fonte de cabeçalho. Então não queremos nos repetir. Queremos que tudo seja compacto e seja o mais simples possível. Então vamos copiar estes para fora e criar um novo arquivo sob nossa pasta S S s frio mix store F CSS. E aqui vamos colocar todas as nossas misturas em uma em uma lista. Agora, isso é ótimo. Mas obviamente essa estrela que ela precisa do Teoh importar todas essas misturas e ainda assim, no lugar onde temos as mixagens, eu vou escrever importação, e então eu vou escrever mixagem de estrelas S, C. S e ponto e vírgula no final. E isso agora vai importar todos aqueles mix ins em permitir que eles sejam usados nesta página não vê que não fez nenhuma diferença. E se olharmos para a nossa folha de estilos, ela ainda está trazendo todas essas regras sem criar nenhum código extra para ter essas mixagens . Mas se olharmos para trás para nossa pasta CSS agora, é realmente obviamente compilado todos os arquivos F CSS. Então agora temos um chamado mix em lojas. Sim, se um ponto CSS, que está vazio porque não há saída, é apenas mixins que retornam o código, mas podemos contornar isso se apenas adicionarmos. Eu só fechar esta mistura desde senti. Se eu apenas em sublinhou o início, em seguida, ele é removido aqueles arquivos de feltro. Mas isso ainda está importando multa aqui. Se eu atualizar as etapas da página que você encontrar, ele ainda está importando o arquivo, mesmo que ele deva ter um sublinhado na frente. Este homem de importação apenas o ignora, mas quando ele é compilado, ele vai assumir que o arquivo não existe ou nós não queremos criar. É um arquivo CSS para que pudéssemos fazer isso novamente. Poderíamos criar alguns. Poderíamos criar outras importações aqui em cima, chamá-lo de variáveis e criar um novo arquivo com variáveis sub-escolares. CSS. E nós poderíamos apenas copiar essas variáveis a partir daqui nesta página ainda deve carregar absolutamente bem. Ainda está trazendo essas variáveis. Ainda está trazendo aquelas mixagens, mas não está compilando. E está mantendo esta nave estelar muito, muito simples, muito limpa. E nos permite reutilizar as mesmas folhas de estilo, as mesmas variáveis s CSS e mix e zesty assis em todos os outros arquivos ao longo do projeto. 17. Ampla: Ok, eu tenho um criado uma nova regra aqui chamada Link on the Alguns novos estilos lá para link que ele tem está puxando neste ar cantos arredondados mistura para dar-lhe este canto tem algum preenchimento e alguma margem. Tem cor e tem um divertimento e no fundo. Agora, eu tenho alguns outros links aqui em cima que realmente não têm uma aula. Se olharmos no Index, podemos ver que estes não têm aula, mas eu ainda queria ter o mesmo estilo. Vamos estender essa classe de ligação para o A. Deixe-me mostrar o que quero dizer. Então aqui nós temos o artigo A então ele vai apenas selecionar quaisquer links dentro de um artigo, e eu vou escrever estender e então apenas para a direita, Doc Link. Então o que isso está fazendo é isso vai trazer todas as classes existentes no link. Então, se eu disser isso e eu atualizar isso, agora vemos que esses links têm exatamente o mesmo estilo. Isso é apenas estendido? Que eu era particularmente interessante sobre estender é se eu agora olhar no meu estilo CSS. Ela você verá que aqui está escrito na Seção Link, que era a regra original. Isso é sobre isso e, em seguida, seção A, que é a regra. Vamos fazer isso ter seu estilo, e então é colocar todos os mesmos estilos no mesmo lugar. E se eu também, eu tinha uma cor diferente. Talvez eu diga “Cor verde”. Em seguida, ele passou e é adicionado este extra todo o fundo que apenas muda a cor. Mas tudo isso ainda se manteve unido. Agora por que isso é interessante para nós é o que você vai notar se você olhar para trás para a folha S CSS . É que onde temos usado incluir, e nós incluímos uma mistura em. Na verdade, é recriado o mesmo código de cada vez. Então aqui, mesmo que o raio da fronteira queríamos ser exatamente o mesmo raio de fronteira, ele foi em frente e acrescentou aquele pedaço de novo, onde está aqui? É comum separá-lo e colocar esse código lá uma vez. Então isso é um pouco mais eficiente em imprimi-los duas vezes. Não, considerando esta mistura, e na verdade é preciso alguns argumentos no tamanho da fonte. Então ainda é uma mistura válida. Mas este não está a fazer nenhum favor a isto. Então, se tirarmos isso da mistura e pagarmos, colocamos de volta para esta página, eu vou saber, eu vou saber, fazer com que os cantos sejam apenas algumas regras normais de sucesso como se cantos fossem um objeto. Mas em vez de colocar um médico na frente dele ou uma etiqueta de haxixe como se fosse uma aula em I D, vou colocar um sinal de porcentagem. O que isso significa é que meu arquivo CSS não está indo. Teoh está colocando alguns erros agora porque está tentando. Teoh está tentando ler isso aqui, então se eu apenas estender isso em vez disso, então eu estendo e eu escrevi o sinal apresentado sobre eles cantos escritos, modo que deve estender essa multa e, em seguida, um aqui, ele diz, incluir cantos que eu vou escrever, estender cantos. Então, agora, se eu olhar nesta forma, você verá que há uma arma que é boa. Agora você vai ver que ele é realmente puxado todos estes três para fora e disse que todos estes têm um raio de borda de cinco pixels. Em vez de colocar essas mesmas três linhas em três lugares diferentes ao longo da folha, ele acabou de adicioná-las em um só lugar, então nós poderíamos fazer isso novamente para preencher uma margem que tinha o mesmo aqui como eles estão aqui e criar uma regra totalmente nova e, em seguida, estender essas regras. Então, apenas para recapitular uma mistura é uma função onde queremos colocar algum tipo de argumento. Então, não é o mesmo código de cada vez, enquanto, e uma classe que nós estendemos vai ser algo com regras rígidas onde estas serão sempre as mesmas. Vai sempre para o mesmo raio de fronteira, e isso vai manter a nossa folha de estilo o mais pequena possível. 18. O que é de Compass: Então, mais cedo, nós conversamos sobre Compass porque estávamos falando sobre o aplicativo bússola. Agora este é o APP, como sabemos que está assistindo arquivos CSS R. C S s e compilando-os para CSS como vamos. Mas Compass é também uma extensão do SAS, que oferece muitas funções extras e mixins que podemos incluir em nosso trabalho. Agora, enquanto tivermos a bússola nos observando, temos acesso a eles. Se não estamos usando vir possuído, há um aplicativo alternativo bússola. Há alternativas, e por favor me pergunte se você gostaria de ver essas ou temos que fazer se queremos usar Compass agora é temos que dizer bússola de importação no topo, e isso irá importar todas as bibliotecas de bússola. Na verdade, há cinco sub-bibliotecas diferentes de Compass, e há uma tipografia utilitários, CSS três layout e ler e redefinir. Agora, se eu apenas White bússola vai realmente importar esses principais utilitários gratuitos tipografia e CSS três. E eu realmente não diria isso qualquer vantagem em saber a diferença a menos que você esteja olhando para funções muito específicas, você vai querer saber em qual delas está. Mas se estamos importando estes é muito parecido com quando importamos são variáveis ou nossos mix ins. Não está colocando nada na forma de estilo até que digamos. Com uma exceção, este aqui é reiniciado. Se eu disser importações, redefinições de bússola, colocamos o semi cone no final, e então eu olho para as minhas folhas de estilo. Ele realmente tem todo esse pedaço de código extra em, e quando eu atualizei minha página, você vai ver que me impressionam coisas estranhas e redefinir. Para quem não sabe é uma coisa que muitas vezes é um arquivo CSS, você incluiria Teoh remover quaisquer peculiaridades diferentes ou diferenças entre diferentes navegadores. Então, se eu remover a margem e o preenchimento na borda de todas essas coisas, então eles definitivamente vão olhar o mesmo em todos os navegadores. E eu posso adicionar esses estilos de volta, como e quando eu precisar deles para que ele está removendo estilos de lista. Ele está removendo certos estilos de mesa, estava tornando tudo o mais simples possível, e está fora colocando-o para aqui Agora. Eu recomendaria usar um arquivo de reset porque obviamente ele vai ajudá-lo a desenvolver estilos que funcionam em toda a placa em diferentes navegadores. Mas se você gostaria de usar bússola é redefinir folhas. Ou talvez queira usar normalizar. Ou aqui estão alguns outros. Encontrei o vapor de ódio ou cinco Dr. CSS. Há um Yahoo que é bastante popular. Seletor Universal. Reset é bastante alguns ar Eric Meyer Reset CSS. Há algumas folhas de reset diferentes, e você pode não querer usar a bússola. Um. Eu recomendaria decidir qual arquivo de redefinição você deseja usar e deixar isso de fora. Agora, quanto ao layout um. Não te fará mal tê-lo lá. O mesmo com os três utilitários originais. Tipografia CSS três. Então vamos deixá-los lá dentro. E então o que isso faz é isso nos dá acesso a centenas de mixagens de funções que ainda não tínhamos acesso. Por exemplo, estamos aqui estendendo cantos isso, mas nós realmente não precisamos disso, porque isso já está tudo embutido na Compass. Então, em vez de estender, vamos incluir e as funções chamadas medias de raio de borda em apenas cinco pixels para a direita aqui. Se eu salvar isso, basta atualizar a página. E como você verá, os links ainda têm cantos arredondados. Então, se eu apenas usar isso aqui em baixo é bem, onde nós temos curvas estendidas e então nós podemos apenas realmente remover isso. E como você pode ver, nós ainda temos todos os nossos cantos arredondados, que se eu quisesse, eu poderia mudar a quantidade, e eu posso fazer com que eles tenham cantos muito mais severos. E, claro, se eu quisesse, eu também poderia usar uma função de bússola ligeiramente diferente chamada Radius de canto de fronteira. E o que isso faz é que ele me permite adicionar argumentos extras, ao contrário de cima esquerda em meus links. Agora acabou de virar a esquina no canto superior esquerdo. Não é particularmente bom botão, mas como você pode ver isso muito mais funcionalidade, e lá e novamente, a quantidade de funcionalidade e mixins lá é enorme, e nós não poderíamos possivelmente cobri-los todos. Então eu vou aconselhar que você dê uma olhada em um cão estilo bússola, que terá uma lista de todas as funções disponíveis, e eu vou adicionar um link para isso no vídeo. Nos próximos vídeos. Vou mostrar alguns exemplos, mas de vez em quando haverá algo que você quer fazer, e vale a pena ver se há uma função existente aqui antes de você criar a sua própria. 19. Exemplo de sombras de caixa: Ok, então eu só vou te mostrar outro exemplo rápido. Se você olhar para o topo aqui, eu acabei de importar toda a pasta da bússola. Acabei de dizer bússola de importação. Então da última vez eu tive um par de diferentes como CSS três como este. Mas, na verdade, se importarmos a pasta inteira, temos acesso a todos os mixins e funções. Então, para aprender sobre bússola, isso é apenas importá-los todos. Agora eu vou adicionar uma pequena sombra de caixa em torno deste artigo. Então, se eu estiver certo, incluir caixa Shadow Isso vai Teoh importar todos os todos os diferentes regras CSS para diferentes navegadores e coisas para ter um boxer. Então eu vou fazer a sombra verde torná-lo dois pixels, dois pixels offset com um desfoque de 10 pixels sobre isso vai nos dar esta sombra de caixa em torno deste bloco. Isso parece um pouco extremo, na verdade. Então eu realmente queria luzes neste verde um pouco, mas eu não quero Teoh e eu era uma luz nele. Eu queria ser mais transparente porque poderia haver uma cor diferente no fundo , então obviamente nós faríamos isso com algo como RGB A em CSS e agora obviamente para fazer rgb você precisa dos valores RGB. Mas, na verdade, vai resolver isso para mim. E se eu escrever verde aqui e então eu escrevo 0.5 é o Alfa. Vai funcionar o valor RGB para mim, então se eu atualizar, você verá a luz. Mas se eu olhar para o arquivo CSS, você verá aqui onde temos todas as nossas coisas de sombra de caixa. Na verdade, funcionou 70 137 1 ou dois para nós. Então não precisávamos do Tiu. Não precisava tocar nisso. Está certo, e isso está exibindo Fund eles agora, na verdade, se quisermos ter uma sombra de caixa de insetos exatamente no mesmo artigo? Eu só vou fazer isso. Vou escrever incent G P A. e desta vez vamos conseguir. É um pouco preto. Deixe-me iluminar. Um pixel um escolhe cinco pixels e este é inseto, uma pequena sombra aqui. Isso parece horrível, na verdade, por causa de muitas sombras conflitantes. Mas como você pode ver, nós adicionamos regras de caixa. Suas regras de sombra caixa com a mesma função aqui e na folha de estilo. É apenas adicioná-los um após o outro 20. Exemplo de opacidade em Compass: assim como outro exemplo muito, muito rápido. Eu só vou mostrar a função de capacidade porque eu acho que é bastante interessante. Encompass, se eu escrever, incluir capacidade. Não 0.5 sob este cabeçalho aqui obviamente fez esta cabeça. Eu tenho uma capacidade de metade, o que na verdade não parece ser esse papel útil porque porque não podemos simplesmente escrever capacidade nem 0,5 por conta própria? Mas, na verdade, isso talvez esteja mostrando algum do poder, que você tem quando você usa algumas dessas disfunções. Isso construído no Nixon's porque ele também é adicionado isso para legado nos navegadores Explorer, que é algo que é necessário. Tiu tem menos rapacity mostrado tantos navegadores quanto possível, mas talvez algo que muitas vezes deixaríamos de fora porque é um grande pedaço de código, e nem sempre podemos ser incomodados em encontrá-lo. Então coisas como aquela que você poderia de vez em quando, deixar de fora a bússola vai adicionar para você em. Isso é talvez mostra o poder de algumas dessas misturas ins 21. Exemplo de contraste: Agora, digamos que para o Artigo 1, decidimos dar um fundo verde, que vai parecer, eu acho que você vai concordar. Bastante bonito. Então eu estou se eu adicionar aqui depois de esfriar. Mas verde terra é usada essa variável verde. Agora isso vai sobrescrever os outros antecedentes. Então vamos ter um com um momento de fundo verde. Fundo amarelo. Bem, agora, infelizmente, não podemos ler nosso texto agora, podemos? Porque aquele escocês tem um green card no fundo verde. Então vamos no artigo um, Vamos torná-lo para que a cor do parágrafo. E agora vou colocar aqui. Incluir, E então eu vou usar esta mistura, em contraste, Contraste, Verde morto sobre O que isso vai fazer é que vai funcionar para mim, se ou luzes ou uma cor escura vai ser melhor no topo deste verde. Então ele é projetado que na verdade este branco é na melhor cor em vez de um preto, que, se chegarmos ao parágrafo normal quando estivermos aqui, apenas prometemos um pouco novas linhas. NATO, então se nós aqui incluirmos confiança? Não, os fundos não são muito amarelos, pois não? É amarelo claro, 10%. Então vamos colocar isso aí. E isso é o que faz isso, na verdade Ah, a cor preta vai ficar melhor neste fundo. Branco vai melhorar neste fundo agora. Eu não tenho certeza, se eu gosto do branco completo, porque nós realmente não usar branco em qualquer outro lugar no design . Então, na verdade, vamos voltar para nossas variáveis e adicionar uma nova variável. Um novocontraste muito vocal. Um novo Ele ilumina de feltro, e isso vai igualar exatamente o mesmo que amarelo. Agora isso é realmente usado amarelo como a cor padrão para as luzes texto contrastado. Então, na verdade, isso odeia aqui em cima realmente quer ter o mesmo estilo. Então vamos usar isso aqui também. Ok, lá vamos nós. Então, se olharmos na série de começou, é obviamente apenas criou a cor lá. Com base no que foi elaborado, é o melhor contraste com a cor de fundo 22. Onde encontrar mais funções de composte: Então eu espero que ao ver estes poucos misturando é que nós tiramos desta biblioteca bússola. Você pode ver que o poder ligado e a profundidade fora funções de mixins que eles já criaram. Se você gostaria de ver alguns mais do que você pode, obviamente, procurar como e quando você tem uma necessidade específica. Ou você pode ir para bússola estilo hífen, os exemplos de barra orc Teoh coletar juntos ou ver ah, toda Siris de diferentes exemplos. 23. Listas: Agora vai chegar um ponto em que você vai ser realmente, realmente acostumado a usar o excesso em você já jogou com bússola ou qualquer um fora de um quadro que você gostou de usar. E você vai chegar ao ponto em que você está pronto para tirar essas rodinhas e começar a escrever algumas de suas próprias funções. Então, vejamos alguns dos recursos mais avançados. Obcecado para que possamos ter algumas idéias sobre como criar algumas funções, que você vai nos ajudar especificamente. Então a primeira coisa a se familiarizar é algo chamado listas. Se você já usou outros frameworks antes de outras linguagens de programação antes, você pode estar familiarizado com a idéia de um raise um raise são um set off variáveis. Então, onde é aqui? Verde é igual a esta cor aqui. Amarelo é igual a esta cor. Laranja é igual a esta cor em vermelho igual a esta cor. Poderíamos criar uma lista de cores que teria todas as cores dentro dela. Então aqui temos uma lista de cores, e está tudo salvo nesta matriz aqui. Esta lista, que parece muito semelhante a uma variável neste ponto, obviamente, obviamente, mas se eu waas para colocar esta variável de cores. Isto lista aqui. Não vai dizer isso. Eu vou ter um erro. Veja, eu recebi um erro porque o que eu nunca recebi na minha página principal de estilo porque estamos entrando em algumas dessas variáveis que dizem coisas como laranja e amarelo, que não existe mais. Mas aqui o que aconteceu é que está tentando Teoh, usar toda essa lista de cores onde só queremos uma. Então, o que vamos fazer neste ponto é que vamos usar uma função SAS construída chamada length e vai obter um número específico desta lista. E nós queremos o 2º 1 Nós queremos este f f F zero um cinco. Então eu vou colocar dois lá, e agora isso vai retornar apenas aquele amarelo. Então vamos ver a minha outra página. Vou pegar esses erros por enquanto. E basta substituir este laranja com um três cores três e substituir todos os amarelos ao longo desta página. Substitua todos os verdes por um e substitua o vermelho por um cheio. Certo, então isso está salvando Fine. Eu não vou cometer nenhum erro. E se eu apenas atualizar a página todas essas cores estão carregando exatamente o mesmo você esperaria, porque é que ele está pegando esse número de dentro da lista. Então o que temos aqui é que temos cores agora não é mais variável, mas uma lista de variáveis, e cada uma delas está selecionando um item específico da lista, então isso pode não procurar um útil no momento. E, na verdade, quando olhamos através do código, não é particularmente elegante porque 10 cores significa um pouco menos para nós do que a palavra amarelo, que é um pouco mais descritivo. Mas nos próximos dois vídeos, você vai começar a ver por que essas listas podem ser muito, muito mais poderosas. Uma coisa que vou dizer neste momento é que isto funciona bem com o espaço aqui, mas vamos usar esse mesmo espaço para outras funcionalidades. Mais recente. Então o que é uma idéia melhor é se dividirmos essas variáveis com um comum como este. Então esta ainda é uma lista aqui, mas é um pouco mais definida como uma lista, e não vai interpretar mal espaços em diferentes lugares, então isso ainda ama absolutamente bem como você pode ver. Então a próxima coisa que eu realmente quero mostrar a vocês sobre listas é o que chamamos de mapa um mapa de lista onde talvez em vez de dizer cores e depois apenas ter uma lista, nós podemos ter uma chave específica para cada item na lista. Agora uma chave é uma chave é semelhante. Identifique-nos que sabemos de qual item da lista estamos falando. Vai substituir este número. Então, em vez de dizer o número dois será capaz de dizer amarelo, agora ele vai se parecer com algo assim. Vou colocar verde aqui, cólon, e depois ter o número. E na próxima linha, Desafio Amarelo. E estas não precisam ser obviamente palavras que cores as coisas podem ser únicas. Isso nós qualquer nome exclusivo que não têm caracteres especiais em outros que não sejam hífens e sublinhados e só têm números. Depois do primeiro personagem, você poderia chamar de comum o que você quisesse. Pode ser uma idéia para dizer, cor primária ou cor de fundo, ou algo que pode ser ainda mais significativo do que apenas a cor real, especialmente se você tivesse dois tons diferentes de laranja como nós meio que temos e então aqui, onde ele diz em cores, nós não vamos realmente dizer 10 mais. Agora vamos dizer mapa fica e esta é uma função construída para obter este mapa o mapa de cores e em vez de começar a dizer amarelo. Então, se usarmos o mesmo mas de código no mix ins aqui, este é o preenchimento vermelho. E então toda a garganta aqui, ter comigo um segundo principal ou que na verdade era também, que é amarelo qualquer que para nós vamos ser amarelo qualquer um que será verde. E eu só coloquei este último em “hit and save”. Apenas atualize a página. Parece que troquei essa cor de cabelo Teoh para não ler nada como ESPN Orange além disso . Parece que troquei essa cor de cabelo Teoh para não ler nada como ESPN Orange além disso Você pode ver que é exatamente o mesmo que era antes. Então, basicamente, o que temos aqui é, vez de apenas ter um item em cada variável como tínhamos antes, criamos uma lista de variáveis, e então criamos uma chave para essas listas para que possamos ir e obter um item específico bastante facilmente e podemos, obviamente, ver com estes quando olhamos através do nosso código. Exatamente o que eu disse que estávamos recebendo de onde cores amarelas é obviamente bastante auto-explicativo . E agora, obviamente, quando você olha para trás, isso parece um pouco mais confuso do que quando era para começar. O que foi isso. Mas o que estou mostrando a vocês é algumas funcionalidades básicas que serão os blocos de construção das funções que vamos ver nos próximos vídeos. 24. Loops: Direita Próximo. Vamos falar sobre loops agora. Basta colocar todas essas cores de volta como eles eram agora, porque é mais fácil ver apenas diz Leia sobre ou amarelo. Mas vou mostrar-vos uma boa maneira de usarmos as listas ou listas mapeadas. Geralmente, Teoh fazer alguma funcionalidade para que possamos ver aqui que há quatro artigos que cada um tem uma idéia diferente. Artigo 1, Artigo 2, Artigo 3, Artigo 4 E se olharmos aqui, criei um estilo personalizado apenas para o Artigo 1 e que define as cores e a cor do contraste aqui. E os outros três, acabei de sair por enquanto. Então nós vamos realmente criar alguns estilos diferentes para cada artigo diferente sobre. Antes de fazer isso, vou criar uma lista mapeada para nos dar um pouco de informação para cada um desses artigos. Então eu vou chamar meus artigos de lista de mapas porque é um nome bastante óbvio para usar aqui e depois dentro de artigos. Vou criar uma sub-lista diferente para cada um dos quatro artigos. Eu não vou numerá-los porque eles já estão em uma ordem então eles não têm nenhum tipo de nome lá apenas cheio em quatro listas dentro de outra lista chamada artigos. Então vamos ter três variáveis diferentes nesta lista. Vamos ter BG, que vai ser o fundo, e o 1º 1 vai ser lido e vamos ter um pai que vai estar batendo, e este vai ser 10 pixels e vamos ter o tamanho da página, que vai ser o tamanho do título, e este vai ser 1.6 e. Agora, cada uma dessas seções, eu vou criar regras ligeiramente diferentes. Isto vai ser verde. Isto vai ficar amarelo. Isto vai ser laranja. Estes vão ter cinco pixels. Isso vai ser em um ponto 4 da manhã. Dois pixels, 1 da manhã. Eu só vou tirar esses dois pontos do final, porque isso não é o fim. Ele conheceu a lista, mas um dos finais aqui, Tiny isto um pouco. Ok, então isso tem um paladar ligeiramente diferente para o resto deles. Isso vai ter um pendente diferente também. E uma falha muito maior reside. Bem, isso é muito grande Ok, então nós temos essas três regras diferentes para cada três estilos diferentes para cada artigo. E agora eu estou pronto para ir em frente e criar um loop que vai olhar através dos artigos e criar estilos ligeiramente diferentes para cada um. Então, se substituirmos isso aqui, isso é o que está fazendo referência ao Artigo 1 para dar seu plano de fundo e fazer o contraste de cor e torná-lo contrastar com essa cor. Então, são regras bem simples no momento. Mas a maneira como ele está se referindo é usando o e comercial e, em seguida, sem nenhum espaço indo direto para escrever Artigo um. E esse e comercial, como sabemos, vai apenas repetir o fato de que diz seção de artigo e está me permitindo fazer referência a um artigo específico. Então o que eu vou fazer é eu vou usar esta cada função, e eu vou dizer que cada artigo agora é o artigo se olharmos para trás para as variáveis, isso foi chamado de artigos, então artigo é uma nova variável. Eu estou criando uma nova lista, quero dizer, e eu vou dizer cada artigo em artigos e, em seguida, vai Teoh loop através de cada artigo. Agora, este, diz um aqui, mas não vamos deixar ser um número ligeiramente diferente a cada loop. Então, eu vou. Teoh criar uma nova variável aqui chamado I e isso vai para o índice igual é uma função embutida para avaliar. E o que o índice faz é que ele vai para você olhar para as listas de artigos e encontrar o artigo específico que estamos olhando atualmente e obter o índice. Então, se for o 1º 1, vai. Se estiver ciente de que este é o 1º 1 vai girar o valor de um. Se for um segundo em troca, o valor de dois. Então esta variável I agora é igual a 123 ou quatro, dependendo de qual loop através nós estamos. Então nós poderíamos colocar isso no final aqui assim, mas isso não vai funcionar porque vai assumir que isso é parte do meu nome. Então precisamos usar um pouco extra fora do excesso de sintaxe, que parece algo como isso, vamos ter como se fosse um CSS i d. Nós vamos ter um cabelo de hash e, em seguida, abrir uma cinta e um fechamento e em seguida, isso é vai mudar para 1234 Não é executado através. Agora devemos ser capazes de executar este código e ele está funcionando corretamente. Então todos eles têm um fundo verde no momento, porque se olharmos para a nossa folha de estilo, ela agora está passando por aqueles 1234 e criando exatamente o mesmo estilo cada vez com um I D. separado no final. Certo, então não queremos. Nós não queremos que ele sempre tenha um fundo de verde fazer. Nós estávamos indo para usar Met, gets função e lá dentro nós vamos olhar para o nosso artigo e nós vamos usar esta chave aqui fundo. E então vamos usar essa mesma referência aqui também, não a coisa toda, mas apenas aqui. Então, ele vai obter o contraste na cor também. Vamos ver como isso parece. Ok, então isso é bom. Então isso veio através do vermelho dele. Isso é amarelo. Isso é laranja. E isso também descobriu se vai contrastar melhor com a cor clara ou a cor escura . Então, o que? É um fundo amarelo. É escolhido preto, e quando é um fundo verde escolheu este cartão amarelo porque essa é a cor que contrasta o melhor. Ok, então vamos olhar para trás aqui e ver o que mais temos. Temos tamanho de ódio, e temos estofamento. Então, até agora, temos usado a família dos pés de fundo. Certo, então, até agora, temos usado este H para marcar aqui, e temos chamado indo para frente, se você se lembra bem, ir para frente é uma mistura. Criamos e enfraquecemos enviar em um tamanho de fonte. Então, se colocarmos isso agora dentro de cada artigo específico, agora podemos enviar este o tamanho para o cabeçalho. Se usarmos a tecla de tamanho de ódio, então vamos ver fica e aqui, vamos dizer tamanho do hit. Obviamente, isso está se envolvendo bastante porque eu obviamente apenas mudar o tamanho deste para que você possa vê-lo mais fácil. Mas deixe-me me mudar para cá um pouco mais. Ok, então agora os dois de ódio devem idealmente ter uma frente de cabeçalho, que vai mudar o estilo da fonte para financiar um vai mudar o tamanho que colocamos , e vai torná-lo negrito, que já é Ok, então há nossos vários tamanhos de fundos diferentes. Isto está parecendo bastante interessante. E então nesta área principal aqui, temos estofamento aqui. Mas vamos tirar isso, vamos ter uma batida separada para cada um dos diferentes artigos. E para isso, vamos usar os meus ganchos de novo. E no mapa fica nós vamos. Teoh, use essa tecla de teclado, que temos da nossa variável aqui. Está bem. E como você pode ver, agora é dado a cada uma dessas caixas um tapinha ligeiramente diferente, modo que é cada loop. Mas por uma questão de experimentação, vamos apenas mostrar como podemos fazer esse mesmo problema com um tipo diferente de loop. Isso é chamado de loop de quatro agora em um loop de quatro iam dizer, pois vamos criar uma nova variável chamada Dollar Sinai, que funcionará exatamente da mesma forma que era antes para um cifrão de um a quatro. Porque temos quatro na nossa lista, mas não sabemos se haverá talvez cinco ou três e futuro. Então nós queremos usar uma função construída chamada comprimento, que nós vamos apenas envolver em torno de artigos, e esta função vai ver quantos itens que estão na lista em devolver-nos para. Então ele vai dizer vai loop de 1 a 4 vezes e isso vai aumentar cada vez que nos dá exatamente a mesma idéia Então nós não precisamos mais disso. Isso só vai olhar através e nos dar artigos como a lista o tempo todo. Mas vamos usar o I D para fazer referência a qual idéia nessa lista queremos usar. Então, na verdade, o que precisamos fazer é criar três listas separadas aqui em baixo. Então eu vou ter um chamado cores novamente, e ele vai dizer ler verde, amarelo, amarelo, laranja Eu vou ter um frio ofegante, que vai dizer apenas 10 pixels, cinco pixels, dois pixels, 12 pixels e outro chamado tamanho do cabeçalho. Mas ela vai dizer 1,6 cm 1.4 AM um. Sim, 2 da manhã e nós vamos apenas remover esta lista mapeada, e em vez disso vamos lidar com três listas mais simples. Então, temos cores de preenchimento e tamanho do cabeçalho. Agora. Isso significa que agora vamos substituir isso por cores. Eu acho que escrevi o jeito Inglês e então aqui vamos dizer cores de fundo e vamos voltar para esse funcional usando antes do 10º 1 E desta vez o i d que estamos referindo vai mudar cada vez. Então vamos usar o cifrão I, que vai aumentar dependendo da aparência. Então vamos usar isso de novo. Sim, que isso vai dizer tapinhas em vez de cores e, em seguida, aqui em baixo, vai dizer tamanho do título como esse, eu acredito. Deixe-me apenas verificar as cores do preenchimento do tamanho do título. Isso deve ser ok agora dizendo entender, Eu soletrar a Liga Americana. Deixe-me tirar esse uso, está bem? E isso é bastante interessante. Eu pareço ter alguns batendo bastante impressionante em que 1º 1 Ah, eu coloquei 10 pc que você não tem idéia O que de isso? Se eu mudar de volta para 10 pixels agora está me dando 10 pixels e nós temos todos os mesmos tamanhos e batidas que tínhamos antes, que é usar um sistema ligeiramente diferente fora iminente. E finalmente temos um loop mundial sobre o que um loop while faz é que ele fará quase a mesma coisa que um loop completo. Exceto que podemos escolher o quanto aumentamos a cada vez. Assim, poderíamos potencialmente ter todas as outras caixas sendo tendo estilo aplicado a ela, por exemplo, ou poderíamos dar-lhe alguma fórmula matemática diferente para criar o número é. Mas, nesta ocasião, vou fazer o olho igual a I mais um em cada loop. E enquanto eu é menor que o comprimento das cores, então nós vamos continuar o loop. Isso também significa que antes de começarmos o loop, teremos que dar valor a mim. Vamos dar-lhe um valor de zero. Então o que acontece aqui é que vamos descer aqui. Ele vai dizer que eu é igual a zero enquanto eu é menor que quatro, que é o comprimento fora das cores passar pelo loop. Vai bater aqui. Isso vai fazer com que eu me torne um, o que vai nos deixar sair. Coloque todo esse código. Então, artigos um tem a primeira cor, o primeiro lote de preenchimento e o primeiro tamanho do título. E então porque um ainda é menos de quatro, ele vai dar a volta novamente, e desta vez ele vai se tornar, também. E ele só vai olhar através de incremental cada vez que atinge isso e essencialmente fazer exatamente a mesma coisa que isso para Luke, apenas isso. O poder que temos aqui é, como eu disse, poderíamos potencialmente dizer a cada vez, e ele vai então pular certas caixas e estilizar outras, e podemos fazer qualquer tipo de funções matemáticas que quisermos com isso. Então, talvez um tempo, Loop tem um pouco mais de energia fora quatro loops, possivelmente um pouco mais simples para a direita. Então, há três tipos diferentes de loops, e todos eles podem alcançar as mesmas coisas. Mas em diferentes situações, diferentes loops vão se adequar às suas necessidades mais do que acima. 25. Se ele for se se: Agora ainda estamos usando este arquivo de bússola aqui para usar um par de funções, e eu acho que poderíamos talvez recriar essas funções nós mesmos. Agora acho que estamos no ponto em que podemos começar a tirar essas rodas de aprendizagem um pouco e criar as nossas próprias. Então este é um interessante que temos aqui. Contraste-o. Vamos tentar. Se pudermos recriar isso, então o contraste fez é criar texto amarelo ou preto, dependendo do tipo de fundo. Então vamos ver se podemos criar nossa própria mistura que faz a mesma coisa. Então, se eu não pudesse e misturando, vou chamar de contraste. Vou enviar um argumento com uma cor de fundo e, em seguida, aqui dentro, vamos fazer um pequeno teste. Então é chamado de If else, e ele vai parecer algo como isso vai dizer se e ele vai verificar esta cor de fundo variável e nós queremos verificar a luz que ele é, então nós vamos usar uma função embutida chamada leveza, e isso vai retornar uma porcentagem, então nós queremos verificar se é menos de 50% e este é um condicional aqui onde ele diz que isso vai nos dar um número e nós estamos tomando esses dois números um contra o outro para que pudéssemos colocar várias coisas diferentes e poderíamos dizer iguais e isso nos diria se a cor é exatamente 50%. Se fosse muito, muito específico cinza, então isso diria sim ou não e poderíamos dizer Queremos verificar se esta cor é inferior 50% ou mais do que 50%. Mas poderíamos dizer: É menor ou igual a? Você também pode verificar se ele não é igual a usando uma marca de explicação e, em seguida, é igual a. E isso será verdade se for algo diferente do que muito específico. Gray vai executar o comando que vai estar entre estas duas chaves. Mas neste caso, eu só quero verificar se é menos de 50% de leveza. Então isso vai retornar um valor de 49 ou menos por cento, que significa que é um fundo escuro, que significa que eu quero uma cor clara. Então vamos colocar amarelo Ok, então isso vai nos dar texto amarelo. Se houver um fundo de cor escura, mas vamos ter um fullback para se houver um fundo claro de duas cores. Então vamos escrever mais aqui que está no sinal de outra coisa. E então temos mais dois colchetes e dentro desses colchetes vai ser a cor para fundos coloridos claros. E eu vou colocar essa cor cinza de carvão, e este é todo o Mixon que precisamos. Tudo o que temos que fazer é verificar esta cor para ver se é mais escura ou mais clara do que 50% e em seguida, enviar de volta uma cor para o texto em conformidade. Então esta era a função original da bússola. Um ID de contraste de mistura no meu é chamado de contraste. Então vamos mudar para o meu agora e vamos ver como é a página. Ok, ótimo. Então isso é quase exatamente o mesmo que ele waas. Exceto que agora estou um pouco mais no controle da mistura, então vamos ver se podemos criar uma fumaça ou mais alguns testes aqui para ver se podemos encontrar outras coisas. Então, vamos realmente adicionar isso aqui como um outro se e nós vamos Teoh, verifique outra coisa primeiro. Então o que isso está fazendo é isso vai dizer se eu vou escrever outro condicional aqui para testar, e se for um sim, vai fazer isso. Se for um não, vai para o próximo e ver se é este ou não. E se for um sim, vai ficar amarelo. Se for um não, vai acabar com isso. E este é o padrão do fullback. Se alguma coisa chegar ao outro, sempre será verdade, e vai deixar o texto preto. Então este, nós vamos dizer, se cor de fundo Não, não esse sinal. Queremos um cifrão. A cor de fundo é igual a duas vezes porque não somos. Não estamos tentando forçá-lo a igualar isso. Estamos tentando verificar se é igual a isso. Então nós normalmente usamos igual a duas vezes na programação para verificar essas coisas. Se a cor de fundo for igual, vamos ver se é igual a verde, então sabemos que o 2º 1 é igual a verde. Então, na ocasião que é igual a verde, vamos dar-lhe um, eu vamos dar-lhe uma cor branca, então se eu atualizar esta página agora, ele tem branco para o grão. Caso contrário, vai verificar o quão escuro é o fundo. Se é mais escuro que uma certa quantidade, vai torná-lo amarelo, e é menos do que uma certa quantidade. Isso vai fazer isso aqui diz 333 cor preta. Ok, isso é ótimo. Vamos ver se podemos fazer com que esta laranja também seja branca. Então nós queremos ter dois argumentos que estavam testando contra aqui. Queremos condicionar ELA. Então eu vou apenas ir em frente e escrever ou no meio aqui, ou cor de fundo é igual a igual. Oh, não. Ok, então agora isso é realmente um pouco confuso, não é? Porque diz que a cor de fundo é igual a verde ou plano de fundo. A cor é igual a laranja, mas precisamos que saiba a ordem de testar essas coisas. E se eu colocar alguns parênteses em torno disso, tudo dentro desses parênteses seria igual a verdadeiro ou falso antes de ler tudo. E se eu colocar isso na doença impressa, isso pode distrair isso para que não nos sobreponhamos. Eu coloquei esta marca. Isto é então nós vamos ter que valores que cada um igual, verdadeiro ou falso. Se qualquer um deles for igual a verdade, então ele vai direto para a próxima linha. Se ambos forem iguais a falsos, então ele irá para o próximo. Ok, então vamos guardar isso e ver se agora temos texto branco na caixa laranja. Alternativamente, poderíamos escrever e aqui e isso só seria verdade se ambas fossem verdadeiras. Então, só se a cor de fundo fosse verde e laranja, o que nunca vai acontecer. E você vai ver que vai voltar para o que as luzes vão para amarelo E o quê? Comece a ficar preto. Se você tiver alguns argumentos contra os quais testar, você pode verificar se ambos são verdadeiros, e então ele irá para este. Então essa é uma afirmação “if else”. Mas para um pedaço tão simples de código com apenas um par de linhas, e podemos muito bem usar uma função SAS chamada função if. Então, eu só vou expandir isso um pouco e mostrar a vocês como isso funciona. Então, se a função está indo, Teoh tem um valor verdadeiro ou falso, e então algum código que vamos executar para true ou código que executaria para false. Então eu vou escrever cores aqui, e haverá duas opções possíveis. Pode ser amarelo ou pode ser desta cor cinza. Agora tudo o que precisamos agora é que esta primeira seção aqui vai ser verdadeira ou falsa. Então o que idealmente devemos fazer é colocar em tudo isso porque não queremos o bit de contraste. Nós só queremos que o mapa bit aqui e e apenas obter a leveza condicional off menor ou maior que 50%. Eu quero apenas colocar isso aqui, vai ter a cor lá. Agora, esta parece uma linha bastante complicada no momento. Mas se eu apenas salvá-lo e atualizar esta página, você vai ver que isso codifica preto sobre isso. Porque amarelo o que isso está fazendo. Está dizendo que se isso for verdade, fique amarelo. Se isto for falso, faça-o preto. E isso é o que estamos testando que diz leveza grande ou menor que 50%. E tem esta cor no meio, que é o mapa recebe o fundo do artigo. Isso parece um pouco complicado lá dentro. Então, o que poderíamos fazer é no início de cada loop, poderíamos criar uma nova variável Vamos esfriar a cor de fundo em Vamos apenas torná-la igual. Cor de fundo do artigo Matt Gaetz. Isso vai reduzir um pouco, porque não vamos repetir esse texto. Podemos usar isso de cada vez, o que é um pouco natural. Mas isso ainda é bastante complicado, então nós poderíamos realmente ver e ter outra variável chamada Is Light. Vamos chamá-lo de luz, e isso vai ser simplesmente apenas um valor booleano, como nele será igual a verdadeiro ou falso. E eu vou colocar isso aqui, e realmente deve ser chamado de escuro dele. Não colocaria isso aqui? E isso terá um valor de sim, verdadeiro ou falso, dependendo se isso tem uma leveza de mais ou menos de 50%. Então agora você pode ver que isso é muito, muito mais claro, um pouco de código. E se eu atualizar esta página aqui, ela ainda está funcionando exatamente como pensávamos. Então o que estamos fazendo aqui é que está criando algumas variáveis no início de cada loop através, então nós também poderíamos apenas adicionar este preenchimento. Aqui. Eu tenho um estofamento frio variável. Poderíamos fazer o mesmo com o tamanho do título, então ele está mostrando um código muito mais claro 26. Felicitações: Bem, parabéns. Você chegou ao fim do nosso curso e em apenas duas horas ele mudou a maneira como você escreve folhas de estilo para sempre. Você pode ir em frente e começar a economizar tempo Escrevendo melhor estilo. Ela está imediatamente. Espero que você encontrou o curso divertido quando eu espero que você achou informativo. Se você não tem, por qualquer razão, por favor, me escreva uma mensagem e deixe-me saber como eu posso melhorá-lo no futuro Se você tem um por favor compartilhá-lo com seus amigos no direito de rever E eu espero vê-lo novamente Mas claro, muito, muito em breve