Como dominar SASS: um guia completo para pré-processadores CSS

1. Introdunção do curso: Você usa CSS há muito tempo e quer levar suas habilidades a um nível superior? Você pode ter feito um curso de design de ondas, mas ainda não entendeu completamente o CSS. No seu caso, essa é a solução para você. Olá. Meu nome é John Shocker Mais uma vez, estou de volta com uma nova versão empolgante e, neste curso, aprenderemos SAS do início ao fim. SAS significa folhas de estilo sintaticamente incríveis. É um pré-processador CSS. Nos tempos modernos, se você quer ser um desenvolvedor web de front-end , deve ter conhecimento de qualquer pré-processador de CSS Não há dúvida de que o CAS é a linguagem de extensão CSS de nível profissional mais madura, estável e poderosa do mundo Como eu disse, abordarei tudo relacionado ao SAS nesta série de tutoriais. Inicialmente, vou apresentar uma introdução aprofundada do CAS e, em seguida, aprenderemos como podemos instalar o compilador CS Vamos abordar variáveis, aninhamento, importações parciais e importações, mistura, operadores de extensão, funções, dicas diretas condicionais Este curso lhe dará o conhecimento que você está procurando. Estamos prontos para ir. Vamos começar. 2. O que é Sass?: Olá, pessoal. Bem-vindo de volta. Neste tutorial, vou apresentar a você o que é SAS? Por que precisamos usar o SAS? E como podemos usar o CAS? Nossa primeira pergunta é: o que é SAS? SAS significa folhas de estilo sintaticamente incríveis. É basicamente uma extensão CSS. Faremos o mesmo trabalho no arquivo CAS. Como fazemos no arquivo CSS. Caso contrário, podemos chamá-lo de pré-processador CSS. Hoje em dia, é muito necessário que você tenha conhecimento de qualquer pré-processador CSS Existem dois famosos pré-processadores CSS, SAS e menos. comparação, o SAS é mais popular porque o SS vem com recursos mais avançados do que menos. Se você concluir este curso, quero dizer que se você aprender CS automaticamente, poderá entender menos. Você só precisa enfrentar uma pequena diferença de sintaxe, nada mais. Agora a questão é que, como eu disse anteriormente, funciona como CSS. Então, por que o CS é mais popular que o CSS? Porque há alguns motivos. Deixe-me te mostrar. Em primeiro lugar, é muito fácil de gerenciar. Quando trabalhamos com CSS, ele cria arquivos muito longos Às vezes, é muito difícil gerenciar arquivos longos. Mas se falamos sobre o SAS, é muito fácil de gerenciar. O próximo motivo que o tornou mais popular foi aumentar nossa velocidade de codificação em comparação com o CSS normal Mas é eficaz quando você trabalha com grandes projetos, não com projetos pequenos. Não é muito útil em projetos pequenos. Suponha que você queira criar um site de cinco páginas. Nesse caso, não é muito útil. Mas se você trabalha com um site complexo e com várias páginas , é muito útil A última coisa que o tornou mais popular a compatibilidade entre navegadores. Quando você usa CSS, alguns recursos não são suportados no navegador antigo. Às vezes, isso cria um grande problema, mas não há problema com o SAS por seu recurso embutido, ele funciona com qualquer navegador antigo Suponha que se você trabalha com Internet Explorer sete, caso contrário, se você trabalha com a versão em letras do navegador Chrome , não consegue ver nenhuma diferença na saída. Funciona da mesma forma que funciona na versão de cartas. Agora vamos ver como podemos usar o arquivo CS em nosso arquivo STL. O estranho é que não podemos usar o arquivo CS em um sml. Sim, é verdade. Não podemos usar o arquivo CS diretamente no Atmel. Mesmo o navegador não consegue entender o código SAS. O navegador só pode entender arquivos CSS, não o arquivo CS. Então, por que precisamos criar um arquivo CS, precisamos de um compilador SAS Ele compila o arquivo CS e o converte em arquivo CSS. Portanto, você precisa inserir o arquivo CSS no seu documento ETL, não no arquivo CS no seu documento ETL, não no Mas você precisa digitar seu código no arquivo CAS, não no arquivo CSS. Em seguida, você compila o código SAS e converte em arquivo CSS. Agora a pergunta é: o que é o compilador SAS? No próximo vídeo, saberemos o que é o compilador Cs. Agora, vamos falar sobre os recursos do OSS e abordaremos esses recursos em nossos próximos tutoriais Nosso primeiro recurso são as variáveis. Podemos armazenar valor em variáveis como uma linguagem de programação. Nosso segundo recurso é o aninhamento. Usando o aninhamento, podemos atribuir uma classe a outra classe. Caso contrário, podemos usar uma classe em outro ID. Este é um caso de uso de aninhamento. Nosso próximo recurso é parcial e entradas. Podemos criar um pequeno arquivo cs e importá-lo como módulos. Nosso quarto recurso são raposas. Usando mixins, você pode reutilizar seu código várias vezes. Nosso quinto recurso é estender. Suponha que você digite algum código em uma classe, mas queira reutilizar esses códigos em outra classe Nesse caso, você pode usar extensões. Nosso próximo recurso são os operadores. Operador significa operadores aritméticos. Se precisar executar algum cálculo, nesse caso, você pode usar esses recursos como adição, multiplicação, divisão, etc Nosso próximo recurso são as funções. Nosso SAS vem com algumas funções veladas, e você pode usar essas funções Como você pode criar suas próprias funções como linguagem de programação. Então, nosso segundo último recurso são as diretivas condicionais. Se você quiser executar algum trabalho condicional como Is condition, poderá usar esse recurso, e nosso último recurso são os loops Eu sei que você já está familiarizado com JavaScript e outras linguagens de programação. Então, não preciso explicar o que são loops e qual é o uso de loops Você pode usar qualquer tipo de loop, como quatro loops, Di loop, while loop, etc Todos eles estão disponíveis no SAS. Agora vamos falar sobre a sintaxe SAS. Basicamente, o CSR veio com dois tipos de sintaxe, sintaxe SCSS e sintaxe SASS Essas são basicamente extensões. SCS SAS. Basicamente, eles estão dentro, mas há uma pequena diferença. Suponha que tenhamos uma sintaxe CSS. E, como você pode ver, usamos um total de três tipos diferentes de seletores NebuL Nb AI e Neb anchor Como você pode ver, primeiro precisamos digitar os valores CSS do NebuL. Em seguida, precisamos digitar o valor CSS do Nb AI. Por fim, é necessário digitar os valores CSS da âncora do Neb. Mas se precisarmos usar o mesmo código na sintaxe SCSS nesse caso, precisamos digitar assim Precisamos selecionar um tipo de elemento Nab. Então, dentro dos alivss, precisamos digitar toda a sintaxe, UL, LI e A. Basicamente, chamamos esse Vamos aprender mais sobre isso em nossos próximos tutoriais Mas se você digitar a sintaxe da célula no código SAS, precisará digitar assim Você não precisa usar calivras nem ponto e vírgula. Você não precisa usar ponto e vírgula após uma propriedade. É muito parecido com a linguagem de programação Python. Mas para este tutorial, vou usar a sintaxe SCSS, esta Caso contrário, isso pode confundir você. Agora, vamos falar sobre o tipo de conhecimento que você precisa para começar. Para o CAS, você deve ter conhecimento básico de STML e deve ter um bom conhecimento de CSS Como eu disse anteriormente, em última análise, o arquivo CS foi compilado em um arquivo CSS. Portanto, você deve ter conhecimento da sintaxe CSS adequada. E se eu falar sobre codditor, você pode usar Para este tutorial, vou usar o código VS. Você pode usar qualquer editor de código. Então, isso é tudo para este tutorial. No próximo tutorial, falarei sobre o que é o compilador CAS e qual compilador vamos usar neste Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 3. Baixe e instale o compilador sass: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos o que é o compilador SAS e como podemos baixar o compilador SAS, o que pode ajudar a compilar nosso arquivo CS em um arquivo CSS Como você pode ver no meu navegador, abro o site oficial do SAS, SAS hyphen lang.com Como você pode ver, ele fornece uma introdução básica do SAS. Se você tiver tempo, poderá lê-lo. A seguir, aqui você pode ver uma opção chamada Instalar. Basta clicar em. Em seguida, é redirecionado para esta página Se você rolar um pouco para baixo, aqui poderá ver um método diferente. Aqui você pode ver uma lista de compiladores e aqui você pode ver outro método instalar seu SAS usando o NPM Para este tutorial, não vou usar nenhum pacote de nós. Eu gostaria de usar o compilador e vou usar um compilador diferente, não esse, e o nome do nosso compilador Como você pode ver, esses são a maioria dos compiladores pagos. É por isso que vou usar um compilador gratuito, que é o Koala Você só precisa pesquisar o compilador Koala SS no seu navegador e clicar neste link, e clicar neste link, Este é o site oficial deste compilador. Como você pode ver, o Koala é um aplicativo de GUI para SAS Compass e CoffeeScript Nós o usamos para fins de compilação para essas linguagens, e você sabe que todas são linguagens de pré-processador Basicamente, usando esse aplicativo, podemos compilar todas essas linguagens Em primeiro lugar, precisamos baixar esse aplicativo. Para fazer o download, você precisa clicar neste botão verde, Baixar. Como você pode ver, nosso download já começou. Em seguida, você precisa abrir sua pasta de download e aqui você pode ver a configuração deste aplicativo, a configuração do Koala Agora vou instalar esse aplicativo no meu computador. O processo de instalação é muito simples, você precisa clicar duas vezes nele. Depois disso, você precisa clicar em Avançar e escolher o diretório onde deseja instalá-lo. Esse é o local padrão, basta clicar em Avançar. Como você pode ver, eu já instalei esse aplicativo, então não quero instalá-lo novamente, mas você precisa concluir o processo de instalação. Pode levar dois ou três minutos para concluir o processo de instalação e, depois de concluir o processo de instalação, ele se abre automaticamente. Por enquanto, vou cancelá-lo. Então, depois de concluir o processo de instalação, você precisa clicar no ícone do Koala para abri-lo Basta clicar duas vezes nele. Como você pode ver, a primeira vez está totalmente vazia. E a partir desse ponto, você pode adicionar qualquer arquivo SAS ou um arquivo is. Primeiro, vou entrar no meu editor e criar um arquivo CS. Como você pode ver, há uma pasta Nam Demo, e dentro dessa pasta Devo, há outra pasta Nam CSS E dentro dessa pasta CSS, vou criar um arquivo CS. Vamos criar um novo arquivo dentro dessa pasta. Estilo dot SCSS. Caso contrário, você também pode usar a sintaxe SASS. Mas, como eu disse anteriormente, para este tutorial, vou usar a sintaxe SSS Além disso, você pode ver o ícone SAS neste local. Agora, vamos adicionar um pouco de código SAS neste documento. Eu já copiei um código SAS e vou colá-lo aqui. Este código é para fins de demonstração, então você não precisa entendê-lo. No próximo vídeo, vou falar sobre isso. Como você pode ver, criamos nosso arquivo CS com sucesso. Agora, precisamos criar um arquivo CSS na mesma pasta com o mesmo nome. Vou criar um arquivo CSS nesta pasta, estilo dot CSS. É isso mesmo. E precisamos manter esse arquivo vazio. Não precisamos digitar nenhum código CSS nesse arquivo. Precisamos deixar em branco e agora precisamos abrir nosso KoalaOptare Vou abrir nosso KoalaOptare. Então, como você pode ver, lado a lado, abro meu Qarafopter e meu E aqui você pode ver dois arquivos diferentes como arquivo e um arquivo CSS. E agora precisamos mover essa pasta CSS neste aplicativo. Vou arrastar essa pasta e colocá-la aqui. É isso mesmo. Aqui você pode ver o pico automático todos os arquivos CSS e CS. Agora vou voltar ao nosso editor de código e vou fazer algumas alterações em nosso arquivo CS. Aqui você pode ver no meu editor, eu abro meu arquivo CS. Com isso, eu também abro meu arquivo CSS. Se eu mostrar meu arquivo CSS, como você pode ver, agora ele está totalmente vazio. Agora vou voltar para o arquivo CS e vou definir esse arquivo, controle. Então, se eu definir esse arquivo e mostrar meu arquivo CSS, aqui você pode ver o código CSS adequado. Portanto, esse aplicativo Kana compila o código SAS e converte em um código CSS Aqui você pode ver com a tag Nap, ele seleciona UltaGo, mas em nosso arquivo CS, dentro da tag Nap, usamos a tag Como você pode ver em nosso arquivo CS, usamos o Napkword uma vez Mas se eu mostrar um arquivo CSS, aqui você pode ver que ele usou a tag Nap três vezes com a tag UL com a tag LI com a tag ANCA Agora vamos fazer algumas alterações em nosso arquivo CS e ver o que aconteceu. Então, aqui eu quero aumentar o UL paddy de 20 pixels, tipo Summer, 20 pixels Se eu definir esse arquivo e mostrar meu arquivo CSS, aqui você pode ver que nossas alterações estão refletidas adequadamente no arquivo CSS. Você só precisa se lembrar de que não precisa alterar nada no seu arquivo CSS. A melhor opção é fechar o arquivo CSS e depois trabalhar com o arquivo CS. Espero que agora esteja claro para você como os compiladores CS funcionam Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 4. Tutorial de variáveis do Sass: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, aprenderemos as variáveis SAS. Mas, primeiro, vamos tentar entender o que são variáveis e por que devemos usá-las. Aqui você pode ver que criamos um seletor de body tag. Dentro desse seletor, definimos a cor de fundo, vermelho e a antena da família de fontes Com isso, vou pegar dois outros seletores H, um seletor e Spenselector Agora, se você notar, você pode ver que há uma coisa comum. São cores, cor vermelha. Para o corpo, uso a cor de fundo vermelha e, para cada tag, uso a cor da fonte vermelha e também uso a mesma cor para a tag span. Como você pode ver, o vermelho é a cor comum. Suponha que tenhamos usado a mesma cor em dez lugares. E agora precisamos mudar a cor. Então temos que ir a dez lugares para mudar a cor, e isso leva muito tempo. Para isso, o sus introduz variáveis. Em variáveis, tomamos o nome de um valor. No nosso caso, cor vermelha, e o nome da nossa variável é a cor principal do traço E você deve se lembrar do nome da variável, você precisa usar o cifrão. Primeiro, precisamos usar o nome da variável e, em seguida, armazenar o valor nessa variável. Em seguida, precisamos comprimir o nome da cor com esse nome de variável O principal benefício do uso de variáveis é quando precisamos alterar a cor primária. Suponha que eu queira mudar a cor primária vermelha para azul. Então, só precisamos fazer alterações nas variáveis, não em todos os seletores Não precisamos digitar o nome da cor azul nos lugares. Você só precisa fazer alterações na variável. Esse recurso também é introduzido no CSS, mas os navegadores antigos não oferecem suporte ao recurso CSS. Mas o SAS poderia. Sem perder seu tempo, vamos começar a prática e ver como as variáveis funcionam no SAS Aqui você pode ver lado a lado, eu abro meu Visual Studio Creaor e meu navegador e você já pode ver, eu crio um layout básico de página da web Aqui você pode ver o cabeçalho, o esterco, a barra lateral e também parte do conteúdo e o rodapé Se você perceber que pode ver, há uma cor comum no cabeçalho e no rodapé desta página da web Se eu passar o mouse sobre esses links, você poderá ver a mesma cor de fundo dessa tag âncora Além disso, se eu passar o mouse sobre meus itens laterais, você poderá ver a mesma cor marrom Além disso, se eu selecionar todo o conteúdo, você poderá ver a mesma cor de fundo por trás do conteúdo. Agora vou mostrar como podemos usar variáveis. Como você pode ver, nossa cor primária é marrom, então precisamos encontrar a cor marrom. Aqui você pode ver o nome da cor marrom. Usamos essa cor no Anchor hover, cabeçalho, na seção de rodapé , muito disso Agora eu quero substituir esse valor de cor pelo membro variável Para isso, precisamos criar uma variável. Então, aqui, eu vou criar uma variável. Inicialmente, precisamos usar cifrão, dólar e nosso membro variável é a cor principal Cor mínima. Eu vou usar a cor marrom. Agora vou substituir os nomes das cores nome da variável, cor principal. Então, primeiro, vou substituir o seletor Anchor Hover da barra superior, a cor ou cor ou Também vou substituí-lo no seletor de cabeçalho, cor principal Em seguida, no item da nossa lista de menu. Em seguida, quero substituí-lo em nossa seção de conteúdo. E também vou substituí-lo em nossa barra lateral. Em seguida, vou substituí-lo em nossa seção de rodapé. Então está feito. Se eu definir esse arquivo e recarregar meu navegador, você verá que não há alterações Você pode ver a mesma cor do cabeçalho, a mesma cor do rodapé, e se eu abrir meu fofinho nos links do meu menu, você pode ver a cor de fundo. Também é marrom. Substituí com sucesso nosso valor de cor por uma variável. Agora, quero mudar a cor principal deste site, marrom para azul. Quando coloco o cursor nos itens do menu, quero a cor azul marrom Basicamente, quero dizer que quero mudar a cor principal, marrom para azul. Vou digitar cabelo azul. Se eu definir esse arquivo e recarregar meu navegador, você poderá ver o resultado Você também pode ver a cor azul na seção do cabeçalho, na seção rodapé, na seção do menu e na seção da barra lateral Agora não precisamos mudar a cor várias vezes porque agora usamos a variável. Agora você pode colocar qualquer cor de uma vez, e ela refletirá todas as páginas. Essa é a vantagem de usar variáveis. Você só precisa usar o nome da variável como um valor. Agora, se eu mostrar meu arquivo CSS, aqui você pode ver que não há variáveis. Só você pode ver os nomes das cores, fundo azul. Não é só trabalhar com cores. Você pode colocar qualquer tipo de valor na variável. Suponha que eu queira alterar o estilo da fonte em toda a página da web. Nesse caso, podemos usar variáveis. Vou criar outra variável, e o nome da nossa variável é fonte principal, Dólar, fonte principal. Cólon. Por enquanto, vou usar aerial e agora vou substituir todo o valor da fonte por essa variável Vou substituir a fonte aérea por essa variável, fonte principal E também precisamos substituir no seletor de cabeçalho, a fonte principal Por fim, vou substituí-lo em nosso cabeçalho de conteúdo. Fonte mínima. Se eu definir esse arquivo e recarregar meu navegador, como você pode ver, não haverá alterações. Funcionou perfeitamente. Você pode vê-lo imprimir uma fonte real em toda a página da web. Agora, se precisarmos alterar a família da fonte , precisaremos alterá-la várias vezes. Agora, vamos mudar a família de fontes em toda a página da web e vou usar o que não é uma fonte Se eu definir esse arquivo e recarregar meu navegador, você poderá ver o estilo da fonte Como você pode ver, ele substitui a fonte Areal pela VardanaFont. Agora está claro para você, qual é o uso da variável no SAS Isso não apenas economiza nosso tempo, mas também aumenta nossa produtividade. Podemos mudar milhares de lugares mudando um só lugar. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 5. Tutorial de aninhamento de Sass: Olá, pessoal. Bem-vindo de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao SAS e, neste tutorial, aprenderemos o agrupamento do SAS Aqui você pode ver três seletores diferentes. Como você pode ver em nosso primeiro seletor, eu uso a tag Nap com a tag UL, e no nosso segundo seletor, eu uso naptag com a tag Ali, e no nosso último seletor, usamos a tag e no nosso último seletor, Nap O que é comum entre esses três? Que é Nap tag. Como você pode ver, se usarmos a sintaxe SS , precisaremos usar a tag Nap três vezes Mas se digitarmos o mesmo código no SAS, precisaremos digitar assim e chamaremos esse método de aninhamento Aqui você pode ver que, primeiro, iniciamos a tag Nap, depois, dentro do Caliss, estilizamos todos esses Você selecionará nosso seletor de âncora Ali. Se usarmos aninhamento, não precisaremos digitar a palavra-chave dep três vezes e, dentro do Liverss precisaremos selecionar todos os outros seletores Que está relacionado ao naptag. Mas quando eu configuro o arquivo CS, ele retornará esse tipo de código CSS. Isso reduzirá alguns códigos de escalação, mas retornará o mesmo resultado Por fim, sem perder tempo, vamos estudar a prática e ver como funciona Então, aqui você pode ver lado a lado, eu abro meu criador visual de parafusos e meu navegador e já crio um layout básico da web. E no meu Visual Studio Cdiator, você pode ver o iOpenT 3.5, nosso documento de estimativa, nosso arquivo CS e nosso arquivo CSS Você sabe, eu uso esse layout em nosso tutorial anterior, você pode ver as variáveis que eu crio em nosso tutorial anterior. Mas neste contrato de estúdio, aprenderemos como podemos usar o aninhamento Mas, primeiro, precisamos encontrar a posição em que podemos usar o aninhamento Vou rolar um pouco para baixo. Aqui você pode ver o seletor principal de Br. Como você pode ver, após o seletor superior de Br, usamos a barra superior com UL, UL Li, etiqueta de ancoragem e Esse é o correto uso do método de aninhamento. Primeiro, vou copiar o CSS da UL. Copie e, em seguida, vou colá-lo dentro do seletor Tobar porque tobr é a tag comum Agora, esse seletor não é necessário, então vou removê-lo Em seguida, você pode ver dentro da tag UL, há uma tag LI. Como você pode ver, eu já uso a tag UL na seção da barra superior. Agora vou copiar somente o seletor de IA dessa posição para essa posição Copiar. Vou colá-lo dentro da tag UL. Primeiro, nosso seletor tobr e dentro do seletor tobr, coloquei o seletor UL e, em seguida, dentro do seletor UL, coloquei o seletor AI . Agora eu não preciso desse seletor de teses, então vou remover E agora você pode ver dentro do seletor Tobar que temos a etiqueta âncora Agora vou copiar somente o seletor de tags âncora e colá-lo fora da tag UL Vou remover esse código. Eu não preciso disso agora. Agora você pode ver um seletor de Hobart. É um seletor Hober âncora, não o seletor TBarhber não Vou copiar esse seletor de Hobart e vou usá-lo dentro da tag nga e vou usá-lo dentro da tag nga nessa posição. Vou remover esse. E agora eu quero te contar uma coisa nova. Como você pode ver, dentro da tag âncora, criamos a tag Anchor Hobert Portanto, não é necessário usar a tag âncora novamente para que possamos remover a tag Anca Aqui podemos usar o sinal da pessoa, algo assim. Isso significa que usamos esse efeito Her com a etiqueta principal. Isso criará a tag Her de sua tag principal. Se eu definir esse arquivo e atualizar meu navegador, aqui você pode ver que não há alterações É o trabalho como está. Chamamos esse método de aninhamento. Da mesma forma, seguiremos o mesmo processo para a seção de cabeçalho. Vou copiar a tag H one e colá-la dentro da tag de cabeçalho. Vou remover esse. Pois vou seguir o mesmo processo para a seção do menu. Primeiro, vou copiar a parte UL desse menu e colá-la dentro da seção do menu, vou remover a antiga. E então vou copiar a parte de IA desse menu e colá-la dentro da seção do menu. E então eu vou remover este. Nosso próximo selecionado é o seletor de âncora, que está dentro do seletor LI Então, vou copiar a tag âncora e colá-la dentro da tag LI E então eu vou remover este. E nossa próxima seleção é a etiqueta Anchor Hobart. Então, vou copiar esse seletor. Então, como você pode ver, é a tag âncora Hobart, então precisamos colá-la dentro da tag âncora E então precisamos remover a etiqueta de ar, e podemos usar uma pessoa aqui. Por enquanto, esse é inútil, então eu quero removê-lo. Então, basicamente, é criar nosso código CSS de forma muito gerenciável. Se eu definir esse arquivo e recarregar meu navegador, como você pode ver, não haverá alterações E agora não precisamos usar esse seletor de menu várias vezes Em seguida, vou seguir o processo de agrupamento da nossa seção de conteúdo Então, primeiro, vou copiar o seletor s two. Em seguida, vou colá-lo na seção de conteúdo, vou remover esse. Em seguida, você pode ver um pseudosseletor chamado seleção. Você pode ver que usamos essa seleção em toda a seção de conteúdo, vou copiar apenas o pseudo seletor Vou colá-lo na seção de conteúdo, não na seção ST. E então eu vou removê-lo. Como você sabe, para o pseudo seletor, precisamos usar o sinal de pessoa, então vou digitar pessoa Se eu salvar esse arquivo e recarregar meu navegador, você verá que não há alterações Espero que agora esteja claro para você o que é aninhamento e como podemos usar o aninhamento Obrigado por assistir a este vídeo. Fique ligado no nosso próximo estúdio. 6. Parciais do Sass e tutorial de importação: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao SAS e, neste tutorial, aprenderemos o que é parcial e importa. Então, primeiro, vamos nos concentrar no parcial. Parcial significa partes. Eu quero dizer que partes do SS estão bem. Suponha que temos um arquivo CS e nosso arquivo é um arquivo CS de ponto principal, e esse é nosso arquivo principal. E, como você sabe, se criarmos um site, nosso site dividido por cabeçalho, conteúdo, sideware e rodapé, às vezes precisamos criar designs diferentes para páginas diferentes Mas o problema é: quando digitamos todo o código em um único arquivo? Isso torna nosso arquivo muito pesado e confuso. Precisamos rolar nossa página para cima e para baixo várias vezes. Então, para resolver esse problema, separamos nosso layout. Para cabeçalho, criamos arquivo de cabeçalho para conteúdo, criamos um arquivo diferente para barra lateral e rodapé Se trabalharmos com variáveis, também criaremos outro arquivo para variáveis. Basicamente, é organizar nosso código e reduzir a falta de jeito Suponha que concluamos o estilo da seção do cabeçalho e, em seguida, precisamos abri-lo novamente. Podemos abrir a peça especificada. Por que precisamos mudar? Esse é o conceito de parcial. Agora fale sobre importações. Depois de criar as diferentes partes, precisamos inserir essas partes em nosso arquivo principal. Para isso, precisamos usar uma palavra-chave especial, input. Na entrada da taxa, precisamos digitar o cabeçalho do nome do arquivo. Uma coisa importante que você precisa lembrar. Você precisa criar esse mesmo arquivo de extensão. Eu quero dizer arquivo CS, não arquivo CSS. Você não pode inserir o arquivo CSS no arquivo principal. Obviamente, você precisa criar um arquivo CS. E outra coisa que você precisa lembrar ao criar seu arquivo separado, você precisa usar o undersco antes Eu quero dizer underscohader dot SCSS. Nosso sinal de sublinhado reconhece que este não é o arquivo principal, então nosso compilador CS identificou com sucesso que este é um arquivo parcial e precisamos incluí-lo em nosso arquivo principal É por isso que não precisamos de um arquivo CSS separado para arquivos parciais. Se você usa a sintaxe SASS, então, para seu arquivo parcial, você também precisa usar a sintaxe SASS Então, sem perder seu tempo, vamos começar a prática e ver como podemos usar parciais e entradas Como você pode ver, eu já abro meu aplicativo KOA e abro nossa pasta CSS neste aplicativo Com isso, também abro o editor de código do Visual Studio. Como você pode ver, este é o nosso Min CSF, estilo dot Sss. E agora vou dividir esse arquivo com pas. Em primeiro lugar, vou começar com essas variáveis. Quero criar um arquivo CS separado para nossas variáveis. Primeiro, vou criar um novo arquivo em nossa pasta CSS. E o nome do nosso arquivo é variáveis. Como eu disse anteriormente, para criar um arquivo parcial, precisamos usar variáveis underscosge undersco Dot, nossa extensão é C é é, então eu vou pressionar Enter. Como você pode ver, ele limpou nosso arquivo e, em seguida, vou cortar minhas variáveis desse arquivo e colá-las dentro do arquivo de variáveis E eu vou removê-lo do nosso arquivo principal. Então, primeiro, vou salvar esse arquivo. Em seguida, precisamos incluir esse arquivo em nosso arquivo de estilo. Para isso, primeiro, precisamos digitar no sinal vermelho e depois digitar Importar. Importe dentro dos códigos duplos. Precisamos digitar o nome do arquivo, mas não precisamos usar undersCosign, precisamos digitar variáveis Você não precisa mencionar a extensão do arquivo. Nosso compilador é inteligente o suficiente para entender a extensão do arquivo e, em seguida, você precisa usar ponto e vírgula para finalizar essa linha Em seguida, vou criar um novo arquivo para nossa seção de cabeçalho. Então, vou digitar o cabeçalho undersco. Então eu vou pressionar Enter. Como você pode ver, ele criou um novo arquivo e agora eu quero separar nossa seção de cabeçalho. Para isso, vou selecionar na barra superior. Na seção da barra superior, quero copiar nosso cabeçalho, também o menu. Vou recortar e colar dentro do arquivo de cabeçalho. É isso mesmo. Para nossa parte do cabeçalho, selecionamos a seção de cabeçalho Tobb, também a seção do menu E então precisamos importar o arquivo em nosso arquivo principal, que é o estilo dot Sss Vou digitar no vermelho, Importar e, dentro do campo duplo, precisamos digitar o nome do arquivo, que é cabeçalho, depois ponto e vírgula dois nesta linha Agora, para nossa seção de conteúdo, vou criar outro arquivo. Dentro da pasta CSS, vou criar o conteúdo undersco SCS e, em seguida, vou pressionar Enter Como você pode ver, ele cria um novo arquivo. Em seguida, volto ao meu arquivo SSS de estilo e vou cortar essa parte do conteúdo E eu vou colá-lo dentro do arquivo SCSS de pontos de conteúdo Eu vou configurar esse arquivo também. De forma semelhante, precisamos inserir esse arquivo em nosso arquivo principal. Então, vou duplicar essa linha e aqui vou digitar contain Em seguida, precisamos criar um arquivo para nossa seção de guerras paralelas. Vou criar um novo arquivo em nossa pasta CSS. Sublinhe a barra lateral Sss . Como você pode ver, criamos um novo arquivo para nossa barra lateral e, em seguida, precisamos cortar a seção lateral do arquivo CSS de estilo Vou cortar essa seção lateral desse arquivo. E eu vou colá-lo dentro desse arquivo Sidewd. E então eu vou configurar esse arquivo. Agora precisamos inserir esse arquivo em nosso arquivo de estilo. Vou começar esta linha, e aqui vou digitar sidebard. Finalmente, vou criar um novo arquivo para nossa seção de rodapé Então, dentro dessa pasta***, mais uma vez, vou criar um novo arquivo, undersCoefter, dot scss Neste arquivo, quero estilizar nossa parte do rodapé. Vou cortar essa parte colar dentro da seção de rodapé Então eu vou configurar esse arquivo. Voltarei ao nosso arquivo principal, denominado arquivo CS. Agora preciso inserir a seção de rodapé em nosso arquivo principal. Então, duplique essa linha e aqui vou digitar rodapé. Vou configurar esse arquivo. Por fim, você pode ver a seção de consulta de mídia. Nós o usamos para fins responsivos. Se você quiser separar essa parte, sim, você pode. Vamos criar outro arquivo para a seção de consultas de mídia. Dentro dessa pasta***, vou criar outra pasta Vou criar um arquivo em sco media. Dot SCs e, em seguida, vou pressionar Enter. Em seguida, vou cortar a seção de consulta de mídia e colá-la dentro desse arquivo de mídia. Eu vou configurar este. Como você sabe, precisamos inserir esse arquivo em nosso arquivo principal. Vou duplicar essa linha aqui. Vou digitar nossa linha tênue, que é mídia E eu vou pressionar Control S para definir esse arquivo. Usando a técnica parcial, separamos com sucesso nosso layout da web. Separamos nossa seção de cabeçalho, seção de conteúdo, seção de barra lateral, seção de rodapé, também as consultas de mídia e as variáveis É a falta de jeito do nosso site pelo rádio. Se eu abrir meu arquivo SML, deixe-me mostrar. Como você pode ver, esse é o nosso layout HTML. Vamos recarregar o arquivo. Como você pode ver, não há mudanças. É L do jeito que está. Agora, suponha que você queira alterar a cor de fundo do cabeçalho e do rodapé Nesse caso, você precisa abrir o arquivo de variáveis. E a partir daqui, você pode mudar sua cor principal. Eu quero um pouco de cor verde, algo assim. Se eu sentar nessa pilha e depois voltar ao navegador e recarregar meu navegador, aqui você pode ver o resultado Mudou nossa cor principal. Se eu mostrar meu arquivo CSS, deixe-me mostrar o estilo CSS de pontos. Aqui você pode vê-lo seguindo a sequência de nossos arquivos de entrada. Primeiro Tpbard, depois vem o cabeçalho, depois vem o conteúdo e, em seguida, vem o rodapé do Atlas da barra lateral e, em seguida , nossa consulta de mídia. Após a consulta de mídia, como você pode ver, nosso corpo foi selecionado e nosso rapper foi selecionado Se eu mostrar o arquivo SAS de estilo, você pode seguir a sequência. Primeiro, nossas variáveis, o cabeçalho contém a consulta de mídia do rodapé da barra lateral e, como você pode ver, nossa seção de corpo e nossa seção de rapper Espero que agora esteja claro para você o que é parcial e importa. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 7. Tutorial de Sass Mixins: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, vamos aprender um novo recurso Vlated SAS Neste tutorial, aprenderemos que as raposas são um recurso muito útil Suponha que temos duas classes diferentes, classe um e classe dois. Como você pode ver, eu uso propriedade botter radius, ambas as classes Para a classe um, eu uso o raio de borda de cinco pixels, e para a classe dois, eu uso o raio de borda de dez pixels Como você pode ver, eu uso propriedades semelhantes em ambas as classes. Sua propriedade é a mesma, mas seu valor é diferente. Para nosso antigo navegador Chrome, usamos Bear Radius com webkit, e para nossos antigos navegadores Mozilla, e para nossos antigos navegadores Mozilla navegadores Portanto, é um método CSS simples. Mas o problema é que, se precisarmos usar propriedades similares dez vezes, o que acontecerá? Em seguida, precisamos digitar 30 linhas de código. Para resolver esse problema, o sus introduz misturas. As misturas funcionam basicamente como funções. Se você tinha conhecimento de JavaScript, então você já está familiarizado com as funções. Deixe-me esclarecer esse conceito. Eu vou te mostrar um exemplo. Se você quiser criar mixagem no SAS, primeiro você precisa digitar add mixins e, em seguida, usar o nome mix Você pode usar qualquer nome. No nosso caso, raio BD Só precisa se lembrar que não forneça nenhum espaço nesse nome e, em seguida, você precisa fazer corridas redondas que é totalmente opcional. Se você quiser usar qualquer parâmetro, precisará passar o nome da variável. Como você pode ver, no nosso caso, valor, então precisamos usar essas três propriedades dentro dessa mistura. Além disso, você pode passar o parâmetro com essa propriedade. Dessa forma, podemos criar nossa função de mixagem. Agora, a questão é como podemos usar essa função de mixagem em nosso código CSS? Deixe-me te mostrar. Para isso, vou usar a classe um. Se eu quiser usar essa mistura, precisamos digitar a taxa include e, em seguida, nosso nome de mixagem, raio de borda Dentro do parêntese, precisamos passar o valor do raio da borda como Quando chamo essa função de mistura, precisamos passar um valor como parâmetro e, em seguida, podemos usar esse parâmetro como um valor, valor para três propriedades diferentes. Sem perder seu tempo, vamos começar a prática e tentar entender como podemos usar os mixins Como você pode ver, lado a lado, abro meu Visual Studio Corretor e meu navegador e já crio um novo documento DML E aqui você pode ver no meu navegador que já criamos três div diferentes para este exemplo e também definimos três IDs diferentes para essas três div Para nossa primeira tentativa, definimos primeiro. Para o segundo, definimos o segundo e, para o último, se definirmos o terceiro, e também vinculo nosso arquivo CSS a este documento. Então, vamos entrar no arquivo CS e tentar explorar como a mixagem funciona. No começo, quero definir ideias de fronteira para todos esses três D. Para isso, vou usar o método de mistura. Vamos criar uma mistura. Adicione a taxa de mistura. Depois de misturar Qard, precisamos usar o nome da mixagem e nosso nome de mixagem é BD radius E então precisamos usar parênteses para nossos parâmetros. É muito semelhante à função JavaScript. Então, dentro do Kaliss, vou definir nossa primeira propriedade e nosso primeiro nome de propriedade é dash web keith Por enquanto, vou definir o raio da barra por pixel e duplicar essa linha para digitar Primeiro, eu uso o prefixo para nosso antigo navegador Crone e depois vou usar o prefixo para o navegador Mozilla, então vou E, finalmente, vou usar o raio exato da borda da propriedade Agora nossa mistura está pronta para uso. Lembre-se de que não usamos nenhum parâmetro nessa função de mixagem porque, por enquanto, não quero passar nenhum valor como parâmetro. Primeiro, vou usar essa função de mixagem em nosso primeiro toque. Para isso, primeiro, precisamos digitar Incluir palavra-chave na taxa, incluir. Depois da palavra-chave Include, precisamos digitar o nome da mixagem, e nosso nome de mixagem é VD radius Em seguida, parênteses e subagin para finalizar esta linha. Lembre-se de que, se você quiser chamar essa função de combinação, sempre precisará usar a palavra-chave add the red include. Agora, se eu definir esse arquivo e recarregar meu navegador, você poderá ver o resultado Você pode ver o raio da fronteira em nosso primeiro salto. E agora vou chamar a mesma função de mixagem em nossa segunda e terceira profundidade. Se eu definir esse arquivo e reescrever meu navegador, você poderá ver o mesmo resultado, todas essas três profundezas Agora eu quero três rádios de borda diferentes para essas três profundezas e agora quero três rádios de borda diferentes para essas Suponha que, para nosso primeiro af, eu queira um raio de borda de cinco pixels Para nosso segundo surdo, quero um raio boer de dez pixels e, para nosso terceiro, quero um raio de borda de 15 pixels Nesse caso, precisamos usar o parâmetro em nossa função de mixagem. Precisamos definir um nome de variável como parâmetro. Para isso, precisamos usar cifrão, dólar e o nome da nossa variável é valor. Em seguida, copiarei esse valor e o usarei como um valor de propriedade. Algo parecido. Agora precisamos passar o valor quando chamamos a função de mixagem. Pela primeira vez, vou dizer cinco pixels. Da mesma forma, para nosso segundo DVD, quero usar um raio de boer de dez pixels, E para nosso último DVD, quero usar um raio de borda de 15 pixels. Se eu definir esse arquivo e recarregar meu navegador, você poderá ver o resultado Então, como você pode ver, configuramos com sucesso três rádios de fronteira diferentes para essas três ações Este é o caso de uso da função de mixagem no SAS. Espero que agora esteja claro para você. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo estúdio 8. Tutorial de Sass Extend: Olá, pessoal. É bom ver você de volta. Este é outro tutorial relacionado ao SAS. E neste tutorial, você aprenderá um recurso muito útil, que é a extensão. Suponha que temos uma classe chamada classe um e, como você pode ver, usamos quatro propriedades nessa classe: cor, tamanho da fonte, preenchimento e altura da linha Com isso, temos outra classe, e o nome da nossa classe é classe dois. Como você pode ver, em nossa classe um, usamos a cor vermelha, e na nossa classe dois, usamos a cor laranja. Aqui você pode ver, sem a propriedade de cor, todas as propriedades e seus valores são iguais. tamanho da fonte, o preenchimento e o fiapo. Tudo é o mesmo. Agora, suponha que temos outra classe, classe três. Da mesma forma, sem cor, todas as propriedades são iguais, seu tamanho de fonte, seu preenchimento e sua altura da linha Por isso, repetimos sua proberidade e seu valor ao tempo. Eu quero dizer que precisamos digitar seis linhas extras para isso. Então, para lidar com esse tipo de situação, CS introduziu um novo método, que existe. Por que precisamos trabalhar com o arquivo CS primeiro Precisamos criar mais um do jeito que está. Mas quando criamos nossa classe dois, primeiro precisamos substituir a propriedade de cor porque não quero repetir essa cor vermelha para esse DV É por isso que eu exibo essa cor. Em seguida, você precisa usar a palavra-chave extend, na extensão vermelha, e eu quero estender essa classe com a propriedade class one. É por isso que eu digito classe um. Você pode estender com o ID da classe, o que quiser. Da mesma forma, para nossa terceira aula, precisamos apenas substituir a cor verde e, em seguida seguir o processo semelhante Adicione a extensão vermelha ou a classe um. Isso significa que eu quero usar a propriedade de classe um na classe três. Então, sem perder seu tempo, vamos começar a prática e tentar entender como podemos usar o método extend Como você pode ver, lado a lado, abro meu criador do Visual Studio e meu navegador usando a extensão de servidor, e também abro nosso aplicativo Koala Como você pode ver, temos que distinguir três profundidades diferentes com suas cores de fundo e tamanhos diferentes. Para esses três Deep, usamos três IDs diferentes, primeiro, segundo e terceiro. Este é o nosso arquivo CSS, estilo dot CSS. Se eu mostrar meu arquivo CSS, aqui você pode ver , em nossa primeira queda, nossa cor de fundo é cinza e com esses 300 pixels Da mesma forma, para nossa segunda queda, usamos fundo colorido de laranja e com 400 pixels E para nosso terceiro mergulho, usamos cor de fundo vermelha e com 600 pixels. Sem essas duas propriedades, todas as propriedades e suas variações são iguais. Você pode notá-lo preenchendo 15 pixels, borda, raio de dez pixels, família de fontes, antena, tamanho da fonte 20 Se seguirmos esse método regular , precisaremos digitar oito linhas extras. Então, para resolver esse tipo de problema, o SAS introduz extend. Vamos voltar ao arquivo CS. Não vamos mudar nada em nosso primeiro if, mas em nosso segundo Dave, vou usar o método extend Deixe-me te mostrar. Primeiro, vou excluir essas quatro linhas, o raio da borda de preenchimento, a família e os lados da fonte Em seguida, vou usar a palavra-chave, na extensão at. E agora eu quero estender esse segundo ID com o primeiro ID. Aqui, precisamos digitar has tag primeiro. Em seguida, ponto-e-vírgula para finalizar esta linha. Se eu definir esse arquivo, aqui você pode ver que não há alterações. Funcionou perfeitamente. Em seguida, vou seguir esse processo semelhante para nossa terceira profundidade. Vou remover as propriedades, e vou estender no vermelho, estender e quero estender nosso terceiro e com nosso primeiro D tem tag primeiro. Em seguida, semicron para terminar esta linha. Se eu definir esse arquivo, você verá não há alterações em nosso navegador. Portanto, estendemos com sucesso nosso primeiro ID. Mas se eu mostrar meu arquivo CSS, deixe-me mostrar como você pode ver que ele cria uma combinação de seletor de ID, primeiro, segundo e terceiro, e você também pode ver dois IDs diferentes, segundo e terceiro Ele é usado apenas para sobrescrever cor de fundo e a profundidade com 400 pixels, 600 pixels, fundo vermelho e fundo laranja Como você pode ver, é muito útil. Se você notar, pode ver que é muito parecido com as misturas, mas há uma diferença entre mixagens e extensões. Qual é a diferença? A primeira diferença é que podemos passar um valor como parâmetro em mixins, mas não podemos passar o valor como parâmetro em extensão A segunda diferença é que podemos usar o seletor combinado em extensão Mas dentro dos mixins, não podemos usar o seletor combinado, e agora vou mostrar outro método, como podemos usar extend Então você já conhece o processo, como podemos usar a extensão. Primeiro, precisamos criar uma classe e, em seguida, usando essa classe, podemos estender essa classe com outra classe e você conhece o processo. Suponha que agora você decida que não quer mostrar a classe um em seu arquivo CSS, mas quer usar a propriedade dela na classe dois e na classe três. Nesse caso, você precisa usar o sinal de porcentagem antes do nome da classe. Agora, a classe 1 é reutilizável, semelhante às misturas Chamamos isso de suporte BathOdPlace. Agora, o espaço reservado, não será refletido em seu arquivo CSS Se você quiser estender sua propriedade com esse espaço reservado, precisará usar, na extensão auxiliar, o sinal de porcentagem e o nome da classe Você só precisa se lembrar do espaço reservado e ampliar o trabalho em conjunto Então, deixe-me mostrar a demonstração real. Mais uma vez, estou de volta ao meu coordenador de estúdio visual. Então, primeiro, vou criar um espaço reservado, então vou remover essa hastag e depois vou Agora transformamos nosso primeiro ID em um espaço reservado, e vou usar esse espaço reservado em nossa segunda etapa E se você quiser usar o espaço reservado com extensão, precisará usar percentisina Agora, nosso segundo div se estende com esse espaço reservado. Além disso, quero estender nosso terceiro mergulho com esse espaço reservado Vou usar porcentagens aqui. Eu não configuro esse arquivo. Se eu definir esse arquivo primeiro, ele destruirá essas propriedades profundas porque transformamos nosso primeiro ID em um espaço reservado Como eu disse anteriormente, nosso espaço reservado não será refletido em nosso arquivo CSS Se eu definir esse arquivo, você poderá ver o resultado. Primeiro, ele destrói nossa primeira profundidade, mas manteve a propriedade anterior para o segundo e o terceiro mergulho Se eu mostrar meu arquivo CSS, aqui você pode ver o resultado. Aqui você pode ver que existem aqueles nomes selecionados IDF. Você pode ver apenas dois seletores, ID segundo e ID terceiro Primeiro, ele cria uma combinação usando o segundo ID e o terceiro ID e, em seguida, cria o segundo seletor de ID e o terceiro seletor de ID para substituir a cor e a largura do plano de fundo Usando o espaço reservado, podemos criar um código reutilizável e usá-lo várias vezes Espero que agora esteja claro para você o que é extensão e espaço reservado No próximo tutorial, aprenderemos os operadores do SAS. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 9. Tutorial de operadores de Sass: Olá, pessoal. É bom ver você de volta. Este é outro tutorial relacionado ao CS e, neste tutorial, aprenderemos os operadores do CS. Aqui você pode ver que temos um total de cinco operadores diferentes. Nosso primeiro nome de operador é operador de igualdade. Em seguida, vêm o operador relacional, numérico, o operador de string e o operador wllian E neste tutorial, aprenderemos operador de igualdade, operador relacional e operador wollan Mas, a princípio, vamos tentar entender o que são os operadores do meningum. Primeiro, vou falar sobre igualdade e operador relacional Como você pode ver em nosso operador de igualdade, temos dois tipos de operador, duplamente igual ao operador e não igual ao operador. Em igual ao operador, precisamos usar seno igual duas vezes Mas se não for igual ao operador, primeiro, precisamos usar a explicação seno, depois precisamos usar seno igual Significa que não é igual. Usando igual ao operador, podemos comparar valores. Suponha que nosso primeiro valor seja cinco, cinco igual a cinco, então ele retornará verdadeiro porque os dois valores são iguais. Da mesma forma, se eu usar não igual a seno, ele também retornará um valor verdadeiro ou falso acordo com a comparação Esse é o uso do operador de igualdade. Vamos aprender mais sobre isso em nossos treinos. Por outro lado, temos operadores relacionais. E vem com quatro operadores diferentes. Menor que operador, maior que operador, menor que igual ao operador, maior que igual ao operador. Todo esse uso do operador de igualdade e do operador relacional com a condição IP no SAS é chamado de função I. Em nossos próximos tutoriais, aprenderemos sobre isso Neste tutorial, aprenderemos como podemos usar condições com isso? Sem perder seu tempo, vamos começar pela prática. Aqui você pode ver, eu já coloquei minha pasta CSS neste compilador SS Quala, e você também pode ver, eu abro nosso arquivo CS e nosso arquivo CSS lado a lado, e aqui você pode ver um seletor de classes, classe um Agora vou começar essa prática com operador de igualdade. Deixe-me te mostrar. Primeiro, vou usar uma propriedade CSS, que é preenchimento. Preenchimento, dez pixels iguais a dez pixels. Aqui vou comparar dois valores. Se eu definir esse arquivo, aqui você pode ver em nosso arquivo CSS que é preenchimento escrito, verdadeiro Aqui, combinamos dez pixels iguais a dez pixels, quando eu defino esse arquivo, está escrito como verdadeiro. Sim. A condição é verdadeira, mas não usamos esse operador dessa forma. Se você está familiarizado com JavaScript, então você sabe disso. Se você conhece JavaScript, então você já está familiarizado com a condição p, e vamos aprender sobre isso em nossos próximos tutoriais Aqui, eu apenas digo como podemos usar operadores de comparação. Aqui você pode ver que comparamos dez pixels com dez pixels, mas se eu alterar o valor de dez pixels para dez EM se eu definir esse arquivo, agora você pode ver que o preenchimento está escrito dobrando porque o valor de dez pixels e o valor de 10:00 AM não são seguros. Da mesma forma, se eu comparar com dez pixels com 15 pixels, deixe-me mostrar que vou definir esse arquivo, ele também está escrito como falso porque 15 pixels é maior que dez pixels. Mas se eu usar o operador not equal to, deixe-me mostrar e depois definir esse arquivo. Nesse caso, está escrito como verdadeiro porque nossa condição é verdadeira. Dez pixels não são iguais a 15 pixels. Como você pode ver, aqui comparamos nosso valor com o valor numérico, mas também podemos usar o valor da string. Deixe-me te mostrar. Aqui vou digitar o nome da fonte AL que vou comparar , então vou usar igual a seno com aérea Se eu definir esse arquivo, aqui você pode ver que está escrito como verdadeiro porque ambas as fontes estão à venda. Mas se eu usar a fonte Roboto, deixe-me mostrar que eu configurei esse arquivo, agora ele está escrito como falso Não apenas o valor da string, também podemos comparar o valor complexo. Deixe-me te mostrar. Dentro das ressondas redondas, vou digitar quatro pixels, seis pixels e dois pixels, e vou copiar esse slide e colá-lo aqui Se eu definir esse arquivo, como você pode ver, ele será escrito como verdadeiro porque ambos os valores são verdadeiros. Mas se eu alterar um valor, sete pixels, e depois definir esse arquivo, agora você pode ver que está escrito como falso. Mas se eu usar não é igual a seno , então defino esse arquivo Agora está escrito dois porque ambas as condições não são semelhantes. É por isso que está escrito dois. Esses são nossos operadores de igualdade, e agora vou mostrar o que são operadores relacionais Basicamente, os operadores relacionais trabalham com valores numéricos. Não podemos usá-lo com valor de string. Para isso, deixe-me mostrar um exemplo. Vou remover este e aqui vou digitar 50 maior que quatro. Eu quero dizer que o número 50 é maior que quatro? Se eu definir esse arquivo, como você pode ver, serão escritos dois. Mas se eu passar 60 e depois definir esse arquivo. Como você pode ver, está escrito fw Porque em nossa condição anterior, 50 é maior que quatro, mas nessa condição, 50 não é maior que 60 É por isso que nossa condição condiciona formulários escritos. Além disso, podemos usar esse valor com a unidade. Deixe-me mostrar 50 pixels e 60 pixels. Se eu definir esse arquivo, você pode ver que está escrito fg. Mas se eu passar 40 semanas aqui e depois definir esse arquivo, agora você pode ver que está escrito como verdadeiro Além disso, você pode comparar com unidades diferentes. Deixe-me te mostrar. Suponha que eu queira comparar com 1.000 milissegundos maior do que igual a 1 segundo Se eu definir esse arquivo, aqui você pode ver que está escrito como verdadeiro. Como você pode ver, sua unidade é diferente, s e, mas seu valor é o mesmo. É por isso que está escrito como verdade, aqui eu uso maior que igual ao operador relacional Usando esse operador, podemos comparar se 1.000 s é maior do que um, nesse caso, retornará verdadeiro, caso contrário, se 1.000 s igual a um, nesse caso, retornará verdadeiro. Mas se eu passar dois segundos aqui e depois definir esse arquivo, como você pode ver, é o formulário de retorno. Porque 1002º não é maior que dois segundos. Aqui você pode ver que podemos comparar dois valores unitários diferentes com a mesma categoria. Podemos comparar o segundo com nosso minuto, microssegundo, etc Mas se eu tentar comparar s com pixel, deixe-me mostrar 1.000 ms a mais do que dois pixels. Então, se eu definir esse arquivo, agora você pode ver um erro escrito porque a categoria deles é diferente, não podemos comparar o tempo com a área. É por isso que precisamos usar a mesma categoria. Agora vamos falar sobre os operadores Bullion e como podemos usá-los No SAS, temos que diferenciar três tipos de operadores de Bollier ou não, e o resultado é sempre verdadeiro ou falso Podemos usar todo o operador booleano com várias condições Quero dizer que, se você quiser verificar mais de uma condição, poderá usar esses operadores. Usamos um operador se ambas as condições forem verdadeiras, então escrevemos verdadeiro, caso contrário, é escrito como falso. Além de duas condições, você pode adicionar mais condições com esse operador. Deixe-me mostrar o exemplo. Suponha que essa seja a condição um e eu use um operador, e essa seja a condição dois. Em nossa condição um, cinco pixels iguais a cinco pixels. Quero dizer, a condição é verdadeira e, em nossa segunda condição, fonte aérea é igual à forma de área Aqui comparamos com o valor numérico e aqui comparamos com o valor da string Como você pode ver, ambas as condições são verdadeiras. Nesse caso, ele retornará ao resultado. E se alguma condição não retornar verdadeira, nesse caso, ela retornará falsa. A seguir, vamos falar sobre nosso operador Bullion. Se uma das condições for verdadeira, então está escrita como verdadeira. Caso contrário, está escrito como falso. Suponha que tenhamos que condicionar a condição um e a condição dois. Em nossa condição um, comparo cinco pixels com 15 pixels e em nossa condição dois, comparamos a fonte da área com a área quatro. Nesse caso, você sabe que uma das condições é verdadeira, fonte aérea igual à fonte aérea Como uma das condições é verdadeira, por isso que está escrita como verdadeira. E se ambas as condições escritas falharem, nesse caso, ela retornará uma falha, e nosso último operador não será o operador. É sempre escrito o valor oposto. Se a resposta for verdadeira, ela retornará uma resposta falsa e, se a resposta for falsa, ela retornará uma resposta verdadeira. Basicamente, está escrito na resposta oposta. Então, sem perder tempo, vamos estudar de forma prática e ver como funciona Então, como você pode ver, mais uma vez, estou de volta ao meu editor de código do Visual Studio. E agora vou usar uma condição com o operador Boulan No início, vou usar essa condição 1.000 milisecad melhor do que igual a Ismein retornará o resultado verdadeiro, como você pode ver, é o retorno Com isso, vou usar o operador final e cinco pixels, igual a cinco pixels. Se eu definir esse arquivo, como você pode ver, ele será escrito como verdadeiro porque ambas as condições são verdadeiras. Mas se eu falsificar uma condição , quero alterar cinco pixels iguais a seis pixels e , em seguida, definir esse arquivo. Agora Seton cai. Agora, ambas as condições não são verdadeiras, nossa primeira condição é verdadeira, mas nossa segunda condição falha. É por isso que a gravação falha porque usamos o operador. Mas se eu usasse nosso operador, o que aconteceria? Agora vou usar nosso operador. Ou se eu definir esse arquivo, ele retornará dois porque, como você sabe, se uma das condições for verdadeira, ele retornará duas. E se ambas as condições falharem, deixe-me te mostrar. Vou mudar dois segundos e depois definir esse arquivo, como você pode ver, a gravação falha. E se ambas as condições forem verdadeiras, em todos os operadores, nesse caso, mais uma vez, lute contra o pixel e depois defina esse arquivo, como você pode ver, está escrito como verdadeiro. Então, em nosso operador, tanto a condição quanto uma das condições é verdadeira, nesse caso, retornará verdadeira. E agora vou mostrar o último operador lean que não é operável e como podemos usá-lo Então, primeiro, vou duplicar esse slide e vou comentar o anterior Então, aqui eu vou usar o operador not. Quero remover essa condição e, primeiro, vou digitar não. Como você sabe, nem sempre o operador escreveu o resultado oposto. Então, cinco pixels iguais a cinco pixels. Como você sabe, a condição é verdadeira. Se eu definir esse arquivo, aqui você pode ver que são formas escritas porque está escrito sempre o resultado oposto. Mas se a condição falhar e se eu usar o operador não igual ao, cinco pixels não iguais a cinco pixels e definir esse arquivo, agora está escrito verdadeiro. Como a condição falha, é por isso que ela também é devolvida. Sempre retorna o resultado oposto. Espero que agora esteja claro para você o que são operadores de Bollan. Então, obrigado por assistir a este vídeo, fique atento aos nossos próximos tutoriais 10. Tutorial de operadores de Sass II: Olá, pessoal. É bom ver você de volta. Este é outro tutorial, relacionado ao operador CS. E neste tutorial, aprenderemos o numérico CS e o operador de string SS Como eu disse, no meu tutorial anterior, temos cinco operadores diferentes no SAS: operador de igualdade, operador relacional, operador numérico, operador string e operador Wulian Já abordamos o operador de igualdade, operador relacional e um operador em nosso tutorial anterior Neste tutorial, abordaremos o numérico e o operador de string . Vamos começar. Primeiro, vou falar sobre o operador de string. string significa operador de concatenação e definimos esse operador usando Usamos esse operador para adicionar uma string com outra string. Usando esse operador, podemos unir duas ruas diferentes. Além disso, podemos unir o valor numérico com a string el. Além disso, usando esse operador, podemos unir valor numérico com string viel Se você está familiarizado com JavaScript, você já sabe disso. Deixe-me mostrar um exemplo. Aqui você pode ver 50 mais px. Aqui, queremos unir uma corda hel com uma onda numérica. Como resultado, ele retornou 50 pixels. Por outro lado, temos operadores numéricos, adição, subconstrução, multiplicação, divisão, módulo, caso contrário, chamamos isso Usamos esse operador para cálculos aritméticos. Vamos começar a prática e tentar entender como podemos usá-la. Como você pode ver, eu já abro meu software de compilador CS Koala. Você também pode ver no meu coretor do Visual Studio lado a lado, eu abro meu arquivo CS e meu arquivo CSS Então, primeiro, vou mostrar como podemos usar operadores de string. Para isso, vou criar duas variáveis. Dólar, dois pontos, e eu vou pegar 50. Então eu vou dublar esta linha, e esta é a segunda. Aqui eu vou pegar cinco. Essa é a variável um e essa é a variável dois. Agora vou estilizá-lo como classe ponto, classe 1. Então, nos fígados, vou pegar uma propriedade do NCSS Suponha margem para Valor, vou usar a variável um, um. Um. Em seguida, vou usar o seno de concatenação Depois de concatenação seno, vou passar px. Aqui você pode ver nosso valor numérico escrito em V one, e eu quero concatenar Var one com Se eu definir esse arquivo, como você pode ver, ele está escrito Margin 50 pixels. Então, aqui juntamos dois tipos diferentes de valor usando o operador string e chamamos esse método de concatenação Com isso, vou mostrar como podemos usar operadores numéricos Então, com ela eu quero adicionar $2,02. Até dois, mais uma vez, vou usar seno concatenado Agora, o sinal 1-2, não é um sinal de concatenação Isso é adição de seno, mas esse sinal funcionará como um sinal de concatenação Então, se eu definir esse arquivo, aqui você pode ver que nossa margem é de 55 pixels. Então, como você sabe, usando o operador de adição, podemos adicionar dois valores, mas agora vou usar o operador de substrição. Menos. Se eu definir esse arquivo, agora você pode ver que nossa nova margem é de 45 pixels. É um raio de cinco pixels de 50 pixels. É por isso que está escrito em 45 pixels. Esse é o caso de uso do operador de subconstrução e, dessa forma, podemos usá-lo Da mesma forma, podemos usar o lado da multiplicação. Se eu definir esse arquivo, você pode ver o resultado, 250 pixels. Se eu usar a divisão seno e depois definir esse arquivo, agora você pode ver que a resposta é dez pixels e agora vou usar nosso operador de luxúria, que é módulo Deixe-me te mostrar como. Se usarmos o sinal de módulo , ele lhe dará um lembrete até a divisão Se eu definir esse arquivo, como você pode ver, há nenhum lembrete, é por isso que ele retorna zero pixel Mas se eu alterar o valor de Var one, 54 e depois definir esse arquivo, agora você pode ver que o lembrete é quatro Portanto, esse é o caso de uso do operador de módulo. Então, basicamente, não usamos esse operador numérico dessa forma Nós o usamos quando criamos designs complexos. Deixe-me te mostrar. Então, para este exemplo, vou usar uma nova propriedade, que é o tamanho da fonte. Tamanho da fonte, e eu vou usar Var one. Contamine com pixels. Se eu definir esse arquivo, você poderá ver o resultado. O tamanho da fonte de classe um é 54 pixels. Mas para nossa tag de cabeçalho um, quero o tamanho da fonte duas vezes e depois a classe um. Deixe-me mostrar o tamanho da fonte. Um dólar, multiplique por dois pixels concatenados concatenados Se eu definir esse estilo, você poderá ver o resultado. Agora, o tamanho da fonte do nosso título um é 108 pixels porque eu quero mostrar o tamanho da fonte de duas vezes , depois a classe um e depois a classe um. É por isso que eu uso o operador de multiplicação. Em nossa classe um, está escrito 54 pixels e em nosso cabeçalho , em 108 pixels. Dessa forma, usamos variáveis e operadores numéricos juntos, maioria das vezes os usamos com condição p, caso contrário, loops, e aprenderemos sobre isso em nosso próximo tutorial, então é isso para este No próximo tutorial, aprenderemos um novo conceito relacionado ao fluxo, que é interpolação Fique ligado no nosso próximo tutorial. Obrigado por assistir a este vídeo. 11. Tutorial de interpolação de Sass: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao SAS e, neste tutorial, aprenderemos interpolação, interpolação SAS Em nosso tutorial anterior, aprendemos operadores de string. Com isso, aprendemos operadores de concatenação de strings. Usando a concatenação de strings, podemos adicionar string com valor numérico, conforme você pode ver o resultado. Aqui você pode ver isso. Como você pode ver aqui, 50 concatam com pixels e, como resultado, retornaram 50 Mas o problema é que não podemos usar seno concatado nas propriedades Só podemos usá-lo em valores CSS. Além disso, não podemos usar o seno de concatenação no seletor CSS. Deixe-me mostrar um exemplo. Aqui você pode ver que eu pego a margem do nome da propriedade, concatenação do hífen da margem seno e chamo a posição do nome da variável Você pode colocar qualquer valor aqui, lab, top, right, eu quero dizer, suponha que a margem superior a 20 pixels, mas não podemos usar concatenação seno Deixe-me mostrar outro exemplo com seletor. Suponha que exista uma classe chamada image dot image image hífen concatenate com imagem, mas não podemos usar concatenação seno Só podemos usar a concatenação em nossas válvulas. Mas, para esse tipo de contágio o SAS introduz a interpolação Se você quiser se conectar com propriedades, caso contrário classes, nesse caso, precisamos usar o método de interpolação e precisamos usar esse sinal, Dentro da classe, precisamos colocar a linha variável e, em seguida, podemos congenar nossas Deixe-me mostrar o exemplo. Se você quiser congenar essas propriedades e a classe, nesse caso, precisamos digitar assim Mesclando o hífen hastag dentro da calira, precisamos passar precisamos Isso é para propriedade. Da mesma forma, para uma classe, precisamos seguir o mesmo método. Depois da hashtag, precisamos usar Calirasis e, dentro da calirasis, precisamos passar o Então, sem perder seu tempo, vamos começar a prática e ver como podemos usá-la Como você pode ver, eu já abro meu aplicativo Kuala e, no meu editor de código do Visual Studio, lado a lado, abro o arquivo CS e nosso arquivo CSS Vamos começar a prática e ver como podemos usar a interpolação Em primeiro lugar, vou declarar uma mixagem. Na mixagem d. E nosso nome de mixagem é margin. E dentro desse parêntese, eu quero passar dois parâmetros ou a primeira variável m é posição, e nossa segunda variável m é unidade Também vou ligar para a mixagem em nossa classe. Deixe-me te mostrar. Vou selecionar uma classe dot class one. Dentro dos aliases, vou incluir a mixagem. Adicione o vermelho, inclua e nosso nome de mixagem é margin. No começo, vou passar o valor da posição. Nossa posição é esquerda. Depois da posição, precisamos passar a unidade aqui, eu vou passar 20 e depois ponto e vírgula para terminar esta linha Agora, dentro dessa mistura, vou pegar nossa propriedade CSS, que é a margem. Margem, hífen, aqui vou usar o método de interpólio Hastag Carissa. Agora eu quero concatear a margem com outra variável, e aqui vou passar a variável de posição, posição Como você pode ver, em nossa variável de posição, passamos o valor à esquerda e depois de coluna por valor, vou usar a variável unitária. Unidade de dólar. Eu quero concatenar com pixel no PC Em seguida, semicone para finalizar esta linha. Se eu definir esse arquivo, como você pode ver no meu arquivo CSS, ele imprime uma margem de 20 pixels. Agora podemos mudar a posição apenas digitando o nome. Suponha que eu passe por cima e aqui eu passe por 40. Se eu definir esse arquivo, agora você pode ver a margem superior de 40 pixels. Aqui você pode ver, usamos uma mistura chamada margem e, dentro dessa mistura, usamos o método de interpolação. E passamos o valor dessa mistura e contenamos com a propriedade CSS, e também contenamos a string com a unidade. Este é o USKsot é a interpolação uskaso . Neste exemplo, usamos interpolion com propriedade CSS, e agora vou usar interpolion Para isso, vou criar outra mixagem. Na mistura vermelha, nosso nome de mixagem é set image, SET IMG Então, dentro do caliass e dentro desse parêntese, eu quero passar um parâmetro, e o nome do nosso parâmetro é Agora, dentro dos aliases, quero congenar nosso seletor, ponto, imagem, traço, tem tag Dentro da lista, vou chamar o nome da imagem. Então, aqui usamos a interpolição para contenar nosso seletor. Então, dentro dos fígados, vou usar uma propriedade CSS, que é a imagem de fundo fundo, imagem e eu vou usar o URL Vu para a imagem de fundo URL dentro do parêntese, dentro dos códigos duplos, para passar a localização do arquivo, e a localização do nosso arquivo é imagem, corte Além disso, aqui podemos usar o método Interpoliion para obter o nome da imagem. Deixe-me te mostrar. Hashtag dentro dos aliases, vou passar a variável, que é Depois do nome da imagem, precisamos passar a extensão da imagem, e nossa extensão é JPG. Agora precisamos chamar essa mixagem e passar o nome da imagem. Para chamar a mixagem para digitar, a tarifa inclui. Em seguida, precisamos passar o nome da mixagem, definir imagem, definir imagem. Também precisamos passar o nome da imagem. Suponha que o nome da nossa imagem seja Cloud. E então ponto e vírgula dois nesta linha. Se eu definir esse arquivo, como você pode ver, primeiro, ele cria um seletor CSS, image Cloud, e depois cria o nome da imagem cloud dot JPG Usando a interpolação, podemos concatenar o seletor CSS e também podemos usá-lo como nome de imagem porque não podemos usar o sinal de adição para concatenar É por isso que o CS introduziu a interpolação CSS. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 12. Tutorial de Funções do Sass: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao SAS. Neste tutorial, aprenderemos as funções do SAS. Se você já está familiarizado com o JavaScript , sabe o que é função. Então, deixe-me mostrar como podemos criar funções no SAS. Para criar uma função no SAS, primeiro você precisa pegar uma palavra-chave e dilatar a função, depois o nome da função Lembre-se de não fornecer nenhum espaço entre o nome. Você pode usar de outra forma sob o sco seno, mas não forneça nenhum espaço Então, dentro dos parênteses, você pode usar um parâmetro, vários parâmetros, caso contrário, nenhum parâmetro Depende de você. Neste exemplo, usei um parâmetro, significa uma variável, e o nome da nossa variável é valor. E então você precisa usar calibrações. Se você se lembra, a função e a mixagem são bem parecidas, mas há uma diferença. Basicamente, a função pode retornar um Val. Ele pode retornar cálculos aritméticos, mas a mistura não Mas as mixagens sempre imprimem o que já foi escrito na mixagem, mas as funções escrevem valores, e podemos usar esse valor em nossos próximos códigos Suponha que eu crie um nome de classe de um terço e dentro desse seletor, como você pode ver, eu use uma propriedade chamada with chamemos nossa função e passemos um valor 1.200 Então nossa função vai dividir esse valor três e retornar 400 e, em seguida, concatenar o número com pixel em nosso CSS e passar com Deixe-me mostrar um cenário que pode esclarecer suas dúvidas. Suponha que temos um contêiner principal e sua largura seja de 1.200 pixels, e agora eu quero dividir essa largura em três partes Nesse caso, cada célula ocupa 400 pixels. Para isso, podemos criar uma função, que pode dividir nosso contêiner em três por. Se alterarmos a largura desse continuador, ele dividirá automaticamente nosso continuador em três por Da mesma forma, se quisermos dividir esse continuador em duas partes, nesse caso, precisamos criar uma função que possa dividir nosso valor em duas partes Suponha que, no futuro, você queira alterar a cor externa. Algo de 1.500 pixels. Nesse caso, nossa função vai desviar o continuu com o mesmo tamanho, 500 pixels, 500 pixels e 500 Esse é o caso de uso da função, então não precisamos digitar a largura das células manualmente. Vamos calculá-lo usando a ajuda da função. Então, vamos começar a prática e ver como podemos usá-la. Mais uma vez, estou de volta ao meu coordenador de estúdio visual. Lado a lado, abro o arquivo Ss de ponto de estilo e o arquivo CSS de estilo. Primeiro, vou definir a largura do contêiner. Para isso, vou usar uma variável. E nossa variável nm é a largura do CN, dois pontos e para a largura do nosso continuador, vou pegar 1.000 Por enquanto, vou usar qualquer unidade como pixel, M, etc Agora vou criar uma função, que dividirá meu continuari em três partes Então, para criar uma função, vou digitar aderdFunction, e o nome da nossa função é um terço, um terço Em seguida, dentro dos parênteses, o usuário passará um parâmetro Para esse parâmetro, vou usar uma erva daninha de dólar variável. Então, dentro dos aliases, seja qual for o usuário que vai passar, eu quero dividi-lo em três partes Então, para isso, vou usar a palavra-chave return. No retorno vermelho. Em seguida, a largura do dólar dividida por três, porque eu quero dividir igualmente a largura do continuador em três partes, e então vou usar concatenar Isso é para unidade porque, como resultado, eu quero retornar a unidade de pixel. Então, criamos nossa função com sucesso e o nome da função é um terço, e agora eu quero chamar essa função. Para chamar a função, precisamos estilizar uma classe, e o nome da nossa classe é um terço da erva daninha. Então, dentro da resistência do carro, vou chamá-la de propriedade e nome da nossa propriedade é o quê. O que. Agora vou chamar nossa função, e o nome da nossa função é um terço, um terço. Então, dentro desse parêntese, vou passar essa variável Antes de definir esse arquivo, deixe-me alterar a largura do contêiner. Vou substituir 1.000 por 1.200. Se eu definir esse arquivo, como você pode ver, largura de um terço do nosso contêiner é de 400 pixels. Então, no futuro, se eu alterar a largura do contêiner, 1.200 pixels para 500 pixels e depois definir esse arquivo, aqui você pode ver, ele sempre está escrito como um terço dessa largura do contêiner, que é 500 pixels Esse é o caso de uso da função. Da mesma forma, se você quiser dividir a largura do contêiner em duas partes, nesse caso, precisará criar outra função. Alguns para duplicar essa função, e eu vou mudar o nome da função, e o nome da nossa função é Mas desta vez, precisamos dividir a largura do continuador em duas partes Então, vou dividir com dois. Eu vou criar e também vou criar um seletor para isso. Deixe-me te mostrar. Nosso nome positivo selecionado é largura do cubo, Largura do cubo. Dentro das aliras, vou chamar a largura da separação Como valor, vou chamar nossa nova função e nosso novo nome de função é hub. E dentro do parêntese, aqui vou passar nossa largura do contêiner, largura variável do contêiner largura variável do contêiner Além disso, vou alterar a largura do contêiner, 1.500 pixels para 1.200 Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver nossa função hub dividir nosso contêiner em duas partes e retornar 600 pixels para uma parte, e nossa função de um terço dividir nosso contêiner em três e cada parte em 400 pixels. Agora está claro para você como podemos usar funções para cálculos aritméticos Então, no próximo tutorial, aprenderemos as funções do véu SAS Então, obrigado por assistir a este vídeo, fique ligado em nossas próximas tribos 13. Tutorial de funções de número de Sass: Olá, pessoal. É bom ver você de volta. Este é outro tutorial relacionado ao CS e, neste tutorial, aprenderemos as funções numéricas SAS Aqui você pode ver que os Cs vêm com total de seis em função val, função de números, função de string, função de cor, última função, função seletora e a última é intropeção Neste tutorial, aprenderemos somente funções numéricas. Vamos ver quantas funções numéricas temos no CS. Como você pode ver, temos um total de 11 funções numéricas no CS e abordaremos todas elas neste tutorial. Vamos começar a prática com a função Avis. Fisicamente, a função de Avis é escrita por vontade absoluta. Vamos começar a prática. Como você pode ver, eu já abro editor de código do meu estúdio de usuário e, lado a lado, abro a pilha SS estiloide e Primeiro, vou criar uma classe dot class one. Então, dentro das calices, primeiro, vou pegar ACSSPperty e vou Estofamento. Nossa primeira função é Avis significa função absoluta. Linha falsa tipo abs. Essa função sempre escreveu valor absoluto. Se eu passar um valor negativo, deixe-me mostrar -14 pixels Se eu definir esse arquivo, como você pode ver, ele é escrito como absoluto, 14 pixels. Ele removeu o valor negativo e escreveu 14 pixels. Se eu remover o sinal de menos e definir esse arquivo, como você pode ver, ele sempre será escrito como valor absoluto Agora, vamos falar sobre nossa próxima função, que é L. Mas antes, vou duplicar essa linha e comentar a anterior Aqui eu vou usar a função celular C CEL. Então, dentro dos versos ao, vou passar um valor flutuante. Deixe-me te mostrar. 5.3. E mesmo se eu definir esse arquivo, deixe-me te mostrar. Se eu definir esse arquivo, como você pode ver, está escrito preenchendo seis Se eu usar a função de célula toda vez que ela retornar acima do valor. Se eu usar 5.9 e definir esse arquivo, ele também retornará seis Mas se eu usar 5.1 e definir esse arquivo, ele também retornará seis. É sempre escrito acima do valor. Mas se eu passar por 5.0 e depois definir esse arquivo, agora ele gravará apenas cinco. Se eu passar o valor flutuante na função da célula, ele sempre será escrito acima do valor Da mesma forma, temos função oposta. Para isso, vou duplicar esta linha e comentar a anterior E aqui vou digitar a função de piso FL W R. Então, dentro da redonda vou passar quatro e sete Essa função sempre é escrita abaixo do valor. Se eu definir esse arquivo, como você pode ver, ele escreverá apenas quatro. Sem zero, qualquer valor que usarmos depois do ponto retornará apenas quatro. Se eu passar nove aqui , também está escrito quatro. Vamos pular para nossa próxima função, que é a função redonda para implorar essa linha e comentar a anterior E aqui vou digitar a função redonda. Linha: se eu definir esse arquivo, como você pode ver , está escrito cinco. Esta função é uma combinação de função de vedação e função de flutuação Depois de Dhimil, se o valor for maior que quatro, ele sempre será escrito como um Mas um Djimil, se o valor for menor que cinco, ele retornará um valor incrível. Deixe-me mostrar se eu passar, 4.4 aqui, e depois definir esse arquivo, como você pode ver, agora está escrito apenas quatro. Mas se eu passar por 415 e depois definir esse arquivo, agora você pode ver que está escrito cinco Este é o caso de uso da função redonda. Espero que agora esteja claro para você como a área de vendas e as funções de execução funcionam. Nossa próxima função é a função máxima. Eu quero que você comece esta linha e cunhe a anterior. E aqui vou chamar a função max. Essa função sempre retorna o valor máximo. Suponha que, se tivermos três valores, deixe-me mostrar um pixel, três pixels e cinco pixels. Se eu dissesse esse arquivo, como você pode ver, está escrito em cinco pixels. É sempre escrito o valor máximo a partir do mínimo. Da mesma forma, temos a função oposta, que é a função min. Toque esta linha e comente a anterior, e aqui vou chamar nossa função Min. Se eu definir esse arquivo, como você pode ver, ele gravará o menor valor dessa lista. É sempre escrito o valor mais baixo. Basicamente, não usamos essa função dessa forma. Quando precisamos trabalhar com cálculos aritméticos complexos, usamos essa função Agora, vamos falar sobre nossa próxima função, que é percentual. Então para começar esta linha e comentar a anterior E aqui vou digitar porcentagens. Essa função sempre retorna o valor percentual. Se eu passar 0,3, eu configuro esse arquivo, como você pode ver, ele está escrito em 30%. Além disso, se eu trabalhar com cálculo aritmético, deixe-me mostrar 200 pixels divididos por 50 pixels Se eu definir esse arquivo, como você pode ver, ele está escrito em 400%. Essa função sempre retorna porcentagem. Nossa próxima função é comparável. Para isso, vou duplicar esta linha e comentar a anterior Aqui vou digitar comparável. Usando essa função, podemos comparar duas unidades. Se as unidades forem combinadas, elas serão escritas, verdadeiras, caso contrário, serão formas escritas Deixe-me mostrar a demonstração. Então, aqui vou passar dois pixels e nosso próximo valor é quatro pixels. Se eu definir esse arquivo, como você pode ver, está escrito como verdadeiro porque suas unidades são iguais, pixel e pixel. Mas se eu passar a unidade EM e depois definir esse arquivo, EM e definir esse arquivo, como você pode ver, agora está escrito fobs Porque a unidade deles é diferente. É por isso que não pudemos compará-lo. Mas se eu passar o valor do centímetro aqui, CM, e se eu passar a unidade MM, e então definir esse arquivo, como você pode ver, agora ele está escrito porque podemos comparar centímetro com milímetro É por isso que está escrito. Vamos falar sobre nossa próxima função, que é aleatória. Vou duplicar esta linha e comentar a anterior Então, vou digitar aleatoriamente. Essa função sempre escreveu um valor aleatório. Se eu definir essa pilha, como você pode ver, ela é escrita com um valor aleatório Se eu definir esse arquivo novamente, você pode ver que ele está escrito com um valor aleatório diferente. Por padrão, a função aleatória escreve o valor 0-1. É por isso que é escrito como valor flutuante. Mas se eu passar um número, algo 12 e depois definir esse arquivo, agora ele escreverá um número de 0 a 12 Pode ser qualquer número de 0 a 12 e, no nosso caso, está escrito dez Se eu definir esse arquivo mais uma vez, agora você pode ver que está escrito um. Vamos falar sobre nossa próxima função, que é unidade. Para isso, vou duplicar esta linha e comentar a anterior E aqui vou digitar a unidade. Para este exemplo, vou passar um número, que é 22. Se eu definir esse arquivo, como você pode ver, ele escreverá apenas os códigos duplos, não o número porque não passamos nenhuma unidade, mas se eu passar o pixel PH e depois definir esse arquivo, como você pode ver, ele é escrito apenas o pixel unitário. A função unitária sempre escreveu a unidade. Da mesma forma, se eu passar centímetro, CM, e depois definir esse arquivo, aqui você pode ver que está escrito em centímetro Agora, vamos falar sobre nossa última função, que é uma unidade menor. Para isso, vou duplicar esta linha e comentar a anterior E aqui vou digitar sem unidade. Basicamente, essa função retornará ao valor, seja verdadeiro ou falso. Basicamente, essa função vai verificar se fornecemos uma unidade com esse valor ou não? Se eu definir esse arquivo, como você pode ver, ele está escrito como falso. Como fornecemos uma unidade, é por isso que está escrito como falso. Mas se eu não fornecer a unidade, eu configuro esse arquivo, como você pode ver, agora está escrito como verdadeiro. Podemos usar essa função com condições de IP. No próximo tutorial, aprenderemos funções relacionadas a strings Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 14. Tutorial de funções de cordas do Sass Part1: Olá, pessoal, é bom ver vocês B. Mais uma vez, estou de volta com um novo tutorial relacionado ao CAS. E neste tutorial, vamos aprender a função de string CS. Aqui você pode ver a lista de funções invais do SAS. Em nossos tutoriais anteriores, aprenderemos sobre a função numérica E neste tutorial, vamos aprender funções de string. Então, vamos ver as funções de string. Como você pode ver, temos um total nove funções de string no SAS. Função Cote para função maiúscula, função índice STR, função para minúscula, função de inserção Star, função de ID exclusiva, função Star len, função uncoat e função de índice STR, função para minúscula, função de inserção Star, função de ID exclusiva, função Star len, função uncoat e função Star slice. Sem perder seu tempo, vamos começar pela prática. Como você pode ver, estou no meu coordenador do Visual Studio e, lado a lado, abro Stylar CS e o arquivo CSS de estilo Então, primeiro, vou criar uma classe, e o nome da nossa classe é classe um. Então, dentro do Surge, vou usar a propriedade CSS, e o nome da nossa propriedade é família de fontes. Família de fontes. Mas aqui eu não vou usar o nome da família da fonte diretamente. Para isso, vou usar uma função de string e nome da nossa função de string é co Quote. Então, em vez do parêntese, vou chamar o nome da família da fonte e nosso nome de família da fonte é Ariel Basicamente, a função de código envolverá essa string com códigos duplos. Se eu definir esse arquivo, aqui você pode ver o resultado. Família de fontes dentro dos códigos duplos al. Da maneira oposta, temos outra função, que é uncode Se eu usar uncode e colocar o nome dessa fonte dentro dos códigos duplos e, em seguida, definir esse arquivo, como você pode ver, ele remove a citação da string Este é o caso de uso da função uncode. Vamos pular para a próxima função, que tem duas letras maiúsculas Aqui vou amarrar duas letras maiúsculas. Caso. Basicamente, essa função vai converter essa string em maiúsculas Se eu definir esse arquivo, como você pode ver, todas as letras estão em maiúsculas Da mesma forma, temos a função oposta, que é duas minúsculas Se eu digitar dois abaixo e definir esse arquivo, como você pode ver, ele converterá nossa letra maiúscula A em uma minúscula. Basicamente, ele converte caracteres maiúsculos em minúsculos. Vamos pular para a próxima função, que é o comprimento da string. Aqui eu quero digitar nossa próxima função, que é St length. Comprimento da estrela. Seja qual for o valor da string que passarmos dentro dessa função de string, ela contará o caractere da string e retornará o tamanho em número. Como você pode ver no mundo aéreo, temos um total de cinco personagens Se eu definir esse arquivo, opa, há um erro. A grafia da lente não está correta, COMPRIMENTO. Se eu definir esse arquivo, você poderá ver o resultado. São três e cinco. Este é o caso de uso da função de comprimento STR. Vamos falar sobre nossa próxima função, que é o índice de string. Vou chamar essa função de índice de cadeia de caracteres. Então, dentro dos parênteses, nessa função como primeiro parâmetro, precisamos passar essa string Eu já copio uma string e vou colá-la aqui. É um idiota de La Mpsum. Mas, primeiro, vamos começar com a quebra de palavras. Usando essa função, podemos pesquisar um caractere ou palavra dessa string e seu número de índice escrito. Como você pode ver, como primeiro parâmetro, passamos essa string. Então, em nosso segundo parâmetro, quero pesquisar a palavra fictícia Dentro dos acordes duplos, vou passar por Dummi. Se eu definir esse arquivo, como você pode ver, está escrito 23. Está escrito o número de índice do texto maldito. Se você contar os caracteres, D seria 23, deixe-me mostrar outro exemplo. Agora eu quero pesquisar a palavra Lorem no stream. Então eu vou digitar Loren. Se eu definir esse arquivo, como você pode ver, ele será escrito como um porque palavra Lem começa no primeiro índice É por isso que está escrito um. Lembre-se de que também é contar o espaço entre as palavras. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordarei a função de inserção de string, a função QQ ID e a função de fatia de string Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 15. Tutorial de funções de cordas do Sass Part2: Olá pessoal, é bom ver vocês de volta. Essa é a segunda parte do SAStringFunctions. E neste tutorial, aprenderemos a função de inserção de string, a função ID exclusiva e a função de fatia de string Então, sem perder seu tempo, vamos estudar a prática Como você pode ver, dentro da viseira cozida eu abro nossos arquivos anteriores Estilize seu arquivo CS e estilize seu arquivo de tese. Suponha que eu queira inserir uma palavra dentro dessa string. Para isso, precisamos usar a função de inserção de string. Então, aqui, vou digitar string insert. Eu quero adicionar uma palavra de olá. Então, aqui, vou digitar olá. Eu quero adicionar a palavra olá no início desta string. Para isso, precisamos passar outro parâmetro. Então, aqui vou digitar vírgula e aqui vou passar o número do índice Primeiro, também vou fornecer um espaço naquele lugar. Além disso, vou fornecer espaço após O. Então, se eu definir esse arquivo, você poderá ver o resultado. Usando a função Inserir, podemos inserir uma palavra ou um caractere dentro desse fluxo e precisamos passar o número do índice. É isso mesmo. Deixe-me te mostrar mais uma vez. Suponha que desta vez eu queira adicionar a palavra Ipsum neste fluxo Eu copio essa palavra e a removo, e aqui vou passar a palavra Ipsum E agora eu quero inserir a palavra Ipsum até uen. Para isso, vou contar o índice exato número um, dois, três, quatro, cinco, seis. Então, aqui, vou passar pelo Sebin porque também quero fornecer um espaço para uen Então, se eu definir esse arquivo, você pode ver o resultado Lorem Ipsum Portanto, este é o caso de uso da função de inserção. Vamos falar sobre nossa próxima função. Nossa próxima função é string slice. Então, aqui vou digitar STR slice. Suponha que eu queira cortar a palavra Lorem dessa string. Nesse caso, precisamos passar para o parâmetro dois. Deixe-me mostrar. Em nosso primeiro parâmetro, precisamos passar nossa string e, em nosso segundo parâmetro, precisamos passar o número do índice. Como você pode ver, a palavra Lorem termina no quinto índice. Então, aqui, eu vou passar seis. Se eu definir esse arquivo, agora você pode vê-lo remover a palavra Lem e imprimir é simplesmente dammitext Mas em nosso próximo exemplo, quero retornar uma palavra. Nesse caso, precisamos passar um total de três parâmetros, nosso número de índice inicial e nosso número de índice final, que é nove. Se eu definir esse arquivo, como você pode ver, o retorno é. Então, usando essa função, podemos cortar qualquer seção da nossa string Vamos falar sobre nossa última função, que é um ID exclusivo. Primeiro, vou remover tudo isso e aqui vou digitar ID exclusivo. ID. Em seguida, nosso parêntese e o semícone dois nesta linha Se eu definir esse arquivo, como você pode ver, ele gravará um ID exclusivo. Ele retorna alguns caracteres aleatórios. Se eu definir esse arquivo novamente, toda vez que ele for escrito um novo ID, e Bt fold, sempre essa função escreverá um ID exclusivo de nove caracteres. Basicamente, usamos essa função com condições de IP. Eu abordo todas essas funções de string. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 16. Tutorial de funções de cores do Sass: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial empolgante relacionado ao CS. E neste tutorial, vamos aprender as funções de cores CS. Como eu disse anteriormente, o CS veio com algumas funções invais. Função numérica, função de string, função de cores, funções de lista, função de eleitor e função de introspecção Concluímos a função numérica e função de string em nosso tutorial anterior. Neste tutorial, aprenderemos a função de cores. Sem perder tempo, vamos ver quantas funções de cores temos em nosso CAS Neste tutorial, abordaremos as funções básicas, mas importantes, do CS: clarear, escurecer, ajustar, saturar, dessaturar, misturar Eu sei que temos mais de sete cores relacionadas a funções no SAS, mas essas são as mais importantes. É por isso que vou abordar essas sete funções. Então, vamos começar a prática e ver como funciona. Aqui você pode ver, lado a lado, que abro meu Visual Studio Coreator e meu navegador usando a extensão if server Eu já criei um documento HTML chamado index dot HTML. Com isso, eu já crio Style Door CS e o arquivo CSS estilizado Como você pode ver no meu navegador, temos que fazer dois D, classe um e classe dois. primeira classe foi preenchida com a cor de fundo rosa e a segunda classe veio com a cor de fundo vazia. Vamos entrar no arquivo CS e ver o que fizemos. Como você pode ver, a princípio, criamos uma cor de base de membro variável, e nossa cor base é rosa E então estilizamos nossos molhos e definimos uma borda. Então, em nossa classe um, definimos a cor de fundo, que é nossa cor base rosa, e não definimos nenhuma cor de fundo na nossa classe dois. Agora vou modificar essa cor e quero preencher essa div com a forma escura dessa cor rosa Para isso, vou usar uma função chamada darken. Então, primeiro, vou usar a propriedade CSS, que é o plano de fundo. Antecedentes, e vou chamar nossa função. Aqui vou digitar darken. Então, dentro dos parênteses, precisamos fornecer uma cor Para cores, vou usar a mesma cor, que é a cor base. Vou copiar a variável e colá-la aqui. E então, em nosso segundo parâmetro, precisamos fornecer o valor de 0 a 100% Então, aqui eu quero passar 30%. Então, se eu definir esse arquivo, aqui você pode ver nosso contêiner cheio com 30% mais corte escuro do que o anterior. E se eu mostrar meu estilo ou arquivo CSS, como você pode ver, ele cria uma nova cor. Então, mais uma vez, vou voltar ao meu estilo ou arquivo CS. Então, como você pode ver, se eu aplicar 30% de cor escura a essa cor base, ela retornará esse tipo de Da mesma forma, se eu aplicar 70% e depois definir esse arquivo, você poderá ver a diferença. Agora são mais dez cores escuras. Eu te mostro duas profundezas porque essa é a cor original e essa é a parte escura dessa Este é o caso de uso da função escura. Nossa próxima função é a função de iluminação . Deixe-me te mostrar. Então, primeiro, vou duplicar essa linha e comentar a anterior E aqui eu vou amarrar Lighten. E eu vou passar o valor de 30% aqui. Se eu definir esse arquivo, como você pode ver, é 30% de cor clara da nossa cor base Se eu mostrar meu arquivo CSS, como você pode ver, ele está escrito em branco puro porque nossa cor rosa já é uma cor clara Se eu usar a cor azul, deixe-me mostrar a cor base azul. Neste arquivo, agora você pode ver a parte iluminada dessa cor azul. E se eu te mostrar o arquivo CSS, você pode ver o código colorido. Podemos usar essas funções com Hova Effects. Vamos falar sobre nossa próxima função, que é ajustar o matiz Primeiro, vou duplicar essa linha e comentar a anterior, e aqui vou digitar adjust Hue Matiz. Se eu definir esse arquivo, como você pode ver, ele mudou a cor. Basicamente, usando essa função, seja qual for a cor que passarmos em nosso primeiro parâmetro, ela pode retornar parte escura ou clarear parte dessa cor de acordo com esse E em nosso segundo parâmetro, precisamos passar valor com grau. Se eu passar 20 aqui e depois definir esse arquivo, você verá a diferença. Seu retorno não escurecerá o anterior. Se eu passar 70 graus, vamos ver o que aconteceu. Se eu definir esse arquivo, ele retornará parte clara dessa cor. Usando a função H, podemos girar as cores. Então, como você pode ver, podemos usar a função Hu. Vamos falar sobre nossa próxima função, que é saturar. No começo, vou duplicar essa linha e comentar a anterior Aqui vou digitar saturate. Basicamente, essa função aumenta o brilho dessa cor. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele ainda retorna da mesma cor. Vamos mudar a cor. Aqui eu vou usar uma cor marrom. Vou fornecer um valor hexadecal com AD 4038. Se eu definir esse arquivo, agora você pode ver a diferença de cor. Essa é a cor base e esta está 70% saturada da cor base. Aumenta o brilho dessa cor marrom e retorna a cor vermelha. Da mesma forma, temos a função oposta, que é dessaturar. Deixe-me te mostrar. Vou duplicar esta linha e comentar a anterior aqui , vou digitar desaturate Também vou mudar a cor base, que é azul. Se eu definir esse arquivo, como você pode ver, essa função reduz o brilho dessa cor e retorna essa cor. função saturada sempre aumenta o brilho dessa cor e a função de dessaturação sempre diminui o brilho dessa Se reduzirmos o valor em 20% e depois definirmos esse arquivo, agora ele tentará combinar com a cor base. Mas se você aumentar o valor em 90% e definir esse arquivo, agora poderá ver a diferença. Reduziu o brilho dessa cor. Mas se eu passar o valor zero e definir esse arquivo. Agora você pode ver que está escrita a cor original, a cor base, a cor azul. Mas se eu usar o valor total, 100% e definir esse arquivo, agora você poderá ver apenas a cor cinza Itrton Agora vamos falar sobre nossa próxima função, que é mix. Quero eliminar esta linha e comentar a anterior. Então, aqui, vou digitar mix. Usando essa função, podemos misturar cores diferentes. Nessa função, basicamente, precisamos passar um total de três parâmetros. Então, com a cor base, eu quero adicionar, como você pode ver, nossa cor base é azul. Eu quero adicionar a cor vermelha. Então, aqui vou digitar vermelho, vírgula e, em seguida, precisamos passar o valor percentual Então, aqui eu vou passar de 50%. Significa quanta cor azul eu quero adicionar à cor vermelha. Se eu definir esse arquivo, como você pode ver, ele está escrito na cor roxa. Se misturarmos a cor vermelha e a cor azul, nesse caso, ela reterá a cor roxa Se eu diminuir o valor percentual, 20% e depois definir esse arquivo, agora você pode vê-lo retornar a cor rosa avermelhada Aplicou 20% de cor oeste a essa cor vermelha. Se eu aumentar o valor 90% e depois definir esse arquivo, agora você poderá ver o resultado diferente. Agora você pode ver que nossa nova cor é muito mais forte do que a vermelha e está escrita quase azul. É assim que você pode usar a função mista. Agora vamos falar sobre nossa função de luxúria, que é matrizes transparentes. Vou duplicar essa linha e vou comentar a anterior Aqui vou digitar gravatas transparentes de fundo. Basicamente, usando essa função, podemos tornar nossa cor transparente. Se você já está familiarizado com CSS, sabe o valor GVA, e A significa Alpha Val, e podemos tornar nossa cor transparente usando o valor Alpha Da mesma forma, temos uma função no SAS, que é transparente, sim. Aqui, precisamos passar pelos dois parâmetros, cor e valor. Para cor, vou usar nossa cor base, e aqui precisamos passar o valor 0-1 Então, tipo Hemo, ponto zero , quatro, quero dizer, é 40% transparente Vamos configurar o arquivo e ver se ele funcionou corretamente ou não. Como você pode ver, nossa cor de fundo é 40% transparente. E se eu mostrar meu arquivo CSS, aqui você pode vê-lo usando valor Rgvia, aqui você pode ver que está escrito o valor Alpha 0.6 E se eu quiser torná-lo completamente transparente, nesse caso, precisamos passar o valor um. Se eu definir esse arquivo, agora você pode ver que ele é completamente transparente. Mas se eu mostrar meu arquivo CSS e comparar com o valor Alpha, aqui você pode ver que está escrito em zero. No CSS para transparência total, precisamos usar zero, mas no SAS para transparência completa, precisamos usar um. Obviamente, funciona apenas para essa função. Isso é tudo para este tutorial. Espero que agora esteja claro para você o que são as funções de cores do CS. Obrigado por assistir a este vídeo. Em nosso próximo tutorial, abordaremos as funções da Lista CS. Então, fique ligado no nosso próximo vídeo. 17. Tutorial de funções de lista de Sass Part1: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial empolgante relacionado às funções do SAS. E neste tutorial, vamos aprender as funções SSList Como eu disse anteriormente, temos seis funções no SAS, função numérica, função de string, função de cor, função de lista, função seletora e função de introspecção Neste tutorial, vamos aprender a função de lista. Tudo isso está em todas as funções. Mas antes precisamos entender o que é lista. Se você está familiarizado com JavaScript, então você já está familiarizado com matrizes Array significa que, em uma única variável, podemos armazenar vários valores. E se você quiser fazer a mesma coisa no SAS, então temos a Lista. Aqui você pode ver, primeiro pegamos uma variável, depois listamos, e dentro dessa variável, configuramos para dizer três valores, cinco pixels, dez pixels e 15 pixels. Esse é o primeiro método que você pode criar por último no SAS. Deixe-me mostrar esse segundo método. Aqui você pode usar o separador entre os valores. Você pode usar vírgula Assim, você pode usar valores sem vírgula. Caso contrário, você pode usar valor com vírgula. E há outra maneira de criar uma lista no CAS. Deixe-me te mostrar. Além disso, você pode usar endereços quadrados para criar uma lista no CS. E agora vou mostrar as funções da lista. Usando a função de lista, você pode manipular sua lista. Você pode agregar novo valor à sua lista. Caso contrário, você pode remover um valor dessa lista. Você pode fazer muitas coisas usando essas funções. Nossa primeira função é a função de comprimento. Daí vem a função Nth. Em seguida, função Seth N, função junção, appNFunction, função, função de índice, função de menor separador, e nossa última função é a função Portanto, temos a função de menor linha total no CS e vou abordar tudo isso neste tutorial. Sem perder seu tempo, é começar a praticar e ver como ele jurou. Finalmente, estou em um médico de estúdio visual. Lado a lado, abro o stylet cs e o arquivo css style dot Primeiro, vou criar uma lista de nomes de variáveis Dollar ist. Então, dois pontos aqui, vou definir alguns valores. Cinco pixels, espaço, dez pixels, espaço, 15 pixels. Em seguida, ponto e vírgula dois nesta linha. Agora vou criar uma classe dot class one e , dentro do alirass , vou chamar uma propriedade CSS, que é preenchida aqui, que é preenchida aqui vou usar todas as funções de lista, uma por uma Vamos chamar nossa primeira função de lista, que é comprimento. Então, aqui vou digitar o comprimento. Usando a função de comprimento, podemos contar o número total de valores em nossa lista. Se eu passar a variável am dollar list e definir esse arquivo, como você pode ver, ele será escrito preenchendo três porque temos que dizer três valores em nossa lista Se eu aumentar o valor de 20 pixels e depois definir esse arquivo, como você pode ver, ele escreverá quatro. Como você pode ver, ele conta vários valores. Além disso, se eu remover o pixel unitário, deixe-me mostrar e definir esse arquivo. Como você pode ver, escreveu quatro porque essa função é inteligente o suficiente para identificar os valores. É por isso que, sem unidade, ela pode contar nossos valores. E se eu usar vírgula entre eles e depois definir esse arquivo, como você pode ver, agora também está escrito quatro porque podemos criar nossa lista usando espaço, caso contrário, usando vírgula Vamos voltar à posição anterior. Vou pressionar Control Z. Além disso, podemos passar propriedades e valores na função de comprimento Deixe-me te mostrar. Primeiro, vou usar chaves redondas Dentro das chaves redondas, primeiro, vou usar uma propriedade com dez pixels Além disso, vou usar a propriedade de altura. Altura, cinco pixels. Se eu definir esse arquivo, como você pode ver, ele reajusta dois porque passamos o valor total de dois nesta função, largura e altura Essa função é muito difícil de identificar esses valores. Esta é a nossa função de comprimento , que pode contar os valores da nossa lista. Agora vamos falar sobre nossa próxima função, que é NIT. Mas primeiro, vou duplicar essa linha e comentar a anterior. Vou digitar NI Basicamente, passamos para dois parâmetros na função N. Em nosso primeiro parâmetro, precisamos passar o valor da lista e em nosso segundo parâmetro, precisamos passar o índice. Deixe-me te mostrar. Em nosso primeiro parâmetro, vou passar a lista Dollar list. E em nosso segundo parâmetro, vou passar o número do índice, então vou passar dois. Se eu definir esse arquivo, como você pode ver, ele será escrito em dez pixels. Agora, o quociente é o motivo pelo qual está escrito em dez pixels. Porque, como você pode ver na minha lista no índice dois, temos um valor de dez pixels. É por isso que está escrito em dez pixels. Temos que dizer quatro valores na minha lista. Isso significa que temos que contar quatro índices nesta lista. Em nosso segundo parâmetro, se eu passar o número do índice, acordo com o número do índice, ele retornará o valor. Da mesma forma, se eu alterar o número do índice, quatro e depois definir esse arquivo, agora você poderá vê-lo retornar 20. Além disso, também podemos passar um valor negativo. Se eu passar menos um e depois definir esse arquivo, agora você poderá vê-lo retornar 20 novamente . Mas a pergunta é por quê? Porque do lado esquerdo, contamos valores positivos. Da maneira oposta, contamos o valor negativo do lado direito. Então, esse é o nosso menos um, isso é menos dois, isso é menos três e isso é Se eu passar menos três e definir esse arquivo, você pode ver que está escrito dez Portanto, podemos imprimir o valor dessa maneira, caso contrário, dessa maneira. Agora, vamos falar sobre nossa próxima função, que é configurá-la. Quero começar esta linha e comentar a anterior. Se você quiser adicionar um novo valor à nossa lista existente, nesse caso, você pode usar a função Seth Neh Aqui, vou digitar Seth Ne set nth. Dentro das prensas descendentes, precisamos passar três parâmetros. Primeiro, nossa lista, depois o número do índice, onde você deseja definir? Eu quero colocá-lo no índice dois. É por isso que eu passo dois. Em nosso terceiro parâmetro, precisamos passar o novo valor, e nosso novo valor é 30 EM. Aqui eu quero substituir dez pixels por 30 da manhã. Se eu definir esse arquivo, você poderá ver o resultado. Cinco pixels, 30 am, 15 pixels, 20 pixels. Usando essa função, você pode substituir um valor na sua lista existente. Como você pode passar o valor negativo aqui. Se eu passar menos um e depois definir esse arquivo, agora você pode ver que ele substituiu 20 pixels por 30 am Vamos falar sobre nossa quarta função, que é Joan. Vou duplicar esta linha e comentar a anterior Aqui eu vou chamar a função Joan. Usando a função conjunta, podemos juntar várias listas e criar uma única lista. Para isso, vou criar outra variável, que é dois. Além disso, vou mudar esses vários pixels de 50 pixels, 100 pixels, 150 pixels e 200 pixels Aqui, precisamos passar o parâmetro dólar dois, Lista um e Lista dois, Dólar, ist, vírgula, e nosso segundo parâmetro, precisamos passar nossa segunda lista é dois, dólar, é dois Então, se eu definir esse arquivo, você pode ver que ele escreveu uma nova lista, e temos um total de oito valores nessa lista. Cinco pixels, dez pixels, 15 pixels, 20 pixels, 50 pixels, 100 pixels, 150 pixels e 200 pixels. Você pode ver que não há vírgula entre esses valores. Basicamente, essa função foi combinada para listar e escrever uma nova lista. Mas o que? Se usarmos vírgula, em nossa primeira lista, deixe-me mostrar para você e em nossa segunda lista, eu apenas uso espaço para separar valores Se eu definir esse arquivo, como você pode ver em nossa nova lista, ele usou vírgula em toda a nossa lista para separar valores Além disso, podemos passar outro parâmetro em nossa função conjunta, que é separado. Suponha que eu não queira uma vírgula entre esses valores. Nesse caso, em nosso terceiro parâmetro, precisamos passar espaço. Se eu definir esse arquivo, como você pode ver em nossa nova lista, ele separa nosso valor usando espaço, não a vírgula Como você pode usar o valor automático, é o valor padrão. Então, aqui estou eu para digitar auto. Se eu definir esse arquivo, agora você pode ver a vírgula comprovada entre os valores Mas se eu não usar vírgula em nossa primeira lista e depois definir esse arquivo, por padrão, como você pode ver, é espaço escrito Ele separa nosso valor usando o espaço. Mas agora eu quero separar esse valor usando vírgula. Nesse caso, precisamos passar uma vírgula aqui. Se eu definir esse arquivo, agora você pode ver que ele fornece vírgula entre os valores Portanto, nosso terceiro parâmetro significa separador. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordaremos uma função de caneta, função zip, função de índice, função separadora e função entre colchetes Então, obrigado por assistir a este vídeo, fique ligado nos próximos tutoriais 18. Tutorial de funções de lista de Sass, parte 2: Olá, pessoal. Mais uma vez, estou de volta ao meu coordenador do Visual Studio e, como você pode ver, lado a lado, abro os arquivos style SSPle e Stylo CSS Em nosso tutorial anterior, aprenderemos sobre a função Length, a função N-th, a função set N e a função join Mas neste tutorial, abordaremos as demais: função APN, função Z, função de índice, sua função separadora e sua função de colchetes Então, sem perder seu tempo, vamos estudar de forma prática. Em primeiro lugar, vou começar com a função APN. Então, vou configurar essa linha e comentar a anterior. E aqui vou digitar Append. Em seguida, nosso latão redondo. Suponha que se você quiser adicionar um novo valor na lista existente, nesse caso, você pode usar a função AVN. Suponha que, em nossa primeira lista, eu queira adicionar 30 pixels a 20 pixels. Nesse caso, podemos usar essa função. Deixe-me te mostrar como. Essa função adiciona um único valor. Em nosso primeiro parâmetro, precisamos passar a lista, que é a lista de dólares. Em seguida, vírgula e, em seguida, precisamos passar o novo valor, que é 30 pixels Se eu definir esse arquivo, como você pode ver no arquivo CSS, ele será escrito de 30 a 20 pixels. Está agregando um novo valor à nossa lista. Podemos adicionar novos valores usando essa função. Além disso, temos um terceiro parâmetro que podemos usar separadamente. Deixe-me te mostrar. Como você pode ver, nossos valores são divididos por espaço, então aqui vou usar nosso terceiro parâmetro, que é vírgula Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver que nossos valores estão separados por. Você pode usar qualquer valor aqui, auto, espaço. Vamos falar sobre nossa próxima função, que é a função Z. Vou até esta linha e comento a anterior. Primeiro, vou inventar essa e digitar Z. Basicamente, essa função vai unir dois valores Eu quero dizer que tinha cinco pixels com 50 pixels, dez pixels com 100 pixels, 15 pixels com 150 pixels e 20 pixels com 200 pixels. Aqui, vou passar dois parâmetros. Nosso primeiro parâmetro é lista de dólares e nosso segundo parâmetro é dólar é dois. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele combinou cinco pixels com 50 pixels, dez pixels com 100 pixels, 15 pixels com 150 pixels, 20 pixels com 200 pixels. Deixe-me mostrar um bom exemplo disso. Aqui eu vou pegar um nome de cor. Dentro das prensas redondas, vou pegar vermelho, verde e azul Além disso, vou pegar outra lista. o rounders for para vermelho, eu vou pegar 120 Para verde, vou usar 255, e para azul, vou usar 70 Se eu definir esse arquivo, agora você pode ver que o valor da cor vermelha é 120, valor da cor verde é 255 e o valor da cor azul é 70 Esse é o bom caso de uso da função zip. Se você não usa vírgula para fins de separação, deixe-me mostrar que vou revogar essa vírgula e usar espaço Nesse caso, você pode remover chaves redondas. Se eu definir esse arquivo, como você pode ver, ele também funcionou perfeitamente. Portanto, depende totalmente de você, você se sente confortável com o separador ou não Você pode usar vírgula ou espaço na web. Vamos falar sobre nossa sétima função, que é índice. Devo implorar por esta linha e comentar a anterior. E aqui vou digitar index. Suponha que você queira pesquisar algo na sua lista. Nesse caso, você pode usar a função de índice. Então, como parâmetro, primeiro, precisamos fornecer o nome da lista, e o nome da nossa lista é lista de dólares. Em nosso segundo parâmetro, precisamos passar a palavra-chave, que eu quero encontrar. Eu quero encontrar 15 pixels. Se eu definir esse arquivo, como você pode ver, é um número de índice escrito. Encontrei nossa palavra-chave no índice três. Se eu remover a unidade e pesquisar o arquivo, como você pode ver, também está escrito três. Mas se eu tentar encontrar um resultado que não existe nesta lista, deixe-me mostrar 40 e depois definir esse arquivo. Como você pode ver, não está escrito nada. Se existe, então está escrito, caso contrário, não está escrito nada. Agora, vamos falar sobre nossa oitava função, que é seu separador Então, vou duplicar essa linha e comentar a anterior, e aqui vou digitar separador de lista Separador de listas. O separador de lista basicamente retorna o nome do separador. Aqui precisamos passar o nome da lista e, em seguida, ele retornará qual separador usamos nessa lista Vou aprovar a lista de dólares. Se eu definir esse arquivo, como você pode ver, é espaço escrito. Então, aqui você pode ver em nossa lista um, usamos espaço para separar nossos valores. Mas se eu usar coma em nossa lista dois, e aqui passarmos a lista dois, e então definirmos esse arquivo. Agora você pode ver o título porque aqui usamos vírgula para separar nossos valores Temos que dizer dois tipos de separador, caso contrário, espaço. E agora vou falar sobre nossa última função, que está entre colchetes Então, vou duplicar essa linha e comentar a anterior E aqui, vou digitar se entre colchetes está entre colchetes. Basicamente, essa função retorna ao valor. Verdadeiro, ou falso. Basicamente, ele verificará se usamos *** ao quadrado em nossa lista ou Aqui vou passar o nome da nossa lista, Dollar list. Se eu definir esse arquivo, agora você pode ver que o resultado é falso escrito. Mas se eu usar o quadrado *** em nossa lista também, deixe-me mostrar e depois passar, e se eu passar dois nesta função e depois definir esse arquivo, como você pode ver, está escrito como verdadeiro Basicamente, usamos essa função com a condição e aprenderemos sobre ela em nossos próximos tutoriais Isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos as funções selecionadas. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 19. Tutorial de funções do seletor de Sass, parte 1: Olá, pessoal, é bom ver vocês. Mais uma vez, estamos de volta com um novo tutorial relacionado ao SAS. E neste tutorial, aprenderemos as funções do seletor SAS Mas antes precisamos entender o que está selecionado. Aqui você pode ver dentro da classe um, temos a ncatag, dissemos oi e a nossa tag Anca, que está dentro desta classe Nossa tag Anca é nosso seletor. Mas o SAS fornece algumas funções convidadas que podem manipular Deixe-me mostrar a função. Então, como você pode ver, temos sete funções seletoras em CS, seletor próximo, seletor anexado, seletor de substituição superselecionado, seletores simples, seletores unificados e seletor Avançando e começando nossa prática. Aqui você pode ver que eu já abro meu aplicativo Kuala e, lado a lado, abro arquivo CS estilizado e o arquivo CSS de estilo Primeiro, vamos limpar uma variável em nosso arquivo CS. Dólar e o nome da nossa variável são selecionados. Em seguida, cólon. Em primeiro lugar, vou mostrar qual é o uso da função de ninho seletor Aqui vou digitar o seletor List. Basicamente, dentro dessa função de aninhamento de seletores, passamos um total de dois parâmetros, e ambos os parâmetros devem ser seletores Para nosso primeiro parâmetro, vou pegar códigos duplos para nosso primeiro parâmetro, vou usar L e para nosso segundo parâmetro, vou usar I e depois Semgoron dois nesta linha Basicamente, essa função seletora criará nosso primeiro parâmetro parentag e tornará nosso segundo parâmetro a tag filha do nosso Eu quero dizer que vai criar a tag UL, parentag e a tag LI tag child Ele combinará a tag e criará uma seleção. Para aplicá-lo, precisamos criar uma classe. Para isso, vou usar o método de interpolação. Então, primeiro, vou digitar has tag e, dentro dos aliases, vou usar nossa variável, que é seletor, seletor de dólares Então, qualquer valor que tenhamos em nossa variável selecionada, ele será colado aqui. Dentro dessa função seletiva, vou usar uma propriedade Você pode usar qualquer propriedade. Por enquanto, vou usar a altura. Pixel de tonalidade de altura. Vamos configurar o arquivo e ver o que obtemos em nosso arquivo CSS. Se eu definir esse arquivo, aqui você pode ver no arquivo CSS, que ele cria a tag ultagParnTag e a tag filha Litag Ele combinou o seletor e o seletor combinado Made. Basicamente, esse é o uso da função seletor ninho. Deixe-me mostrar outro exemplo dessa função. Vou remover esse e definir esse código duplo. Eu vou fazer uma aula de Totter Two. Nossa primeira classe é XYZ e nossa segunda classe é dot ABC. E agora vou pegar nosso segundo parâmetro. Quero usar vírgula e dentro do código da torre. Nosso segundo parâmetro é a tag P. Se eu definir esse arquivo, aqui você pode ver no meu arquivo CSS do estilizador, aqui você pode vê-lo criar dois grupos diferentes de classes Primeiro, ele seleciona nossa tag de parágrafo, que está dentro da nossa classe XYZ, e depois, seleciona outra tag de parágrafo, que está dentro da classe ABC Se você quiser usar a classe sudo, sim, você pode. Deixe-me te mostrar. Primeiro, vou remover essa classe e vou usar somente a classe XYZ E então, em nossa segunda seção de parâmetros, vou digitar N pessoa, cólon, nosso fotoeleitor, que é Hober Se eu definir essa linha, aqui você pode vê-la usando o seletor Ober com a classe XYZ Aqui você pode ver se deseja adicionar dois parâmetros, para isso, você precisa usar N pessoa seno Deixe-me limpar esta seção mais uma vez. Suponha que, com XYZ, eu queira adicionar um sublinhado ABC. Deixe-me mostrar a você, então, absolutamente nenhuma pessoa sublinha ABC. Se eu definir esse arquivo, aqui você pode ver, ele cria uma nova classe XYZ underscore Essa foi nossa primeira função, que é selectNNST. Vamos falar sobre outra função que é o seletor apene Aqui vou remover o SelectOnnst e vou digitar o seletor apin Da mesma forma, nessa função, precisamos passar para o parâmetro dois. E essa função appen combinará esses dois parâmetros Deixe-me te mostrar. Em nosso primeiro parâmetro, vou usar a tag de parágrafo. Em nosso segundo parâmetro, vou usar uma classe. Aqui vou digitar dot ABC. função Selector Nest basicamente fornece espaço entre dois parâmetros Mas na função de acréscimo, ela combinará os dois parâmetros Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, não há espaço entre a tag P e a classe ABC Quero dizer que isso cria uma única seleção. Isso significa que toda a tag de parágrafo com classe ABC, altura deve ser de 20 pixels Deixe-me mostrar outro exemplo. Suponha que eu use a classe dot XY Z. Em nosso segundo parâmetro, vou usar o sublinhado Copy Se eu definir esse arquivo, como você pode ver, ele cria uma nova classe, XYZ undersco Em nossa função anterior, precisamos usar N pessoa seno para unir esses dois parâmetros Mas nessa função, não precisamos usar o seno da pessoa Agora, deixe-me modificar esse seletor e dar um passo adiante Super cópia, vou usar o Coma, e aqui vou digitar underscoimage Como você pode ver, em nosso segundo parâmetro, usamos dois nomes diferentes, copy undisco copy e underscoimage Você pode usar qualquer nome que desejar. Se eu definir esse arquivo, como você pode ver, ele cria um total de dois seletores diferentes, ele cria um total de dois seletores diferentes cópia de sublinhado XYZ e imagem de sublinhado Basicamente, ele combina nosso primeiro parâmetro com cópia e, novamente, combina nosso primeiro parâmetro com imagem e cria dois seletores diferentes Isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos sobre nossos seletores restantes Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 20. Tutorial de funções do seletor de Sass, parte 2: Olá, pessoal. É bom ver você de volta. Mais uma vez, estamos no editor de código do meu estúdio de vídeo e, como você pode ver, lado a lado, abro o arquivo style dot cs e o arquivo CSS stylet Neste tutorial, continuaremos com a função seletora Vou começar este tutorial com o seletor RiplesFunction. Deixe-me te mostrar. Para isso, vou digitar o lugar do hífen do seletor. É compreensível pelo próprio nome, ele substituirá alguma coisa Nesta função, basicamente passamos um total de três parâmetros. Suponha que, em nosso primeiro parâmetro, eu passe o ponto C XYZ Esse é o nome da nossa turma. No segundo parâmetro, precisamos passar o qual devemos substituir. Suponha que eu queira substituir a classe dot XYZ. Aqui eu vou amarrar o ponto XYZ. Agora, em nosso terceiro parâmetro, precisamos passar o novo valor, e aqui você precisa passar o valor pelo qual deseja substituir. Quero substituir dot yate por dot ABC. Se eu definir esse arquivo, aqui você pode ver o resultado. Como você pode ver, não há nome de classe c dot XYZ. Ele substitui dot gate por dot ABC. É por isso que passou de c dot ABC. Deixe-me mostrar outro exemplo. Se não houver uma classe H, uma H em nosso primeiro parâmetro, nesse caso, se eu definir esse arquivo, como você pode ver, ele não substituirá o ponto XYZ por ABC É simplesmente imprimir o ponto C XYZ porque essa função de respostas não consegue encontrar H um em nosso primeiro parâmetro É por isso que imprime ADTs. Este é o uso da função de repetição do seletor. Vamos falar sobre nossa próxima função seletora, que é o superseletor E. Aqui vou amarrar seu superseletor de hífen. Basicamente, usamos o seletor para fins de teste, não para fins de modificação, e ele é escrito apenas um com through either falls Para entendê-lo, precisamos passar pelos dois parâmetros Em nosso primeiro parâmetro, precisamos passar um seletor, mas chamamos nosso primeiro seletor de superseletor Suponha que nosso superseletor seja A e chamaremos nosso segundo subseletor de parâmetros E em nosso subseletor, vou passar um ponto e também vou definir uma classe X Y Z. Se eu definir esse arquivo, ele retornará verdadeiro Mas o quotien é o porquê? Porque essa função pesquisará nosso superseletor em nosso subseletor Se o superseletor existir em nosso subseletor, nesse caso, está escrito como Vamos configurar esse arquivo. Como você pode ver, está escrito no ar. Basicamente, usamos essa função com condição IP. Mas se eu substituir a posição deles, na XYZ. Se eu remover XY do nosso subseletor e definir esse arquivo, como você pode ver, ele está escrito cai porque esse superseletor não existe nesse É por isso que está escrito Falls. Esse é o uso do superseletor. Vamos falar sobre nosso próximo seletor, que é um seletor simples Vou remover este e vou digitar um seletor de hífen simples Usando essa função seletora, podemos dividir nossos seletores Se passarmos o seletor combinado aqui, ele dividirá os seletores. Deixe-me te mostrar. Suponha que eu passe aqui no ABC. Se eu definir esse arquivo, aqui você pode vê-lo dividindo nossos seletores Ele cria um seletor A e outro ponto seletor ABC. Esse é o uso de um seletor simples. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordarei as funções restantes do seletor, a unificação do seletor e a extensão do seletor Obrigado por assistir a este vídeo, Stu, pelo nosso próximo tutorial 21. Tutorial de funções do seletor de Sass, parte 3: Olá, pessoal. É bom ver você de volta. Este é nosso terceiro tutorial, relacionado à função seletora Sas Neste tutorial, aprenderemos a função Unify selecionada e a função de extensão do seletor Vamos entrar no editor de código do Visual Studio e ver como podemos usar essa função. No início, vou chamar a função Unifi selecionada, seletor Nesta função, temos que passar um total de dois parâmetros. Suponha que, em nosso primeiro parâmetro, eu use na tag âncora e, em nosso segundo parâmetro, eu use informações de pontos Basicamente, essa função tenta criar uma correspondência entre os dois parâmetros. Se eu definir esse arquivo, como você pode ver, ele cria uma correspondência e cria um novo seletor, em info Deixe-me mostrar mais exemplos relacionados a essa função. Suponha que, em nosso primeiro parâmetro, eu digite ad active. E em nosso segundo parâmetro, vou passar informações. Se eu definir esse arquivo, como você pode ver, ele cria um novo seletor, adt active dot info O que significa que ele selecionará a tag âncora com active plus, caso contrário, com a classe info Em seguida, ele aplicará o CSS. Mas se eu passar para um seletor diferente, deixe-me mostrar a tag âncora em nosso primeiro parâmetro e H uma tag em nosso segundo Se eu definir esse arquivo, como você pode ver, é uma seta escrita porque não criou nenhuma combinação entre dois parâmetros. Esse é o uso da função Unify. Vamos falar sobre nossa última função seletora, que é a extensão do seletor Vou remover o seletor Unify e, em seguida, vou digitar extend Essa função também funciona como uma função unificada selecionada. Basicamente, essa função tenta estender uma classe e tentar criar um novo seletor E nessa função, podemos usar um total de três parâmetros. Suponha que nosso primeiro parâmetro seja a informação do ponto âncora e, em nosso segundo parâmetro, eu vou passar a tag Anger R, e em nosso terceiro parâmetro, vou passar um link de pontos de classe. Então, essa função, tentando combinar o segundo parâmetro com o nosso primeiro parâmetro. Se eles encontrassem uma correspondência, ela imprimia IA e, em seguida, tentava criar uma combinação com a classe de link dot. Se eu definir esse arquivo, como você pode ver, primeiro, ele cria uma combinação em info. O que significa que ele imprime como está porque encontrou uma etiqueta de raiva em nosso primeiro parâmetro. É por isso que ele imprime Asit is e, em seguida, cria uma combinação de pontos de informação ponto L. Esse é outro seletor Essa função sempre cria uma combinação estranha. Deixe-me mostrar outro exemplo. Agora, em nosso segundo parâmetro, vou passar H uma tag, e em nosso terceiro parâmetro, vou passar H duas tags. Se eu definir esse arquivo, como você pode ver, ele imprime nosso primeiro parâmetro como está e não tenta estender nosso seletor Porque não encontrou nenhuma correspondência em nosso segundo parâmetro. É por isso que ele não pode estender nosso seletor. Basicamente, não usamos essa função seletora complexa em nosso projeto e, na maioria das vezes, usamos a função selecto next, o seletor apenFunction e a função seletora repress e Isso é tudo para este tutorial. Em nosso próximo tutorial, iniciaremos as funções do mapa. Obrigado por assistir a este vídeo, fique atento ao nosso próximo tutorial. 22. Tutorial de funções do mapa Sass: Olá, pessoal. É bom ver você. Mais uma vez, estou de volta com um novo tutorial relacionado a dicas e, neste tutorial, aprenderemos a função de mapa. Primeiro, vamos tentar entender o que é mapa. Em nosso tutorial anterior, aprenderemos sobre a função de lista. Este é o exemplo da função de lista. Como você pode ver, em uma variável, dizemos que totalizamos três el, dez, 20 e 30 pixels. Como você sabe, podemos armazenar vários valores na função de lista. Da mesma forma, em nossa função de mapa, podemos armazenar vários valores. Mas o processo é diferente. Deixe-me te mostrar. Como você pode ver, este é o exemplo da função de mapa e dizemos que totalizamos dois valores aqui, 405 cem Mas há outro valor dentro dos códigos invertidos. Um é normal e outro é médio. Essas são as chaves. Essas são as chaves do mapa e esses são os valores. O valor médio regular é 400 e o valor médio é 500. Como você sabe, em nossa lista, temos índice. Exemplo, nosso índice de dez valores é um, índice de 20 valores é dois, índice de 30 valores é três. Usando o índice, podemos especificar a posição deste v. Usando a posição deles, você pode obter os valores. Se você quiser extrair o terceiro valor do índice , ele retornará 30 pixels. Mas nos mapas, não usamos índices. Aqui usamos chaves. Aqui podemos definir um nome diferente para nossas chaves. Esse é outro exemplo. Aqui você pode ver que usamos um nome de cor verde e, para verde, usamos o valor disial x. Da mesma forma, para azul, use o valor decimal hexadecimal. Também é uma função em nosso mapa, semelhante à lista. E também tem alguma função inval. Aqui você pode ver que temos seis funções de mapa diferentes, porta de mapa, mesclagem de mapas, chaves de remoção de mapa, valores do mapa e a última é que o mapa tem Vamos cobrir tudo isso um por um. Sem perder seu tempo, vamos começar pela prática. Como você pode ver, eu já abri meu aplicativo Kuala. Agora você pode ver lado a lado, eu abro o arquivo CS de estilo e o arquivo CSS de estilo. Primeiro, vou criar uma variável e o nome da nossa variável é fonte para ela, dólar, fonte wait. Em seguida, cólon. Depois de dois pontos dentro das prensas redondas , primeiro, vou criar nossa chave e nossa primeira tecla é normal Com isso, vou passar nosso primeiro valor e nosso primeiro valor é 400. Em seguida, vou criar nossa segunda chave, que é média. Além disso, nosso valor é 500 e nossa última chave está em negrito. E o valor é 700. Em seguida, envie um e-mail para esta linha. Este é o nosso mapa, e agora vou usá-lo. Para isso, vou criar um sabor de pontos de classe. Então, dentro da lista, vou usar um corpo CSS que é a fonte Peso da fonte. Agora vou chamar nossa primeira função de mapa, que é map gate. Então, dentro dos vestidos redondos, precisamos passar o nome do nosso mapa e o nome da chave. Como você pode ver, o nome do nosso mapa é o peso da fonte. Aqui eu vou passar o peso da fonte. Em nosso segundo parâmetro, precisamos passar a chave e, para chave, eu vou passar bool Dentro do curso duplo, vou passar em negrito. Se eu definir esse arquivo, como você pode ver, nossa fonte é 700. Na função Mp gate, precisamos passar para os dois parâmetros, o nome do mapa FontUO e a chave Essa função sempre escreveu o valor dessa chave, como você sabe, nosso valor chave mundial é 700. Mas o que aconteceria se eu passasse uma chave diferente que não existe nesta função de mapa. Aqui eu vou passar ossos. Se eu definir esse arquivo, como você pode ver, ele não está escrito porque não há nenhum nome de chave. Se a chave existir, então a função map gate escreveu o b. Agora, vamos falar sobre nossa próxima função, que é map Key. Aqui vou digitar a chave do mapa. Na função Mp keys, precisamos passar para um parâmetro, somente o nome do mapa. Se eu definir esse arquivo, como você pode ver , todas as chaves deste mapa serão escritas. Nossa primeira chave é normal, ou a segunda chave é média e nossa terceira chave está em negrito. Esse é o uso da função Mapey. Está escrito o nome de todas as chaves. Vamos falar sobre nossa próxima função, que é map ils. Então, aqui, eu vou passar ls. Também é uma palavra como a função da tecla do mapa. Se eu definir esse arquivo, como você pode ver, ele retornará todos os valores. E aqui precisamos passar apenas um parâmetro, como chaves. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordarei as funções restantes, mesclagem de mapas, remoção de mapas e chave hash do mapa Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 23. Tutorial de funções do mapa do Sass, parte 2: É bom ver vocês. Neste tutorial, abordaremos as funções restantes do mapa, mesclagem de mapas, remoção de mapas e haski de mapas Vamos voltar ao editor de código do Visor Studio. Finalmente, estamos no Visu Studio Code Editor e vamos começar com a função de mesclagem de mapas Essa função será mesclada para diferenciar um mapa e retornar um mapa Então, precisamos criar outro mapa. Para isso, vou usar uma variável, e o nome da nossa variável é leve. Peso. Depois do ponto e vírgula, você disse que os vestidos redondos, nosso primeiro quinoma é o mais claro e nosso valor é 100 e nosso segundo quinoma é li e o valor é 300 e ponto e vírgula da Agora vou usar a função de mesclagem de mapas. Aqui vou digitar map merge. E se eu passar outro parâmetro, como você sabe, nessa função, precisamos passar para o parâmetro dois. Aqui, vou passar outro parâmetro, que é outro mapa, ou seja, para pesar. Eu copio o nome da variável e vou colá-lo aqui. Mas não há problema. Se eu definir esse arquivo, ele retornará a seta. Deixe-me te mostrar. Se eu definir esse arquivo, como você pode ver, é uma seta escrita porque função de mesclagem de mapas retorna um novo homem, não um valor É por isso que não podemos imprimi-lo diretamente como um valor. Precisamos criar uma nova variável para armazenar esse novo mapa. Deixe-me te mostrar. criar uma mesclagem de nomes de variáveis E agora vou chamar essa função. Vou cortar essa função desse lugar e colá-la aqui. Basicamente, essa função foi mesclada aos mapas e escreveu um novo mapa, e agora vou chamar mapKisFunction Aqui vou digitar as teclas do mapa. E aqui precisamos passar nossa nova variável Mug. Aqui eu vou passar Mug. Se eu definir esse arquivo, como você pode ver, ele retornará todas as chaves do nosso novo mapa. Como você pode ver, primeiro ele imprime negrito médio normal da frente para o mapa úmido e, em seguida, imprime o mais claro e claro do mapa claro para o mapa úmido Este é o uso da função map Merch. Vamos falar sobre nossa próxima função, que é a remoção de mapas. Não podemos chamar a função de remoção do mapa diretamente. Da mesma forma, precisamos criar variáveis, então vou duplicar essa linha e vou mudar o nome da variável Eles se movem. E aqui vou chamar a função map remove, map, remove. Nesta função, precisamos passar um total de dois parâmetros. Em nosso primeiro parâmetro, precisamos passar o nome do mapa. No nosso caso, fonte para ela, mas em nosso segundo parâmetro, precisamos passar o nome da chave. Qual chave eu quero remover? Suponha que eu queira remover a tecla em negrito. Então, aqui vou amarrar em negrito. E se eu chamar nossa nova variável remove em nosso seletor de teste e, em seguida, definir esse arquivo, como você pode ver, use apenas as teclas normal e média Eu removo a chave em negrito. Portanto, esse é o uso da função de remoção. Basicamente, passamos o nome da chave que queremos remover. Agora, vamos falar sobre nossa última função, que é a chave hash do mapa Então, aqui, vou digitar a chave hash do mapa. Basicamente, o retorno dessa função ao tipo de valor também é verdadeiro. Nesta função, precisamos passar para o parâmetro dois. Então, como primeiro parâmetro, vou passar os pesos das fontes e, como nosso segundo parâmetro, precisamos passar o kiname, vou passar a tecla em negrito Se a tecla em negrito existir em nosso mapa de fontes, ela será escrita como verdadeira Então, vamos configurar o arquivo. Como você pode ver, está escrito de forma verdadeira. Mas se eu passar um nome de chave errado, negrito e depois definir esse arquivo, como você pode ver, ele é escrito como falso Portanto, esse é o uso da função de chave hash do mapa. Então, isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos a função de introspecção. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 24. Tutorial de funções de introdução do Sass: Olá pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao SAS e, neste tutorial, aprenderemos a função de introspecção do SAS Já aprendemos sobre função numérica, função de string, função cor, função de lista, função seletora, função de mapa Neste tutorial, abordaremos a função de introspecção. Vamos ver quantas funções temos na função de introspecção. Como você pode ver, temos um total seis funções na introspecção Basicamente, a função está usando condições. E é sempre escrito valor booleano por meio de outras falhas Vamos começar a prática e tentar entender como podemos usar essas funções. Aqui você pode ver que estamos no editor de código do Visual Studio e, lado a lado, abro o arquivo style dot cs e o arquivo style dot css. Como você pode ver em nosso arquivo CS de pontos de estilo, já criamos alguma variável num variável, variável char, variável de lista, variável de mapa. Com isso, criamos uma mistura no raio da borda do nome. Crie também uma soma de nome de função. Como você pode ver em nossa variável num, salvamos 15 pixels e em nossa variável char, salvamos um stream, roboto Em nossa variável de lista, criamos uma lista usando vários valores, 15 pixels, 25 pixels, 30 pixels, e em nossa variável de mapa, criamos um mapa. No início, vou criar uma classe na qual vou verificar nossa função de introstecção dot taste. Dentro da resis cali, vou usar uma propriedade CSS, que é Primeiro, vou começar com a função de existência da variável. Aqui vou digitar variable exist, e aqui precisamos passar o nome da variável. Basicamente, usamos essa função com condições p e ela é retida como verdadeira ou falsa Essa função verificará se o nome da variável existe nesse arquivo retornará verdadeiro. Caso contrário, ele retornará falso. Vamos verificar a variável. Aqui vou passar o nome do dólar ou da variável no mapa. Se eu definir esse arquivo, você pode ver, opa, precisamos remover o cifrão e depois definir esse arquivo Agora você pode ver que está escrito de forma verdadeira. Se eu passar um valor que não existe em nosso arquivo, nesse caso, deixe-me mostrar mapas e, em seguida, definir esse arquivo, como você pode ver, está escrito como falso. Deixe-me te mostrar uma coisa. Como você pode ver, verificamos nossa variável de mapa. Mas se eu recortar essa variável de mapa desse lugar e colar dentro desse seletor e, em seguida, definir esse arquivo, como você pode ver, ele também retornará verdadeiro porque se as variáveis existirem em qualquer lugar em nosso arquivo, nesse caso, elas retornarão verdadeiras Essas são nossas variáveis globais, mas agora o mapa é nossa variável local. Vamos pular para outra função que é existência de uma variável global. Deixe-me te mostrar. Aqui vou digitar a variável global exista. Se eu definir esse arquivo, ele retornará falso. Deixe-me te mostrar. Como você pode ver, está escrito como falso, mas você pode ver nossa variável de mapa existe em nosso arquivo. Então, qual é o problema? Porque nossa variável de mapa não é mais uma variável global. Agora é uma variável local. Agora, nossas variáveis globais são variável num, variável char e variável lista. Se eu passar num aqui e depois definir esse arquivo, como você pode ver, agora está escrito como verdadeiro. Agora, vamos pular para outra função que é mix in exist. Aqui vou digitar mix in exist. Nesta função, precisamos passar um nome de mixagem. Aqui, vou copiar o nome da mistura do raio da borda e colá-lo aqui Se eu definir esse arquivo, como você pode ver, está escrito como verdadeiro. Mas se eu remover o raio e depois definir esse arquivo, como você pode ver, está escrito Falls Da mesma forma, temos outra função que é a função existir. Se a função existir em nosso arquivo, nesse caso, retornará true. Função Se eu passar o nome da função e o nome da nossa função for sum e, em seguida, definir esse arquivo, como você pode ver, ele será escrito como verdadeiro. Vamos pular para nossa quinta função, que é digitar. Aqui eu vou digitar tip off. Nessa função, basicamente passamos por um membro variável. Aqui precisamos passar a linha variável. Por engano, eu configurei esse arquivo, é por isso que ele está escrito nesse erro e nossa linha variável é a lista de dólares. Se eu passar essa variável e definir esse arquivo, como você pode ver, ele escreverá nosso tipo de variável, que é lista. Da mesma forma, se eu passar variável char limb e, em seguida, definir esse arquivo, aqui você poderá vê-lo escrito como string Nosso tipo de variável char é string. Essa função sempre escreveu o tipo de variável. Agora, vamos pular para nossa última variável que está em disputa. Aqui eu vou digitar spat. Não encontro nenhum uso adequado dessa função porque ela é impressa como é Vail Se eu definir esse arquivo, aqui você pode vê-lo no Roboto. Nós apenas o usamos para fins de inspeção. Se eu passar por último aqui e depois definir este arquivo, como você pode ver, imprima pelo menos como está. Acho que não é uma função muito importante. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 25. Tutorial de Diretiva de @conteúdo de Sass: Olá pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao SAS Neste tutorial, aprenderemos as diretivas de conteúdo do SAS Já aprendemos sobre a mistura do SAS em nossos tutoriais anteriores Usando a mistura, podemos criar um cone reutilizável. Podemos usá-lo como funções. Como você pode ver, criamos uma mistura chamada raio BDI e, em vez da mistura, como você pode ver, usamos propriedades diferentes para navegadores diferentes Aqui usamos o prefixo. Para o Chrome, usamos a chave da web. Para a Mozilla, usamos o mose e eu uso o raio real da borda da propriedade Como você pode ver, também definimos o valor. Sempre que precisarmos chamar a mixagem em nosso seletor , precisamos passar o valor como parâmetro Como resultado, em nosso arquivo CSS, ele é escrito assim. Raio de borda de cinco pixels. A partir daqui, podemos passar vários valores. Mas a partir daqui, não podemos passar nenhuma propriedade CSS. Suponha que eu queira definir o estilo de borda usando essa mistura, mas não é possível isso e, para resolver esse problema, o SAS introduza viagens diretas de conteúdo. Basicamente, nós o usamos para enviar dados extras sem misturar valores. Quero dizer que com esse valor, podemos enviar dados extras. Deixe-me mostrar o exemplo. Como você pode ver, usamos nossa mesma mixagem, mas aqui usamos diretivas de conteúdo Para isso, precisamos digitar o conteúdo em vermelho. O que quer que passemos para incorporar a VLTs é a maneira de enviar dados para essa Como você pode ver, chamamos nosso raio de borda de mistura e definimos o valor de cinco pixels Depois disso, usamos tiss dentro do caliss, precisamos passar os valores da diretiva Border style, Esses são nossos dados de diretivas de conteúdo. Se eu definir esse arquivo, ele retornará esse código CSS. Depois do raio da borda, ele define o estilo de borda das. Como você pode ver, ele passa nossos dados extras após o raio da borda Vamos começar a prática e ver como podemos usá-la. Como você pode ver, estamos no editor de código Leo do meu usuário e, lado a lado, abro Stylod CS e o arquivo CSS Styload Eu já crio uma mistura chamada raio de borda, raio BD. E também, eu chamo isso de mixagem em nosso seletor. E aqui você pode ver o resultado em nosso arquivo CSS. E agora eu quero enviar dados extras com essa mistura, para isso precisamos usar Cali Races E aqui vou passar o estilo de borda, então tipo, borda, estilo de borda, dst. Como você pode ver, enviamos dados extras por meio dessa mistura. Mas se você quiser imprimir os dados extras na mixagem, para isso, precisará usar diretivas de conteúdo Para isso, precisamos digitar o conteúdo em vermelho. Se eu definir esse arquivo, como você pode ver, agora é impresso no estilo boda dans, enviamos os dados extras por meio das diretivas de conteúdo Agora podemos enviar várias propriedades por meio dessa mistura. Deixe-me mostrar outro exemplo. Desta vez, vou enviar seletor completo por meio dessas diretivas de conteúdo Para isso, vou comentar todas as linhas. Aqui, vou criar uma nova mistura na mesma proporção em que nosso nome de mistura é sabor. Dentro do calicis, vou usar apenas diretivas de conteúdo, adicionar a Para usar essa mistura, vou digitar include, adicionar a taxa, incluir nosso nome de mixagem é sabor. Então, dentro do calicis, primeiro, vou pegar um seletor e nosso nome selecionado é Classe um, então dentro da resistência de Cali, vou usar uma cor apropriada. Cor y, então aqui você pode ver usando essa mistura, vamos passar o seletor completo com propriedades Se eu definir esse valor, como você pode ver, ele cria uma classe dot class one e dentro dessa classe um, você define uma propriedade color. E para executar esse conteúdo extra, usamos diretivas de conteúdo Deixe-me mostrar outro exemplo como podemos usar diretivas de conteúdo Suponha que nosso seletor de classe um esteja dentro do ID um Para enviar esse conteúdo dentro do ID, podemos usá-lo dessa forma. Deixe-me te mostrar. Quero definir um IDH DAG e nosso nome de identificação é homem. Então, dentro da resina de Cali, vou passar esse recipiente Vou cortar esse conteúdo e colá-lo aqui. Se eu definir esse arquivo, como você pode ver, ele colocará o conteúdo da diretiva dentro do ID do menu. É por isso que ele imprime o Menu primeiro. Também podemos usar diretivas de conteúdo dessa forma. Agora o menu se torna seletor de pais e a Classe 1 se torna seletor de filhos Deixe-me mostrar outro exemplo uso de diretivas de conteúdo Vou comentar essas linhas. Primeiro, vou criar um botão seletor de botões Então, primeiro dentro do alyss, vou usar a propriedade border Borda de um pixel. Vou usar borda sólida, filho, e quero uma cor de borda. Ao mesmo tempo, quero criar um seletor Hober para esse botão Aqui eu vou chamar uma mixagem, que eu não crio. No vermelho, inclua. Inclua e nosso nome de mixagem é Hober. São os aliases, vou definir borda com borda com borda com borda com dois pixels Agora vou criar o nome de mixagem Her. Aqui vou digitar a mistura vermelha. Passe o mouse sobre a mistura. Então, dentro das calibragens, vou criar um seletor Posito para nossa classe Para isso, precisamos usar a coluna de login pessoal Hoger Então, dentro das calices, vou passar o conteúdo na taxa de conteúdo Usamos esse sinal de pessoa porque precisamos criar o seletor Her usando o botão Se eu definir esse arquivo, como você pode ver, primeiro, ele cria o seletor de botões e, em seguida, cria o botão Her seletor, e Boden com nossos dados extras Isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos mais sobre isso . Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial. 26. Tutorial de Diretiva de @conteúdo de Sass: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado às diretrizes de conteúdo Como você pode ver, já estamos no meu editor de código do Visual Studio, lado a lado, abro o Style lot, arquivo cs e o arquivo CSS Styllod. Na maioria das vezes, usamos diretivas de conteúdo com consulta de mídia Deixe-me mostrar um exemplo com consulta de mídia. Para isso, vou comentar todos os códigos anteriores, e aqui vou pegar uma tag corporal. Então, dentro do alyss, eu quero definir uma cor de fundo Antecedentes. Fundo cinza. E agora vou criar três consultas de mídia diferentes. Na tela de mídia vermelha e dentro dos versos redondos, vou usar MaxWPPTY max W Quero definir no máximo 1.300 pixels Então, dentro dos aliases, vou passar um seletor e o nome do nosso seletor Vou usar o mesmo seletor e a mesma propriedade. É por isso que vou copiar esta seção e colar dentro dos aliases aqui. Vou definir a cor de fundo vermelha Então, quando nossa resolução de tela coincide com essa consulta de mídia, ela define nossa cor de fundo vermelha e agora vou criar duas outras consultas de mídia para resoluções diferentes. Então, eu vou duplicar esta seção, e aqui vou definir 1.000 pixels Eu quero dizer cor de fundo azul. Azul. Então, com uma coroa de 1.000 pixels do Brasil, ela definiu nossa cor de fundo azul Novamente, vou definir outra consulta de mídia. Então, vou duplicar essa parte, e aqui vou dizer 800 Com 800 pixels, quero dizer cor de fundo verde. Aqui vou digitar verde. Esse é um método CSS normal. Se eu definir esse arquivo, aqui você pode ver o resultado. Como você pode ver em nosso arquivo CSS, ele é impresso como está, mas agora vou usar diretivas de conteúdo para quadrização de mídia Para usar diretivas de conteúdo, precisamos criar uma mistura No início, vou criar uma mistura na taxa de mistura. Eu quero usar esse mix para tela de mídia. É por isso que vou configurar a mídia de nomes de mixagem. Então, dentro dos vestidos redondos, vou passar um parâmetro, e nossa variável de parâmetro é weep Dentro do alorss eu vou passar esse código, tela de mídia Copie esse código e eu vou colá-lo aqui. Aqui eu vou passar por cima com a variável. Dólar. Então, dentro das calibragens vou usar diretivas de conteúdo, na taxa contida Em seguida, ponto e vírgula dois nesta linha. Se você quiser usar essa mistura, precisará incluí-la. Mas primeiro, vou comentar as linhas, as consultas da mídia. Eu não preciso disso agora. Agora vou incluir essa mistura com Include QR, a tarifa incluída E nosso nome de mixagem é mídia. Então, dentro dos parênteses, precisamos passar o valor Como você pode ver, nosso primeiro máximo é de 1.300 pixels. Aqui eu vou passar de 1.300 px. Então, dentro das calibragens, aqui vou passar nosso conteúdo adicional para diretivas de conteúdo Nosso primeiro selecionado é o corpo. Dentro do Calibrass, quero dizer o plano de fundo. Antecedentes. Tarifa. Como você pode ver, usamos resolução total de três telas de mídia, 1.300 pixels, 1.000 pixels e 800 pixels Eu quero duplicar esta seção duas vezes. Aqui eu quero passar 1.000 pixels. Com 1.000 pixels, quero dizer que é cor de fundo azul. Azul. Em nossa última equidade de meteoros, quero ultrapassar o valor 800 Máximo com 800 e aqui eu quero definir a cor de fundo verde. Se eu definir esse arquivo, como você pode ver, ele terá o mesmo resultado. Eu imprimo como está. Mas desta vez, não precisamos usar a palavra de consulta de mídia várias vezes. Transmitimos nosso conteúdo por meio de diretivas de e já criamos uma combinação para consulta de mídia Na seção Incluir, você pode alterar o tamanho da tela. Suponha que eu ultrapasse 700 pixels. Se eu definir esse arquivo, como você pode ver, defina nossa consulta de mídia de 700 pixels. Além disso, não só isso, você pode passar várias propriedades. Deixe-me te mostrar. Com o plano de fundo, quero dizer fronteira. Borda de dois pixels. Sólido. E a cor da nossa borda é branca. Vou configurar esse arquivo e aqui você pode ver o resultado. Agora com 700 pixels, ele definiu nossa cor de fundo verde. Também definiu uma borda sólida com a cor branca. Esse é o melhor uso das diretivas de conteúdo. Espero que agora esteja claro para você. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 27. Tutorial de Diretivas do Sass @media: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com o novo tutorial relacionado ao SAS. Neste tutorial, aprenderemos as diretivas de mídia SAS e as diretivas verdadeiras Vamos tentar entender o que são diretivas de mídia. Aqui você pode ver uma classe chamada contêiner, e dizemos contêiner com 1.100 pixels e centralizamos nosso contêiner usando margem Se criarmos mediaquery usando CSS, nesse caso, precisamos usar mediaquery Você pode ver que definimos um ponto de interrupção em 1.150 pixels e, dentro dessa consulta de mídia, definimos a largura do contêiner de 900 Quando a largura do navegador atinge 1.150 pixels, eles precisam reduzir a largura do nosso contêiner de 1.100 pixels para 900 Como você sabe, para fins responsivos, precisamos criar vários pontos de interrupção para diferentes tamanhos de tela Você precisa criar muitas consultas de mídia. Além disso, precisamos digitar sempre a largura do contêiner. Desnecessariamente, precisamos definir a largura do contêiner várias vezes. Para resolver esse tipo de problema, é necessário introduzir diretivas de mídia Para usar a diretiva de mídia, podemos lidar com essa situação. Então, vamos ver como podemos usá-lo e reduzir nossas linhas desnecessárias. Então, como você pode ver, finalmente, estamos no meu editor de código do Visual Studio e, lado a lado, abro estilo Dot CS e o arquivo CSS de estilo Dot. Eu já abro meu diretório CSS em nosso aplicativo Koala. Então, primeiro, vou criar uma classe, e o nome da nossa classe é container. Então, dentro da resina de Cali, vou definir a semana do contêiner de 1.100 pixels Além disso, vou definir a margem. Margem, quero centralizar o contêiner, então vou usar zero pixel. Além disso, vou usar o Auto Vile e agora quero definir consultas de mídia diferentes para diferentes pontos de interrupção, mas vamos digitar menos código sem parar Dentro dos aliases, vou criar a moeda de mídia à taxa media Tela de mídia e, dentro do processo redondo, vou definir o ponto de interrupção Vou digitar um hífen máximo com 1.150 pixels. Então esse é nosso primeiro ponto de ruptura. Então, com 1.150 pixels de largura, quero reduzir a largura do contêiner Para isso, não precisamos digitar container novamente, precisamos digitar com propriedade. Largura 900 pixels. Como você pode ver, ela usa metanfetamina aninhada Da mesma forma, vou criar dois outros pontos de interrupção. Então, vou ler essa seção duas vezes. Aqui, vou definir o máximo com 950 pixels. Na largura do navegador de 950 pixels, quero definir a largura do contêiner de 700 pixels Como você pode ver, não precisamos usar o seletor de contêineres o tempo todo Da mesma forma, com 700 pixels de largura, quero definir o contêiner com 500 pixels. Basicamente, você pode ver no meu arquivo CS que trabalhamos com apenas um seletor Mas se eu definir esse arquivo, como você pode ver, ele criará um total de quatro seletores diferentes Como você pode ver, nosso primeiro seletor é nosso contêiner e três outros seletores são nossos No SAS, se usarmos uma mídia dentro da seção de contêiner, nós a chamamos de nomes diretos de mídia. Aqui você pode ver a diferença. Em nosso arquivo CSS, toda vez dentro da tela de mídia, ele cria um seletor de contêiner Em seguida, dentro do seletor contínuo, ele ajusta o Mas em nosso arquivo cs, se usarmos diretivas de mídia, não precisaremos usar o seletor contínuo repetidamente Esse é o uso de diretivas de mídia. Vamos tentar entender nossas próximas diretivas, que estão na diretiva raiz Em nossos tutoriais anteriores, aprenderemos sobre o agrupamento SAS E aqui você pode ver o exemplo do aninhamento. Como você pode ver, há uma turma para pais dentro do copo principal, temos uma turma para crianças e também temos uma sub-classe para crianças e uma etiqueta cortada Como você pode ver em nossa tag principal, definimos com 1.100 pixels, e em nossa tag secundária, definimos a cor vermelha e, em nossa tag subfilha, definimos a cor rosa Se eu compilar esse arquivo, ele retornará esse código CSS Como você pode ver, ele cria um total de três seletores diferentes: seletor de pai seletor de pai e filho, além de criar seletor pai-filho e subfilho Como você pode ver, é criar desnecessariamente uma tag principal em nosso arquivo CSS Mas eu não quero que os pais sejam selecionados todas as vezes. Podemos removê-lo usando o SAS. Para resolver esse problema, o SAS introduziu equipes diretas na raiz. No próximo tutorial, aprenderemos como podemos usá-lo na prática. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 28. Tutorial de diretivas de raiz do Sass @at: É bom ver vocês. Neste tutorial, aprenderemos nas diretivas raiz Como você pode ver, lado a lado, abri o arquivo CS de pontos de estilo e o arquivo CSS de pontos de estilo. No começo, vou criar um grupo de nidificação. No início, vou pegar um ponto da turma principal e o nome da nossa turma principal é IM. Então, dentro dos versos de cali, vou usar a propriedade CSS e nome da nossa propriedade CSS é colorido, colorido Então, dentro dessa classe principal, vou criar outra classe. Quero criar uma subclasse e o nome da nossa subclasse é rapper item por item Então, dentro do caliss, vou usar a propriedade CSS e nossa propriedade CSS é cor Cor vermelha. Em seguida, vou usar outro seletor em nossa embalagem de itens, que é imagem Imagem dentro das brasas que vou tirar com a propriedade, nós, nós, 100% Então, fora desta embalagem de itens, vou fazer outra aula Quero criar outra subclasse desse item, e o nome do nosso seletor é dot item child Então, dentro da classe vou usar um plano de fundo de propriedade CSS Fundo rosa. Se eu definir esse arquivo, como você pode ver, ele será criado automaticamente no quarto seletor Nosso primeiro seletor é para nosso item, nosso segundo seletor é para embalagem do item e nosso terceiro seletor é para a imagem, que está dentro Nosso último seletor é o item selecionado por crianças. Agora, se você perceber que pode ver, repita sempre o item em vidro. Agora você decide que não quer classe de item para esta parte, para o item rapper e para nossa imagem Para resolver esse problema, o SRS introduz as diretivas raiz Você precisa digitar aqui nas diretivas raiz. Aqui eu vou digitar no vermelho na tropa. Então eu começo o Calibass, precisamos fechar essa classe após a tag de imagem Aqui eu vou fechar o cis e depois vou configurar esse arquivo Como você pode ver no meu arquivo CSS, ele remove o item do nosso seletor Aqui você pode ver que não há nenhum item de nome de classe. É um item impresso, uma imagem do rapper do item, mas em nosso seletor americano, você pode ver a classe do item novamente Esse é o uso das diretivas at root. Basicamente, são nomes de seletores desnecessários. Espero que você tenha entendido. Deixe-me mostrar outro exemplo de diretivas at root. Para isso, vou comentar esta seção, vou configurar esse arquivo. No início, vou usar uma mídia na mídia publicitária, nosso nome de mídia é impresso. Então, dentro do Caliss, vou pegar um item de classe Lepper Então, dentro do caliss, vou pegar outro seletor, e nosso nome de seleção é item Então, dentro das calices, vou usar a propriedade CSS e nossa propriedade CSS é cor, cor lida Se eu definir esse arquivo, você poderá vê-lo imprimir em nossa mídia. E dentro dessa impressão, você seleciona item por item. Em seguida, dentro do caliss , ele imprime na cor vermelha. Mas se você notar, verá que não há nenhuma propriedade CSS em nossa classe de invólucro de itens Essa propriedade é da classe do item, mas também seleciona esse seletor, o invólucro do item Mas eu não quero esse seletor de embalagem de itens. Se quisermos remover essa classe de invólucro de item , precisamos usar as diretivas raiz. Deixe-me te mostrar. Depois do invólucro do item, precisamos digitar em vermelho nas diretivas raiz Então precisamos começar nosso Calibase também terminar esse Calibase depois disso Se eu definir esse arquivo, como você pode ver, ele remove o item rapper e agora seleciona apenas a classe do item Como você pode ver, selecione diretamente o seletor de itens. Ele ignora o seletor do invólucro do item, o que é completamente desnecessário porque não há nenhuma propriedade CSS dentro da classe do invólucro do item Espero que agora esteja claro para ele. Uma coisa que você precisa lembrar é que as diretivas verdadeiras vêm com predefinidas e nós as chamamos Deixe-me mostrar um exemplo de como isso funciona. Primeiro, vou remover essas linhas, a embalagem do item. Então, dentro da mídia impressa, aqui vou fazer uma aula e o nome da nossa classe é container. E dentro do Cliivess aqui eu vou pegar 2 propriedades Nossa primeira propriedade é com 130 pixels. Além disso, vou pegar outra propriedade que é colorida, cor lida. Criamos esta tese para fins impressos. Se alguém tentar imprimir a página , imprimirá nosso contêiner com 130 pixels e leitura colorida. Mas em nosso site atual, eu não quero essa cor e nós. Para isso, aqui vou usar nossas diretivas at root. Na leitura na raiz. Dentro das cálices aqui eu vou usar as mesmas propriedades Mas aqui, vou mudar os valores. Para nós, vou usar 100 pixels e para cores, vou usar verde. Isso significa que, se alguém tentar imprimir nossa página da web , precisará retornar 130 pixels com a cor vermelha. Mas em nosso site, ele passa por 100 pixels e cor verde. Agora vou usar o valor predefinido das diretivas at root Dentro dos vestidos redondos, vou passar sem, sem e aqui precisamos passar um valor chamado media. Quer dizer, também faz parte da classe de contêineres, mas sem mídia. Depois de definir esse arquivo, você pode ver o resultado. Como você pode ver, nossa mídia impressa funciona ponto a outro e depois imprime sem mídia. Este é o CSS do nosso site e este é o nosso CSS impresso. Espero que agora esteja claro para você no próximo tutorial aprenderemos as diretivas de controle Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial