Sass passo a passo

1. Introdução: Oi, eu sou Lisa Catalano e este é passo a passo SAS. Eu criei este curso para pessoas que sabem CSS, mas não tentaram CSS pré processador ainda. Eu sei como trabalhar na Web pode ser esmagador. Quase todos os dias você ouve sobre alguma nova habilidade que você deve aprender a se manter atualizado. Toda vez que você sente que está ficando bom em uma coisa, você se vira e a melhor maneira de fazer algo é completamente diferente. Vou ser honesto e deixar você saber que eu realmente não queria aprender SAS. Eu estava muito ocupado no meu trabalho, criando um novo site usando back-end e front e tecnologias que eram um pouco novas para mim. Eu tinha muito do CSS já descobriu quando me disseram que eu tinha que usar SAS. Eu amo aprender coisas novas, mas eu não acho que eu tinha tempo suficiente para aprender SAS sem ser abrandado. Fico feliz em dizer agora que eu estava completamente errado. Aprender a sass foi muito fácil, e eu realmente cresci a amar no primeiro dia. Eu não posso dizer isso sobre muitas das tecnologias da Web que eu tentei aprender. Nos últimos cinco anos, SAS foi realmente fácil de pegar, e o pagamento foi grande. Então eu decidi fazer esta aula para encorajar aqueles de vocês que sentem que não têm tempo suficiente para outra tecnologia ou habilidade agora para passar um pouco de tempo comigo para aprender essa habilidade valiosa. Então, o que é SAS fica força e táticamente impressionante folhas de estilo, acordo com seu site, Sass é uma linguagem de metal em cima do CSS que é usado para descrever o estilo de um documento forma limpa e estruturalmente, com mais poder do que plana, CSS permite que o SAS fornece um texto mais simples e mais elegância para CSS e implementa vários recursos que são úteis para criar folhas de estilo gerenciáveis. Em outras palavras, é um pré processador para CSS. Você escreve seu CSS no formato SAS, e o que você escreve é compilado ou gerado no formato CSS padrão. Ele permite que você escreva seu código de forma mais organizada e simples. Ele traduz o que você direita para o CSS padrão. Eles são dois formatos de sass, e cada um tem sua própria extensão de arquivo. O ponto S A S S arquivos são o tipo de arquivo original mais antigo. Ele permite que você escreva seu CSS sem quaisquer colchetes ou semi Coghlan. Os seletores e propriedades são distinguidos pelo recuo. O formato de arquivo CSS do DAT é mais semelhante ao CSS normal, mas adiciona todos os auxiliares SAS como recuo, variáveis e muito mais. Qualquer arquivo CSS regular é um arquivo CSS ponto válido. Nós estaremos usando o formato de arquivo CSS dot s nesta classe. É mais fácil de se acostumar, e faz com que seja muito fácil converter um site existente para usar sass. Algumas das coisas boas que você pode fazer com sass são usar variáveis para salvar valores que são usados em muitos lugares. Você pode criar mixins ou extensões para que você não precise escrever o mesmo frio uma e outra vez. Você pode ninho. Seus seletores ajudam a organizar seu código, e você pode criar mais eficiência. Avaliar. Para sites de produção, existem outros pré-processadores CSS que você pode usar. Além de SAS, menos é a alternativa mais comum, e estilista é outra opção que tem um menor seguimento. Não é difícil mudar para um pré-processador diferente uma vez que você conhece um, então qualquer coisa que você aprender nesta classe deve ser facilmente traduzido para outro. SAS é provavelmente o mais popular, mas menos é em alguns grandes projetos, como o Twitter Bootstrap. Então você pode encontrar-se usando ambos no futuro ou qualquer outra coisa nova alguém venha com. O ponto é que uma vez que você entende como um pré-processador funciona, você tem essa habilidade, independentemente do idioma específico escolhido. O SAS é escrito na linguagem ruby, então você precisará do ruby instalado no seu computador. No entanto, você não precisa se preocupar em ter o Ruby instalado em seu servidor Web. Você só precisa dele onde você estará escrevendo seu CSS. Falaremos sobre a instalação do Ruby no SAS no próximo vídeo. Eu tentei estruturar esta aula em pequenos passos para que você aprenda tudo em uma sessão ou dê um passo de cada vez e se concentre em um novo conceito. Hoje, a escolha é sua. De qualquer forma, você deve ser capaz de passar por esta aula muito rapidamente, então vamos começar 2. Instalando Sass: instalar o SAS é simples, mas envolve o uso da linha de comando em seu computador. Sei que é aqui que alguns de vocês podem querer sair do ônibus porque a linha de comando assusta vocês. Mas eu encorajaria você a não se preocupar com isso e apenas seguir os passos que eu apresento. Há muito poder a ser ganho e entender como usar a linha de comando, e você realmente não terá que gastar muito tempo lá para usar o rabo. Mas ajuda se você entender o que é e como funciona agora. Existem muitas ferramentas lá fora que permitem evitar a linha de comando, especialmente se você estiver em um Mac. Mas eu vou me concentrar em usá-lo porque eu acho que é valioso superar qualquer medo ou medo que você possa ter de usá-lo. Este vai ser o passo mais complicado de toda a turma. Assim que passarmos por esse passo, o resto será fácil e só teremos que fazer isso uma vez. Então o primeiro passo é instalar o Ruby, e eu quero deixar claro para vocês que você não precisa ter o Ruby em seu servidor Web. Você só precisa tê-lo instalado nos computadores onde você vai estar fazendo desenvolvimento. Portanto, se você tiver uma área de trabalho e um laptop onde você trabalha, você precisará executar essas etapas em ambos os computadores, mas ele não precisa estar no seu servidor Web. Isso era uma coisa que eu estava preocupado quando comecei a usar ousadia, e acontece que não era nada com que eu precisava me preocupar. Os programas Ruby irá converter seus arquivos sass em arquivos CSS, e isso é o que vai acontecer em seu servidor Web. Então, se você está em um Mac, você não precisa fazer nada. Você já tem. Sala ser instalada com seu sistema operacional. Se você estiver no Windows, você precisa ir para os downloads de barra do instalador do ruby dot org e baixar a versão mais recente do instalador e seguir as etapas. Vou demonstrar esse processo em um momento, e então se você tiver Lennox, você só precisa instalar o pacote ruby. Então eu estou no site e eu vou escolher ladrão primeiro link de download porque essa é a versão mais recente. Há outras coisas que você pode instalar lá, mas é apenas o instalador principal, aquele no topo que você quer. Depois de ser baixado, você pode clicar no arquivo de download para ir em frente e instalá-lo, e a única coisa que você pode aceitar o padrão, você precisa aceitar a licença. Mas a única coisa que você realmente precisa prestar atenção aqui é que você quer verificar que o anúncio Ruby executou ALS para o seu caminho. Agora estou desligando para mim porque não preciso, mas você provavelmente vai querer ligá-lo. O que isso faz é deixar a linha de comando sempre saber onde seu rubi está. , se você tiver algum problema No entanto, se você tiver algum problema, por favor, publique uma pergunta na seção de perguntas e respostas, e eu tentarei ajudá-lo. O próximo passo é abrir a linha de comando, portanto, se você estiver em um Mac, precisará encontrar o programa de terminal. E se você não tem certeza de onde isso está, você pode digitá-lo no centro das atenções, e ele deve encontrá-lo para você. Você pode querer encaixá-lo para que você tenha acesso a ele sempre. Se você está no Windows, você vai encontrar o programa de comando ou C M. D. E se você está no limite, você provavelmente já está na linha de fãs e você não precisa de ajuda com a gente. Vou demonstrar em um computador Windows como chegar lá. Estou indo para o botão Iniciar, e eu vou apenas digitar CMD. Eu confinei isso dessa maneira. Ou também posso ir para todos os programas e encontrar a pasta onde Ruby foi instalado e posso usar o prompt de comando start com Ruby. O próximo passo é instalar o Sass, e instalamos o SAS usando os gems Ruby. Ruby Gems é um gerenciador de pacotes para extensões ruby, e Sass é uma extensão ruby. Foi escrito em Ruby. Esta é uma maneira que você pode instalar programas e extensões usando a linha Klan em vez de ter que ir para o site, baixar os arquivos, extraí-los e instalá-los. Então, é muito mais rápido se você se acostumar a instalar as coisas dessa maneira. Portanto, é um pequeno recurso agradável do Ruby, e o comando é muito simples, e é o mesmo em todos os sistemas operacionais. São apenas sacos de instalação de gem, então pode levar um minuto ou mais para instalar, mas geralmente é bem rápido, e agora está instalado. O passo final não é realmente um passo que precisa ser feito. É completamente opcional. Mas uma coisa que eu gosto de fazer depois de instalar algo é apenas verificado a versão e certifique-se de que tudo instalado. Ok, então você apenas digita Ruby Dash V para verificar a versão rubi e taxa de traço SAS para verificar a versão SAS. Você também pode digitar dash age para obter uma lista de todos os comandos SAS. Então o SAS está instalado agora e estamos prontos para ir. Eu provavelmente deixaria a linha de comando aberta porque você vai precisar dela para compilar seus arquivos sass. Mas no próximo filme vamos olhar para o projeto que vamos trabalhar nesta aula. 3. Visão geral do projeto: Nós vamos trabalhar em um projeto real nesta classe, não um site real, mas algo um pouco mais substancial do que apenas um monte de demos. Usaremos um projeto que criei há alguns anos para uma aula de design. Não é um site ao vivo, mas tem algumas páginas, e é suficiente para nós realmente converter para sass e ver os benefícios de usá-lo para escrever nosso CSS. Tenho um link para o código inicial do projeto listado nas notas da lição. Você também pode obter o código para o meu repositório hub get. Depois de cada etapa, eu estou confirmando as alterações e marcando-as para que você sempre possa encontrar o código para qualquer etapa aqui. Ao alterar a tag, não fornecerei um link de download em cada etapa. A intenção é que você deve tentar fazer as alterações você mesmo e jogar com um código para ver como ele funciona. Isso significa que você precisa pausar os vídeos ou tentar fazer o trabalho. Depois que você assistir o vídeo, eu vou estar me movendo rapidamente e não vou converter completamente tudo no código para sass. Vou fazer o suficiente para explicar os conceitos e seguir em frente após cada vídeo, talvez você queira tentar encontrar mais exemplos para implementar o conceito. A partir dessa lição, usarei colchetes como meu editor. É um editor de código aberto gratuito da Adobe. Eu escolhi porque ele tem uma boa visualização de vida do seu código quando você está no navegador Chrome . Dessa forma, não preciso atualizar depois de fazer alterações no código. Você obtém essa visualização ao vivo clicando neste pequeno ícone quando você tem seu arquivo HTML aberto . Então este é o site. Ele tem uma página inicial, e há algumas transições no estado de navegação e foco. Se você clicar no primeiro vídeo, você pode acessar um exemplo de página de instrutor. Isto tem algumas abas com vistas diferentes lá. Há também uma página de categoria aqui. Se você clicar no link de tipos de treino e clicar no logotipo, você pode voltar para a página inicial. São três páginas, e deve ser suficiente para trabalharmos. Há algumas coisas no código que estão um pouco datadas porque eu fiz isso há mais de dois anos, e há provavelmente melhores técnicas que poderíamos usar. Agora também há alguns erros e erros aqui. Isso foi para uma aula de design, e eu estava focando em como ele parecia e não no código. Mas este será um bom lugar para começar a usar algum sass sua primeira tentativa de usar sass por conta própria, talvez para incorporá-lo em um site que você já escreveu algum CSS para. Então eu pensei que essa abordagem para aprender a sass seria a melhor maneira. Você não precisa usar ah, 100% rápido para o seu código. Você pode escrever CSS normal e Sprinkle em algumas técnicas sass enquanto você ainda está aprendendo os conceitos. À medida que você se torna mais confortável com as técnicas que estou ensinando aqui, você pode começar a escrever seu código e sass desde o início, e é aí que ele se torna muito poderoso e rápido. Se olharmos para o código, não vamos nos concentrar em tudo. O arquivo principal que nos concentraremos é este arquivo CSS estilo, que é onde o CSS principal está. Se olharmos para o HTML, podemos ver que estamos ligando alguns arquivos CSS. Há este arquivo I e Onley, que você pode nem precisar mais, dependendo de quais versões do IE você está suportando. Há também um arquivo CSS portátil, que é usado para exibir o site em poucas portas menores. Este não é um verdadeiro site responsivo, mas ele tem um olhar ligeiramente diferente para visão menor derramado. Então, se alguém estiver vendo isso em seu telefone, ele ainda será capaz de ver tudo. Mas só mudou um pouco. Nós realmente não vamos mudar nada no arquivo CSS handheld, mas qualquer coisa que falamos em estilo CSS poderia ser usado em CSS handheld também. Se quisermos ver o trabalho de visualização ao vivo, podemos apenas alterar algum texto no HTML. Vou alterar os novos lançamentos para o mais recente, e ele mudará imediatamente na porta de exibição. E então se eu desfazer isso, ele mudará novamente. Ele muda assim que eu salvar. Então este é o projeto que vai estar trabalhando. Se você ainda não baixou os arquivos iniciais, faça isso agora. Se quiser tentar trabalhar comigo. Se você não quiser fazer isso, você também pode tentar abrir um de seus próprios sites e tentar acompanhar. Fazer alterações em seu próprio código na próxima lição irá converter este site para usar SAS. 4. Como converter projetos existentes em Sass: nesta lição, nós vamos aprender como compilar arquivos sass. Vamos alterar o arquivo CSS ponto estilo que a página da Web usa em um arquivo SAS ou um arquivo CSS dot s . A única coisa que precisamos fazer é renomear Arquivo. Eu vou chamar os arquivos CSS dot s arquivos sass de agora em diante, porque é muito mais fácil de dizer. E será menos confuso quando compararmos com arquivos CSS comuns. Ao trabalhar com sass, você faz seu trabalho no arquivo SAS, que então é compilado em um arquivo CSS para suas páginas da Web. Compilar SAS envolve um comando simples digitado na linha de comando. Você muda para o diretório do seu projeto, o diretório onde seu CSS está e você digita SAS, que significa que você vai executar um comando SAS para traços, que invoca uma opção SAS. Assista sem espaço antes. Isto é para dizer que você deseja assistir um arquivo ou uma pasta o nome do arquivo, que é o arquivo que você deseja assistir Colon para indicar que você está listando os arquivos a serem observados e, em seguida, o nome do arquivo onde você deseja que a saída vá? Este comando levará seus arquivos sass se eles têm a extensão de arquivo CSS dot s ou a extensão de arquivo ponto s A S s s e colocá-los através do compilador ou pré processador e ele irá cuspir o arquivo CSS. Então vamos tentar. Tenho o meu editor aberto. Você pode ver que eu estou ligado ao estilo que CSS Eu também estou ligado a handheld, que nós não vamos mudar agora. Estou iniciando a página da Web clicando no botão de visualização ao vivo. Então, aqui está a página e tudo parece que deveria Agora eu vou renomear arquivo These E ss em dot s CSS. A visualização de vida não está lidando com isso, então eu tenho que atualizar a página. Quando olhamos para a página da Web, agora é apenas mostrando html simples renderizado. Não há CSS mais porque renomeamos o arquivo para que possamos corrigir isso fazendo o relógio. Comandante. Eu estou trazendo a linha do homem e eu estou indo para o diretório CSS. Se eu digitar d i r ou l s. Se eu estiver em um Mac nossa máquina de limites, eu vou ver todos os arquivos no meu diretório e você pode ver esse arquivo sass aqui. Então agora podemos compilá-lo em CSS irregular. Estou digitando SAS dois traços Watch, em seguida, estilo. Isso é CSS dois-pontos estilo ponto CSS. Agora você pode ver o comando executá-lo criado são estilizados arquivo CSS e ele diz sobrescrever Cada vez que ele escreve para o arquivo CSS, ele vai dizer que Observe que não estamos recebendo o prompt de comando mais. O SAS está ali sentado. Ele está aguardando ou observando alterações em nossos arquivos SAS. Sempre que ele vê uma alteração, ele irá recriar o CSS normal. Há outro problema entre parênteses. Ainda é um projeto novo, então ainda não é perfeito, mas não reconhece quando tenho novos arquivos adicionados ao diretório. Então ele não está encontrando o arquivo CSS dot, então eu preciso fechá-lo e reabri-lo. Agora eu posso vê-lo e eu tenho que reiniciar a visualização da vida e agora podemos ver que o site está volta ao normal porque há um arquivo CSS. Nada mudou. Nós ainda não sabemos, fizemos quaisquer alterações no site, mas se olharmos para o arquivo SAS e o arquivo CSS. Eles parecem quase exatamente iguais. Haverá algumas diferenças de formatação e espaçamento, mas fora isso, elas são as mesmas e devem ser as mesmas porque nós realmente não usamos nenhum cess e texto ainda. Agora, se quisermos ver como isso funciona, podemos mudar algo no arquivo SAS. Vou ao seletor de corpo e mudar a cor de fundo para vermelho. Agora, antes de salvar o arquivo, quero que você olhe para a linha de comando e quando eu salvá-lo, observe o que acontece. O arquivo SAS foi alterado, então ele reescreveu o arquivo CSS. Você pode ver que diz “sobrescrevendo”. Parece que a visualização ao vivo não está detectando a alteração. Então eu vou apenas clicar na janela do navegador. E agora parece que a mudança e a mudança é o estilo. E então eu posso configurá-lo de volta ao normal e podemos ver a mudança detectada e a cor de fundo mudou de volta. Então é assim que você usa o SAS. Sempre que você estiver modificando seu CSS, você só precisa se lembrar de iniciar o comando watch. Você o deixa funcionando em segundo plano enquanto você está trabalhando. Você realmente não precisa prestar atenção nisso a menos que haja um problema. Então, para resumir, você inicia o comando SAS watch, você faz suas alterações nos arquivos SAS e, em seguida, sass criará seu CSS para você. 5. Variáveis: A primeira característica do rápido que eu quero falar sobre são variáveis, e isso é porque as variáveis são o que me vendeu no SAS. Se fosse a única característica do cess, eu provavelmente ainda iria querer usá-lo. CSS vai eventualmente ter variáveis, mas ainda não tem. E, claro, mesmo uma vez que eles começam a ser implementados, vai levar algum tempo para que todos os navegadores estejam a bordo. Então vamos ver como as variáveis SAS funcionam e como você pode acelerar seu desenvolvimento com, um, um, você define uma variável com um cifrão que você poderia nomear sua variável. Quaisquer palavras usando uma combinação de letras sublinhados e traços. Depois de nomear sua variável, você dá um valor a ela. O valor de sua variável pode ser um valor hexadecimal para uma cor, uma cadeia de números de texto ou às vezes quedas de turnê. Depende de onde você vai usar a variável. Para usar a variável, você deve defini-la primeiro, e então você apenas usou o nome da variável onde quer que você teria digitado o valor da variável. Se olharmos para o CSS que eu defini no projeto, você verá que eu coloquei um comentário na parte superior do arquivo para as cores principais usadas no projeto. Você pode ver como elas correspondem às cores na página da Web. Mesmo colocar os comentários na parte inferior para que eu sempre tenha acesso fácil aos valores de cor quando eu estou trabalhando em um projeto usando sass mix que desnecessário porque podemos facilmente mudar a cor em um lugar, se precisarmos. Então vamos fazer nossas cores nas variáveis. Agora eu vou mover este comentário para baixo para onde eu quero que as variáveis definidas no código. Da próxima vez as variáveis tiveram nomes significativos? É melhor não nomear as variáveis de cor como azul, porque se o design mudar, os nomes não farão mais sentido. Eu estou usando base e sotaque agora eu vou fazer uma busca e substituir então eu confinado em todos os lugares . Eu uso essas cores e as substituo pela referência da variável. Eu só preciso ter cuidado para não substituir a cor da definição da variável, e eu realmente fiz isso no último, então eu posso simplesmente desfazer isso. Agora eu estou me certificando de que eu estou assistindo os arquivos CSS da linha de comando e então eu posso voltar para o editor e salvar minhas alterações, e parece que há um erro. A mensagem diz-me que o problema está online 29. Então eu vou olhar lá. Parece que eu tenho uma referência à minha variável antes de ela ser definida. Então eu preciso mover minhas definições de variáveis para cima no arquivo. Normalmente colocá-los no topo após o CSS reset para evitar isso. Mas eu não peguei no lugar certo. Então desta vez funcionou. E se olharmos para o CSS, você pode ver que onde definimos as variáveis, não há código lá. Podemos apenas ver o comentário porque isso não é válido. CSS. Em vez disso, quando foi compilado, ele procurou o nome da variável em qualquer lugar do código e substituiu-o pelo valor real da variável. Agora, se olharmos para o site, as cores ainda ficam boas. Poderíamos também criar uma variável para o fundo. Eu não tenho um monte de declarações divertidas no CSS porque eu mudei o Fundo de Corpos e ele entrou cascata ao longo de toda a página. Mas podemos tentar fazê-lo aqui de qualquer maneira porque há momentos em que você está usando vários fundos em um site. Vou fazer uma variável chamada fonte base e usá-la no corpo. Então, na verdade, tudo isso não é muito excitante. Converter CSS para usar variáveis ainda leva algum trabalho, mas a grande coisa sobre isso é quando você decide que deseja alterar um dos valores. Digamos que eu queria que a cor do meu sotaque fosse um verde ligeiramente diferente. Eu posso mudar o valor das variáveis, e agora é uma cor mais brilhante e eu só tenho que mudá-lo lá apenas em um lugar. Esse é o poder do audaz e o que o torna agradável de usar. É fácil e indolor modificar seu código. Então o CSS foi regenerado. E quando olho para o site, as cores mudaram. Infelizmente, o verde está em meus ícones, as imagens, então as cores do ar fora dele, então essas precisariam ser mudadas também. Se eu realmente quisesse fazer essa mudança, se eu estivesse fazendo este site hoje, eu provavelmente faria as imagens brancas com fundos transparentes e depois colorir o CSS de fundo para torná-lo mais flexível. Então eu vou mudar isso de volta e tentar mudar a cor base para preto, e eu posso ver rapidamente a diferença no fundo e botões. Uma das grandes coisas sobre isso é que você pode fazer algum trabalho de design no navegador, onde você realmente começa a ver como as coisas ficam. Você não precisa estar no Photoshopped para jogar com seu design, então para resumir, para declarar uma variável, apenas lembre-se de defini-la na parte superior. Comece com um cifrão antes de dar um nome. Coloque o valor no final e, em qualquer lugar que você quiser usar esse valor, basta digitar o nome da variável. E se você quiser alterá-lo, você só precisa mudar o valor das variáveis. Na próxima lição, falaremos sobre como o SAS lida com comentários um pouco diferente do CSS normal. 6. Comentários: neste vídeo. Eu quero falar sobre comentários com sass. Parece uma coisa menor, mas eu realmente aprecio as pequenas diferenças entre comentários CSS regulares e comentários SAS . Em CSS, você coloca seus comentários dentro de uma barra mais Asterix. Você também tem que fechar o seu comentário com uma barra Asterix plus. Esta é uma sintaxe muito comum para comentários em muitas linguagens de programação. Commons conspirar homem várias linhas desta forma, e isso pode ser útil quando você tem um grande bloco de texto que você quer em seus comentários . O problema é que essa combinação de chaves pode ser uma dor para digitar. Você sempre tem que fechar o seu comentário. Não pode começar a comentar. SAS permite que você use comentários de linha única em vez disso, que eu acho mais fácil anúncio Toe para um comentário de linha única. Basta digitar duas barras e qualquer coisa seguindo essas barras nessa linha se tornará um comentário novamente. Este é um comentário no imposto em muitas línguas. No entanto, CSS regular não permite comentários de uma única linha, então tê-los em sass é um bom recurso. Você pode usar ambos os tipos de comentários em seus arquivos SAS. Os comentários de linha única não serão adicionados ao seu CSS. Os comentários de várias linhas serão adicionados. Pessoalmente, eu tento apenas usar o formato de duas barras porque eu não preciso de comentários no meu CSS. Preciso deles nos arquivos do SAS, que é onde edito meu código. Então, eu tenho meu arquivo SAS aberto e estou observando alterações no arquivo SAS. Se olharmos para o código existente, você pode ver todos os comentários estão mostrando como cinza. Isso ocorre porque o tema do editor de texto define comentários como Gray. Estes são todos multi-linha tipo porque isso era necessário quando o sorriso era um arquivo CSS regular . Eu vou mudar esses comentários para ser o tipo de linha única com duas barras. Vou deixar este comentário como um comentário CSS regular para que possamos ver a diferença quando salvamos o arquivo. Quando olhamos para o CSS, você pode ver que há muito poucos comentários lá. Há um que eu queria salvar e há alguns que eu sinto falta. Os comentários são muito úteis para manter seu CSS limpo e organizado para mais tarde quando você quiser fazer alterações no design. Você não precisa deles em seu CSS final, entanto, usando comentários de estilo SAS permitirá que você comente seu código tanto quanto você quiser sem adicionar nada ao CSS real. 7. Nidificação: aninhamento é uma característica de rápido que permite aninhar seus seletores dentro de outros seletores em vez de ter que digitar todas as tags em seu seletor, como H um e A para uma marca âncora dentro de um H. Você pode nos dar a etiqueta de âncora dentro de seus suportes H um. Isso significa que você não precisa continuar redigitando h uma tag uma e outra vez. Quando o SAS compila, ele cria o seletor de comprimento total, adicionando o seletor superior ao que você aninhou dentro. Ele realmente ajuda a manter seu CSS organizado, que é a principal razão pela qual eu gosto Nestea. Você também pode saber sub propriedades de coisas como fonte, plano de fundo ou borda. Você pode ver aqui estavam aninhando tamanho da família e peso dentro dos suportes de fundos. Eu realmente não uso isso em texto porque eu geralmente prefiro o texto de Hansen curto, mas algumas pessoas acham útil, então vamos usar alguns ninho een no projeto. Podemos ver que o primeiro seletor não reset ou baseado aqui é o corpo. Agora, é aqui que podemos criar alguns problemas. Tudo na página vai ser um filho do corpo, então tecnicamente, você poderia aninhar todos os seus seletores dentro do seletor do corpo, mas nós não queremos fazer isso. Não há razão para adicionar corpo aos outros seletores. E se não houver uma razão para ter essa tag adicional em seu seletor, você não deve confundi-la, então vamos deixar essa seção em paz. Temos uma situação semelhante com o recipiente, que é o contêiner de 960 pixels de largura do conteúdo da página. Então, isso traz à tona um ponto importante. Uma das queixas sobre o SAS é que ele pode incentivar CSS ruim. Não sei se isso é verdade, mas uma razão pela qual poderia fazer isso é por causa de desagradável. Usando nidificação torna tentador bagunçar tudo porque parece agradável e organizado. Mas você realmente só deve aninhar seus seletores se você precisa da especificidade que eu encontrei ao trabalhar em sites maiores que se eu apenas adicionar tags adicionais classes ou I ds aos meus seletores quando eu realmente preciso deles, o CSS é mais fácil manter e trabalhar com. Um objetivo comum que as pessoas citam é manter o seu aninhamento para dois ou três níveis. Claro, isso é apenas uma diretriz, e eu posso estar quebrando isso aqui em um site menor. Isso não é tão importante, mas quando você começa a trabalhar em sites de grande escala com muitos CSS, isso se torna mais importante. Então eu vou me concentrar na área de cabeçalho primeiro. É possível que eu nem precise incluir Cabeçalho e todos os meus seletores aqui. Mas eu não vou re fator o código agora além de tentar convertê-lo para sass. Então eu vou começar com este h um e movê-lo para cima e recuado para deixar claro que eu estou aninhando . Em seguida, removerei o cabeçalho da palavra do seletor. Se eu deixá-lo em, o CSS não seria correto porque ele iria compilar dois cabeçalho H um em vez de apenas cabeçalho h um. Posso repetir este processo com todos os outros seletores que começam com cabeçalho. Vou pegar este grupo grande e cortar e colá-lo acima, recuado e substituir o cabeçalho da palavra por nada. Agora parece com este seletor. O P não foi agrupado com os outros, então eu vou movê-lo uma ondinha e há na verdade dois eleitores de peças de cabeçalho diferentes no meu código. Este é um bom benefício de fazer essa mudança porque ele ajuda você a limpar seu código e organizá-lo Então esses tipos de problemas se tornam mais evidentes. Eu só preciso de um seletor p de cabeçalho, então eu vou corrigi-lo agora. Eu também vou movê-lo mais alto porque eu geralmente gosto de manter meus seletores menos específicos no topo. Agora eu posso fazer um pouco mais em amassar por conta. É provável que eu realmente não precise aninhar a conta de classe dentro do cabeçalho no site pequeno . Mas se ele se tornar um site real, eu poderia precisar dessa especificidade. Então, vou deixar agora. Quero ter certeza de que estou olhando para mudanças para ver se cometi algum erro. Vou salvar o arquivo e parece que tudo foi compilado. Tudo bem. Vou dar uma olhada rápida no cabeçalho e mostra que as coisas ainda funcionam. Ok, eu não vou fazer você me assistir fazer o resto do CSS Em vez disso, Se você quiser ter certeza de que você realmente obter este conceito, Eu recomendo que você pausar o vídeo e tentar fazê-lo em seu próprio país. Ainda há várias áreas para trabalhar, como a área NAB, o jogador de área de listagem da barra lateral. E ainda mais do que isso, vou te mostrar rapidinho. O que eu mudei aqui. Eu não fiz a área do valete. Eu aninhava-o ainda mais nos seletores UL e aliados. A única coisa que eu não aninhei foi isso, que tem uma vírgula separando um seletor de rodapé. Então, há dois seletores separados nesta linha, então eu não queria estragar isso porque iria estragar o seletor de rodapé. Eu fiz o rodapé para baixo na parte inferior, a seção de tipos, que é para este menu de sobreposição. Aqui eu aninhado o código valete jogador, que faz parte da segunda página, e havia mais pontos que eu aninhado. Se você quiser ver o estado completo do meu código, vou compartilhar um link para o código no Get Hub para que você possa comparar suas alterações com as minhas. O último ponto que eu quero dizer é que quando você está aprendendo a sass pela primeira vez, é uma boa idéia dedo do pé. Olhe para o CSS de saída. Depois de salvar seus arquivos sass, ver o que o pré processador está fazendo com seu sass irá ajudá-lo a aprendê-lo mais rápido. Se olharmos para a área do Chapeleiro. Você pode ver que a saída CSS se parece com o código original. Vemos Cabeçalho H um novamente. Se olharmos para a área do valete, podemos ver agora você e todo o grupo de seletores nessa linha. A única diferença real é o inventar no novo arquivo. O aninhamento é um recurso útil do SAS porque você pode digitar menos, especialmente quando você está criando seu CSS do zero. Ele ajuda você a manter seu código organizado e mais fácil de ler e manter. deve ser usado com cautela entanto,deve ser usado com cautela. Lembre-se do dedo do pé na Li ness quando precisar. Os seletores menos específicos geralmente são mais fáceis de manter quando você está escrevendo seu CSS. 8. Expandir o efeito: neste vídeo, vou falar sobre o comando extend e SAS Extend é uma maneira de um seletor herdar todas as propriedades de outro seletor. Impede a necessidade de duplicar código. Ele poderia ser usado para definir conjuntos de propriedades que um grupo de elementos poderia compartilhar. Ele se estende para uma lista separada por vírgulas de seletores. Neste exemplo, temos algum estilo para um botão. São os estilos de base para um botão que a maioria dos botões do site usará. Você pode então ter outros botões que terão esses estilos, mas você pode personalizá-los com propriedades únicas também. Isso impede que você precise copiar todas as propriedades duplicadas para esses botões especiais que você pode ver quando o SAS é compilado. Ele apenas adiciona a classe especial para o seletor de botões, e ele só deixa as propriedades únicas sobre os especiais. Último seletor abaixo. Escrever seu código com o comando EXTEND permite que você mantenha seu código mais curto e organizado antes de entrarmos em nosso projeto. Vamos tentar jogar com um exemplo usando este conceito de botão. Eu tenho esses dois arquivos iniciais que você pode baixar no teste de etapa anterior. HTML é uma página da Web simples com um botão e uma div com uma classe de C T A. Para chamada à ação. Há também um arquivo SAS de teste, com algumas variáveis para a cor e fonte e os estilos de botão base. Você pode ver que o arquivo HTML está sendo vinculado para testar CSS, que ainda não existe, então é por isso que nossa página não tem nenhum estilo. Podemos criar o CSS observando o arquivo CSS de Deus s teste. É o mesmo comando que já usamos, mas desta vez substituímos a palavra estilo por teste. Houve uma atualização para colchetes desde que comecei a filmar esta classe, então agora eu posso apertar F cinco e atualizar a pasta para que eu possa ver CSS teste sem fechar e reabrir o editor. Quando eu clico na minha pré-visualização, você pode ver os estilos no botão. Até agora, não há nada de novo aqui. Agora, se eu quiser que a chamada à ação Div toe se pareça com meus botões, mesmo que não seja realmente um botão, eu posso usar teatro tendem comando. Então, no arquivo SAS, vou usar o seletor de classe c t a e digite. Adicionar botão estender. Isso significa que todos os estilos do botão serão aplicados a qualquer coisa com o C t uma classe . Quando eu salvá-lo e, em seguida, clicar no navegador para ter certeza que ele reconhece a mudança você pode ver que o diff agora se parece com o botão, com exceção do fato de que a largura é 100% da porta de visualização em vez de um tamanho normal de botão. Isso é porque estamos lidando com um mergulho em vez de botão. É sempre bom olhar para o CSS gerado, e podemos ver que a classe C T A foi adicionada à lista de seletores no botão para que eu possa adicionar um com para a classe c t A e tornar o centro técnico alinhado. Vou salvá-lo e podemos ver as mudanças no navegador. Então vamos olhar para o CSS. As propriedades únicas para ver Classe TA estão agora em seu próprio preto de código. As propriedades que são compartilhadas por causa da extensão ainda estão agrupadas, então agora podemos olhar para o nosso projeto e encontrar lugares para usar isso em extensão. Vou fechar os arquivos de teste e abrir os arquivos do projeto Em vez disso, eu também preciso parar de assistir teste e começar a assistir estilo novamente. O código que estou repetindo muitas vezes sem alterações é a propriedade de transição. Como esta é uma propriedade CSS três, há várias linhas repetidas por causa de todos os prefixos de fornecedor que precisamos. Meu primeiro uso de transição é na navegação, onde a cor de fundo muda quando você passa o mouse sobre os botões. Só estou fazendo a transição da cor de fundo aqui. Estou usando uma duração de 0,3 segundos e facilitando o tipo de facilidade em. Se você não estiver familiarizado com transições, uma transição é uma mudança suave de um estado para outro, que possamos fazer a transição entre cores, tamanhos e muito mais. Normalmente estes ar feito quando o estilo muda no pairar. Você não coloca o código de transição nos estilos de foco, no entanto, você os coloca nos estilos base. Isso permite que a transição ocorra quando você passar o mouse sobre algo, e também quando você parar de pairar. Se procurarmos outros lugares com transição, podemos ver que há uma transição sobre os recém-chegados com um pequeno pop-up com o tipo de trabalho fora e nome. Essa transição usa tudo porque está fazendo a transição de outras propriedades e não a cor do plano de fundo . Se você diz todas as propriedades que são diferentes em pairar, vai transição, neste caso, foram realmente fazer a transição da posição e opacidade da caixa para trazê-lo em vista. Em geral, é melhor direcionar as propriedades que você está realmente fazendo a transição em vez de usar todas por motivos de desempenho. Mas a realidade no pequeno site é que ele não vai doer, então eu vou usar tudo na minha transição configurado em todos os lugares. As outras transições estão focadas no menu pop-up e na página de tipo de treino, o plano de fundo se expande e se torna maior. Então eu vou configurar uma propriedade de transição base usando a transição de classe. Eu realmente não tenho nada na página com uma classe de transição, mas eu estou chamando isso porque faz sentido. Vou copiar as quatro linhas de código aqui, usando tudo para que as propriedades façam a transição. Agora, Em todos os lugares que eu tinha o código de transição, eu simplesmente substituirei essas linhas com a transição de DOC estendida. Agora eu vou salvá-lo e vamos olhar para o CSS. Você pode ver que depois da minha aula de transição, eu tenho os quatro seletores onde transição estendida. Estão todos agrupados aqui usando o mesmo código de transição. Se eu procurei a propriedade de transição em todo o meu CSS, eu não vou encontrá-lo em nenhum outro lugar além de aqui. Este código é bom, mas o estranho é que a classe de transição não é realmente necessária. Não há tags no meu código que tenham isso como uma classe, e parece estranho tê-lo no meu CSS final. Não machuca nada, mas não é necessário. A razão pela qual eu não fiz, no entanto, é porque precisamos de um seletor de base para definir nossas propriedades de transição. Nas primeiras versões de ousadia, você tinha que aceitar essa estranheza. Mas versões posteriores do Sass adicionaram o que é chamado de espaço reservado. Um espaço reservado permite configurar uma classe base e não o obriga a colocá-la em seu CSS. É como uma super variável. Você define um espaço reservado com o símbolo de porcentagem e, em seguida, o nome. Em seguida, você define todas as propriedades que você deseja, o espaço reservado para ter. Então, em nosso exemplo, a única coisa que precisamos mudar é a referência à transição de classe com um período para uma referência ao espaço reservado de transição com uma porcentagem simples. Temos que mudar isso em todos os lugares que estendemos a transição também. Agora, se olharmos para o CSS, você pode ver que não temos mais essa classe desnecessária de transição. A única coisa que usa a transição são os quatro seletores que precisam dela. É uma pequena alteração, mas torna seu CSS mais preciso e você não cria seletores desnecessários com o espaço reservado. Resumir em extensão é uma ótima maneira de evitar muita duplicação de código. É especialmente útil para CSS três seletores que exigem muitos prefixos de fornecedor ou qualquer tipo de estilo que você está repetindo em todo o seu site. Se o código que você está duplicando não pertence a um seletor específico e você deseja criar um conjunto genérico de código que você pode estender, o espaço reservado pode ser usado nesses casos. 9. Mixins: um Mixon é outra maneira de organizar o código que é duplicado repetidamente em seu CSS. É semelhante ao add extend, mas com mix ins, você pode especificar valores de propriedade diferentes passando e argumentos. É diferente de estender em que todo o bloco de código de sua mistura será copiado para o seletor. Isso pode tornar seu código mais longo. Use-o quando os valores das propriedades forem diferentes em todo o seu site. Se eles permanecerem os mesmos usados em extend em vez disso, vamos começar imediatamente com um exemplo. Eu estou em textos sublinhado mistura dot html, que tem três mergulhos nele. O que eu quero fazer com esta página é estilo cada div como uma caixa colorida. Em última análise, cada caixa terá um tamanho diferente, mas começaremos por ter todos do mesmo tamanho. Cada uma dessas dibs tem um nome de classe exclusivo e algum texto. Os links de arquivo para testar esse CSS, que realmente existe na minha pasta. Mas nenhum dos CSS existentes vai estilizar este HTM atual Oh, então não vemos nenhum estilo na página ainda, então se olharmos o arquivo SAS, é o mesmo arquivo que acabamos com após o último exemplo. Eu quero definir uma fonte base no corpo do arquivo para que todo o texto use o fundo baixo em vez desta vez. Romano. Eu vou usar o fundo baseado no sinal de dólar variável, que já está para encontrar eu vou assistir o arquivo de bunda do teste Então agora podemos ver que a fonte mudou. Agora, em vez de começar com uma mistura, vou rever como faríamos isso com essa extensão. Quero criar algumas caixas para cada DIV. Vou usar o espaço reservado, sintaxe e dizer caixa de sinal percentual e, em seguida, dar-lhe propriedades A com alta margem e preenchimento. Então eu vou dar-lhe uma cor de fundo usando a variável de acento. Agora posso estender a caixa para cada um dos mergulhos. Estou a torná-los únicos porque a minha suposição é que cada caixa terá algumas propriedades únicas . Se não o fizessem, eu atribuiria a todos o mesmo nome de classe. Vou guardá-lo e depois podes ver as caixas a tomarem forma. Agora, se olharmos para o CSS, você pode ver cada classe em uma lista com todas as propriedades caixa Abdic atordoado, cria código agradável, conciso. Agora vamos tentar com o Nixon. Então a sintaxe para isso é misturar atos. E então você dá a mistura no nome então eu vou dizer na caixa de mistura para cada caixa. Tenho de o alterar para dizer na caixa de inclusão, quando digo que nada mudou, como seria de esperar. Se olharmos para o CSS, no entanto, parece diferente. Cada classe tem todas as propriedades da caixa adicionada a ele. Há muita duplicação. A razão pela qual estou a mostrar-te isto é porque isto é um erro. Ganhei muito quando comecei a usar coragem. Eu aprendi sobre o Nixon primeiro, e então eu usei eles em todos os lugares. Eu tinha um código duplicado. Mas usar uma mistura não mantém seu CSS final menor. Usar at extend funciona melhor em muitos casos, mas no Mixon é muito útil para aqueles momentos em que você quer a capacidade de alterar os valores de suas propriedades. Então, neste exemplo, eu quero misturar em que irá permitir diferentes tamanhos de caixa, então eu vou adicionar parâmetros ou argumentos como eles são oficialmente chamados e SAS para a largura e a altura que você faz isso adicionando parênteses após o nome e colocando os argumentos dentro, vou adicionar largura e altura com um cifrão antes da palavra para indicar que estes são argumentos. Cada argumento adicionado é separado por uma vírgula. Agora eu preciso usar esses argumentos no meu Mixon para que a largura seja o que for passado de onde a mistura é chamada. Normalmente, eu gosto de dar um valor padrão aos meus argumentos. Dessa forma, se o código que chama o Mixon não passar um valor, o Mixon ainda funcionará. Para fazer isso, digite dois-pontos após o nome do argumento e, em seguida, dê o valor padrão. Neste caso, vou usar ah, 100 pixels. Então, novamente eu salvo e olhar para a página, e nada mudou desde então. A largura e a altura ainda são 100 pixels Agora. Desta vez eu vou mudar a caixa um para ter uma largura de 50 pixels e uma altura de 200. Quando eu disser que você pode ver a mudança. Agora, eu posso mudar a caixa, também, e apenas passar em um parâmetro que será atribuído ao primeiro argumento. A sagacidade. Então argumentos são opcionais quando eu dou padrões, podemos criar argumentos para qualquer coisa na mistura em que tem um valor que poderíamos fazer a margem preenchimento ou cor de fundo. Se você quiser uma prática um pouco mais, você pode querer tentar fazer mais alguns argumentos aqui para que você possa criar mix, vez que sem argumentos e sass. Mas se você se encontrar fazendo isso, pare e considere se adicionar. Extend é o que você realmente queria usar. Se você não precisar alterar os valores, tente estender em vez disso. Se você precisa mudar os valores, então você quer misturá-lo. Vamos olhar para o nosso projeto agora e ver se podemos criar uma mistura para os cantos arredondados neste site. Eu tenho muitos cantos arredondados, mas o raio da borda tem um valor diferente em muitos deles. Isso faz de nós um candidato perfeito para um Mixon. Devo mencionar que quando esse design foi criado, era mais importante usar todos os prefixos do fornecedor para raio de borda. Mas esse não é mais o caso. Todos os principais navegadores de hoje estão usando raio de borda. A única coisa que você pode querer se preocupar são os primeiros navegadores IE como eu e oito. Estou usando CSS três pie, que é este arquivo HTC ponto pie. Quando eu tenho este arquivo de pizza para fazer Border Radius funcionar, eu e. Eu só preciso adicionar esta declaração de comportamento. Então, hoje só precisamos de duas linhas de código para cantos arredondados. Mas vou deixar este exemplo, como é por agora. Se eu usar um mix in para definir meus cantos arredondados e o frio muda ao longo do tempo como aconteceu com o raio da borda, é muito fácil modificá-lo em apenas um lugar. Vou copiar estas cinco linhas de código e criar uma mistura com elas. Eu estou indo para o topo onde eu crio meu espaço reservado para transição e variáveis porque eu gosto de mantê-los juntos para criar a mistura. Eu escrevo na mistura e, em seguida, o nome, que eu chamarei arredondado, em seguida, parênteses para os argumentos e eu vou colar nas cinco linhas. Eu só vou adicionar um argumento porque eu estou mantendo todos os valores de raio iguais. Eu o predefinição para sete pixels porque esse é o valor que eu já usei em vários lugares . Mas pode ser qualquer coisa . Agora, em todos os lugares eu uso esse valor. Eu tenho que mudar os sete pixels para o raio lateral do dólar em todos os lugares. Estou usando um raio de fronteira com apenas um valor. Vou incluir este Mixon para substituir as cinco linhas de código neste 1º 1 Eu não preciso passar um valor porque eu queria ser sete pixels, que é o padrão, e este próximo também. Agora, para este, eu preciso passar no raio, que é 10 pixels que eu não posso usar arredondado aqui porque esta é uma guia e você não pode usar a versão abreviada do raio da borda. Em vez disso, eu poderia criar uma mistura de tabulação e mais tarde se eu quisesse, e então eu vou passar e mudar o resto. Agora vou salvá-lo, e preciso ter certeza de que estou assistindo o arquivo de estilo e então devo escanear o site e certificar-me de que todos os cantos ainda estão arredondados. Acho que tudo parece bem. Vejamos o CSS gerado. Se eu procurar o raio da fronteira, não encontrarei a mistura e a definição, mas verei em todos os lugares onde ele precisava ao virar da esquina. Agora, aqui está a parte boa. Se eu quiser melhorar meu CSS porque eu não preciso desses prefixos de trovão. Aiken simplesmente mudar a mistura, e o código será alterado em todos os lugares que a mistura está incluída. Depois que eu salvar e olhar para o CSS novamente, você pode ver que há apenas duas linhas de código sendo usado aqui, e que foi alterado em todos os lugares que eu usei o Mixon. Ele não foi alterado nas guias porque eu não usei a mistura lá dentro, mas em todos os outros lugares ele mudou. Se você queria criar uma mistura para as guias, você tem algumas opções. Uma coisa que você poderia fazer é mudar a mistura arredondada no reboque, ter quatro argumentos, um para cada um dos cantos, e então você poderia especificar o raio de cada canto. Eu realmente não amo este método, no entanto, no entanto, porque então você tem que especificar todos os quatro cantos cada vez que você chamar o Mixon. Se você não estiver usando os valores padrão, então eu provavelmente criaria um segundo Mixon para as guias. E uma vez que as abas precisam do 1º 2 cantos para ser o mesmo e o segundo para ser zero, eu ainda precisaria apenas de um argumento. A única diferença é a maneira que eu chamaria de raio de fronteira neste site, há apenas um lugar com táxis, então eu realmente não preciso desta mistura. Mas se você estiver trabalhando no site com guias diferentes, você pode querer criá-lo para você mesmo. Uma coisa a ter em mente é que há todos os tipos de mixins lá fora que outros desenvolveram . Você pode pensar neles como plugins. Um grande conjunto de mixins vem com Compass, que eu não estou cobrindo neste curso específico, mas provavelmente fará parte de um curso futuro. Nixon são ótimos para usar quando você tem um grupo de estilos que são repetidos várias vezes, mas com pequenas variações entre eles. Se você usar argumentos para alterar esses valores e projetá-los com cuidado, você pode escrever muito menos código. 10. O Seletor Parental: nesta lição, vamos falar sobre o seletor de pais. O seletor pai é simplesmente o símbolo e comercial. qualquer lugar que você usar este símbolo em seu código, ele será substituído por um pai aninhado. Eleitores. O eleitor pai só pode ser usado quando você estiver aninhando seletores. Se você não estiver aninhando, não terá nenhum significado. O seletor de pais também permite que você atum pseudo classes como pairar e foco. Pode ser usado em qualquer lugar dentro do seletor. Isso permite algumas opções interessantes ao organizar seu código. Vejamos alguns exemplos. Este 1º 1 está apenas mostrando um simples pairar com a mudança da cor do texto. Compila-se a duas linhas como esta. O próximo é semelhante, mas mostra que você pode usá-lo com classes anexadas ao seletor pai . Então isso se torna H informações de três pontos. Isso significa que todos os três H com uma classe de informação terão um tamanho divertido de 1,1 extremidades. Observe que isso não é o mesmo que apenas aninhando a classe info dentro do seu H três seletor. Isso compilaria dois H três informações de pontos de espaço, que se aplicaria a qualquer coisa dentro de sua tag H três que tem uma classe de informação, digamos, possivelmente uma tag span ou algo assim. Este exemplo final mostra que você não precisa colocar o seletor pai no início. Aqui você pode ver os pais. Lecter veio atrás de um nome de classe. Esse padrão pode ser usado se você quiser estilizar as duas tags H de forma diferente, dependendo da página em que você está. Isso se compila a isso. Pode ser um pouco difícil envolver seu cérebro em torno dessa idéia no início porque você está aninhando algo que realmente não está aninhado em HTML. Mas uma vez que você começa como ele funciona, esse padrão pode ser útil em certas situações. Vamos para o projeto. Tenho os arquivos abertos e a pré-visualização ao vivo em execução. Eu também já estou assistindo o arquivo SAS. Enquanto eu estava me preparando para esta lição, eu notei que há um problema e eu gostaria de corrigi-lo primeiro. Está bem aqui com o carrinho. O carro deve estar ao lado dos links de suporte e conta não abaixo dele. Podemos ver a razão para isso se olharmos para o arquivo SAS primeiro, Eu estou estilizando o link do cartão com base nos atributos ásperos idade, mas quando olhamos para o link na página de índice, não há H áspero igual carrinho. Eu mudei em algum momento porque eu não queria vincular a uma página que não existia no site. Agora, certamente eu poderia evitar este problema completamente adicionando uma classe a esta etiqueta âncora. Mas eu quero mantê-lo aqui para que você possa ver como o eleitor dos pais vai trabalhar com isso. Quando eu consertei esse link para, digamos, carrinho, podemos ver que o cartão se moveu, mas é realmente ainda deve para cima. Então, se eu olhar para o arquivo SAS novamente, você pode ver que eu tenho posicionamento absoluto nesta seção de carrinho de compras. Ele está posicionado absolutamente, para o primeiro item pai que está posicionado relativamente, que neste caso é a tecnologia de cabeçalho. É assim que o posicionamento absoluto funciona. Mas você pode ver que eu também tenho uma margem negativa na imagem dentro do link, e é isso que está estragando tudo. Eu também notei que eu tenho uma conversa emergente. Além da posição superior de zero, eu estou movendo a posição do link ao redor com posicionamento absoluto e com margens e isso está fazendo algum CSS confuso. Isso acontece comigo quando estou tentando colocar as coisas no lugar. Mas normalmente tento limpá-los mais tarde, e neste caso, nunca fiz. Vou comentar essas duas linhas de margem e ver onde estamos. Isso parece muito melhor, mas o texto está muito próximo da imagem agora. Vou dar-lhe uma margem direita de oito pixels, e isso vai ajudar a dar-lhe algum espaço, mas ainda não está alinhado bem, então vou usar uma altura de linha para centrá-lo melhor. Parece melhor, mas não é perfeito. Na minha opinião, não gosto que a linha Itens tenha uma linha de base diferente do suporte ou dos links da sua conta . Esta área deveria ser redesenhada. Mas já que esse não é o propósito desta lição, vou deixá-la por enquanto. Agora que está limpo, podemos começar a usar o Lachter dos pais. Vou começar aqui mesmo. Já que temos um estado flutuante, vou movê-lo para cima e substituir o A pelo e comercial. Também deletarei essas linhas desnecessárias. Nós também podemos ness thes duas linhas com a referência de atributos também não estamos salvando nenhum pressionamento de tecla aqui ou tornando nosso código mais curto, mas estamos mantendo-o organizado. Todo o código relacionado ao tanque de âncora está em um só lugar. Você não pode vê-lo na tela, mas estamos aninhados dentro do seletor de cabeçalho. Portanto, a tag a é aninhada dentro da classe conta, que é aninhada dentro do seletor de tags de cabeçalho. Então, nosso pai, neste caso, é cabeçalho que conta A. Se olharmos para o CSS gerado, você pode ver que o seletor pai é colocado logo antes da conta ponto colchetes cabeçalho A . Você pode ver em todos os lugares que eu coloquei o comercial, ele o substituiu pelo seletor de pais. Se eu procurar por pairar de novo, posso substituir este também. Neste exemplo, posso substituir o U. L L I e um seletor pelo seletor pai porque esse é o pai aqui. Se você estava escrevendo esse som do zero, esse é o tipo de coisa que economiza muitas teclas. E a maioria das pessoas que escrevem código adoram salvar essas teclas, incluindo eu. Agora nem sempre podemos dizer que as coisas funcionaram porque nada está mudando no site. Vamos tentar alterar a cor de fundo quando você passar o mouse para branco para que possamos realmente ver que isso está funcionando agora. Quando passamos o mouse, o botão desaparece porque corresponde à cor do plano de fundo. Então esta é uma decisão horrível de design, e eu vou voltar para a cor do sotaque em vez disso. decisão horrível de design, Eu só queria provar que o que estamos fazendo está funcionando. Eu olho para pairar novamente e notar que eu realmente não posso fazer este aqui. Não há nenhuma maneira de conseguir que os pais do pé eleitorado trabalhem aqui porque o pai é realmente tem uma nova sobreposição de ponto span e o que nós gostaríamos que ele compilasse. Dois é ponto sabia uma sobreposição de destaque legal e pairar. Não podemos dividir o seletor pai em duas partes, que é o que gostaríamos de fazer aqui. Este próximo funcionará, porém, e também temos uma tag 80 com uma classe ativa. Podemos usar o seletor pai aqui. Além disso, você pode ver que a classe ativa tem um fundo branco e a classe de foco tem a cor de destaque . Então vamos mover ambos dentro da tag A e usar o seletor pai aqui. Há provavelmente mais algumas áreas aqui que podem usar um seletor pai, mas eu estou esperando que você já tenha a idéia. Então, para resumir, o seletor pai é um atalho, então você não tem que re digitar o seletor uma e outra vez quando você quiser usar coisas como pseudo-classes ou classes regulares. O meu D está no seletor dos teus pais. Ele deve ser usado em conjunto com Dusty, porque o eleitor pais simplesmente substitui o e comercial em seu código com quaisquer pais eleitores que você está aninhado dentro do comercial e pode aparecer em qualquer lugar dentro de seu seletor se ele trabalha com o seu casaco. Eu gosto de usar o seletor pai com pseudo classes porque ele me permite manter esses estados alternativos como cobertura e foco diretamente dentro de minhas outras tags, e ele se sente mais organizado. 11. Importando: nesta lição, vamos falar sobre o uso do at import com sass na importação. E SAS é muito semelhante ao CSS normal na importação, que permite dividir seu CSS em vários arquivos. O benefício de usar sass, no entanto, é que ele vai fazer a importação quando você está compilando ou gerando o código em seu CSS e colocá-lo tudo em um arquivo com uma importação CSS. O navegador ainda tem que fazer várias solicitações http, que vem com um desempenho It. É semelhante a ter vários links para vários arquivos CSS em seu HTML, e isso também não é uma boa idéia. Para obter seus vários arquivos para compilar em um arquivo, você precisa usar parciais. Um nome de arquivo parcial começa com um sublinhado. No início, você pode usar na importação sem parciais, mas usar parciais é melhor, vez que ele lhe dará um arquivo CSS para o carregamento do dedo do pé do seu navegador. A sintaxe para a importação é simplesmente na importação e, em seguida, o nome do arquivo entre aspas. Você não precisa mostrar o sublinhado no nome. Se for parcial, o compilador sabe procurar parciais, bem como arquivos regulares com esse nome em nosso projeto. Vamos dividir o arquivo SAS em várias partes para que seja mais fácil encontrar coisas e gerenciar. Primeiro, eu gosto de colocar todo o código de reset em um arquivo. Assim eu posso facilmente reutilizá-lo em outros projetos. O único problema que eu tenho aqui é que o código base de reset está realmente em dois lugares porque eu estou usando uma variável bem aqui no meio. Não posso usar uma variável até que ela seja definida. Então movi essa parte do código abaixo da definição da variável. Então eu vou mover esta linha que usa a variável para baixo para os estilos de site real, que é, na verdade, provavelmente, um lugar mais apropriado. Agora vou criar um novo arquivo chamado Underscore reset dot s CSS. Vou puxar o código de reinicialização do topo e puxá-lo para o arquivo parcial, e então eu vou puxar este código de redefinição adicional. Isso está abaixo das definições de variáveis e colocá-lo lá também. Eu salvei o arquivo. Podemos ver que o novo arquivo foi detectado, mas ele ainda não detectou uma alteração no arquivo SAS, então ele não gerou novamente o CSS. Não fará isso até que eu salve o arquivo principal do SAS. Voltarei ao arquivo principal e adicionarei a declaração de importação. Não preciso usar o sublinhado e não preciso digitar o tipo de arquivo. SAS vai procurar todos os arquivos que terminam em CSS s ou mesmo SAS o formato de arquivo mais antigo. Agora, quando eu salvar este arquivo, o ponto de estilo C s é regenerado e escrito sobre. Se olharmos para o arquivo CSS , não deve parecer muito diferente. A única diferença será a colocação dessa linha. Eu me mudei, que define a cor base para a etiqueta de corpo. Agora podemos colocar as variáveis específicas do nosso site e o do Nixon no seu próprio arquivo. Vou ligar para isso. Vou importar esse arquivo agora e salvá-lo. A alteração foi detectada. Se olharmos para o site, tudo ainda está bem. Em seguida, criarei um arquivo para os estilos que pertencem a todo o site e não são específicos da página . Vou chamar este principal de novo. É parcial, então começa com um sublinhado. Eu gosto desta técnica porque torna muito fácil encontrar suas definições de variáveis e mixagens quando você deseja modificar o design. Se eu quiser mudar algo, eu apenas vou para configurar e pode facilmente encontrar as variáveis. Se eu mudar a cor do acento para vermelho, mesmo que eu esteja apenas observando o arquivo SAS estilo, ele detectará alterações em qualquer arquivo que tenha sido importado para que possamos ver essa mudança aqui . E vou desfazer isso. Como eu realmente não quero vermelho agora, eu poderia levar isso mais longe e configurar na importação para cada uma das áreas específicas do site, talvez um para a página inicial um para a página de vídeo, a lista de categorias e assim por diante. E em um site real. Provavelmente haveria mais páginas que eu realmente acho ter seu código em vários arquivos muito mais fácil do que ter que percorrer um arquivo realmente longo. Então eu realmente gosto da declaração de importação. A última coisa sobre a qual eu quero falar não está realmente relacionada com a instrução de importação, mas desde que o uso de importação pode melhorar o tempo de carregamento do seu site, reduzindo o número de solicitações http do spinal tap, tem a ver com o desempenho de uma onda . É uma boa idéia para sempre homens se eu, seu CSS e JavaScript em seu site de produção, então eu quero mostrar-lhe uma maneira simples de homens se eu seu CSS ao usar sass. Se olharmos para o CSS gerado agora, podemos ver que não é homens ified sua legível com muito espaço em branco agradável ao desenvolver um site. Eu quero ver CSS como este caso eu precise olhar para ele. Mas uma vez que esteja pronto para produção, ele deve ser modificado para que o arquivo seja menor e seja baixado para os navegadores mais rapidamente . Para fazer isso, você simplesmente precisa adicionar uma opção ao seu comando watch. Vou parar de assistir e puxar o último comando. Então eu vou adicionar um traço, estilo traço comprimido. Isso fará com que a saída seja compactada. Não vai regenerar o código até que eu mude algo, então vou adicionar uma nova linha aqui. Agora, quando olhamos para o CSS, está tudo alinhado com nenhum espaço em branco. O tamanho do arquivo definitivamente será menor, então concluímos todas as etapas para aprender o básico da sass. No último vídeo, vou falar sobre como você pode continuar a melhorar suas habilidades SAS e compartilhar algum bom recurso é 12. O que vem a seguir?: Se você já passou por todos os vídeos em andamento, você deve entender o básico do SAS agora. A boa notícia é que conhecer o básico do SAS significa que você realmente entende o básico de qualquer pré-processador CSS. Se você tiver a chance de trabalhar em um projeto usando, digamos, Leszcz no futuro, você não terá nenhum problema em pegá-lo, provavelmente em apenas alguns minutos. A sintaxe será ligeiramente diferente, mas os conceitos são todos semelhantes. Eu não te ensinei até a última coisa sobre ousadia neste curso. Meu objetivo era colocar você em funcionamento com os conceitos mais úteis, e para ajudá-lo a superar qualquer medo ou medo que você possa ter sobre ter que aprender mais uma linguagem ou estrutura. Depois que você se sentir confortável com o que eu ensinei aqui, se você quiser levar sua aprendizagem e habilidades um pouco mais longe, você pode investigar o conceito de usar matemática e funções, E SAS vem com um número de funções integradas que você pode usar em seu código. Muitos deles podem ser usados para trabalhar com cores, como clarear ou escurecer. Eles poderiam ser usados em uma mistura para ingrediente. Por exemplo, também há funções que podem ajudá-lo a criar sites responsivos usando matemática. Também é possível criar suas próprias funções. Eu também recomendo apenas ler a documentação completa do SAS. Você pode encontrar isso no site do SAS também. Se você quiser algumas idéias sobre como incorporar SAS em seu fluxo de trabalho, eu recomendo assistir este vídeo de Nathan Henderson no Sass e Compass. São apenas 16 minutos, e é uma boa revisão dos conceitos ensinados aqui, com algumas ideias adicionais apresentadas. Eu fiz tudo neste curso à moda antiga, usando a linha de comando. Eu acredito que é bom aprender novas ferramentas no formato mais básico para que você realmente entenda o que está acontecendo. Mas uma vez que você tem essa base, eu acho que usar algumas das ferramentas que facilitam as coisas é muito bom. Aqui estão algumas ferramentas que você pode querer explorar Scout, que você confinou aqui kit de código, que é para Max on Lee. Mas é útil para muito mais do que apenas SAS e pré imprensa, um novo projeto de código aberto que funciona no Windows e é suposto ser semelhante ao kit de código . Você vai querer ter certeza de que seu editor de texto pode lidar com os colchetes de extensão de arquivo CSS dot s sabe que dot s CSS estará usando o CSS no imposto para a maior parte, e ele lida com isso. Ok, mas muitos editores de texto podem lidar com isso ainda melhor. E você confinou plugins ou extensões para obter melhor código, conclusão e muito mais. Faça alguma investigação para se certificar de que seu editor de escolha está configurado da melhor maneira possível para sass. Provavelmente não será configurado corretamente em uma nova instalação, mas vale a pena ter certeza de que seu editor ajuda você a codificar de forma eficiente. Já mencionei o Compass algumas vezes de passagem. Compass é uma estrutura de criação CSS que usa sass. Ele vem com um monte de built-in mix ins para CSS três propriedades, tipografia e muito mais. Então você não tem que construir isso do zero você mesmo. Ele também tem ferramentas para criar sprites de imagem e criar o CSS adequado para eles. Há muito a aprender com a bússola, e talvez eu tente fazer um curso com ela no futuro. Quando eu tenho tempo, é muito útil, e quando você quer levar suas habilidades SAS para o próximo nível. Recomendo explorar o Compass. Eu ensinei esta classe convertendo um projeto existente para sass de CSS regular. Eu gosto desta abordagem para aprender sass, porque você pode comparar o Sasko para nos ver, e você pode fazer a conversão e pequenos passos. Eu recomendo que você tente converter um de seus sites para usar sass para ter certeza de que você entende todos os conceitos. Isso não economizará tempo no início, mas quando você quiser mudar o site mais tarde, você terá uma ótima base para mudanças rápidas. Se você usar burro no próximo site que você desenvolver, você será capaz de escrever seu código mais rapidamente, e será muito mais fácil de manter. Lembre-se, você pode escolher quais partes de ousadia você quer usar. CSS regular é um código SAS válido, então use as partes que você gosta e, com o passar do tempo, você pode aprender e incorporar mais ideias para criar sites mais rapidamente. Obrigado por assistir a este curso. Espero que tenha ajudado você a adquirir mais uma das muitas habilidades necessárias para fazer desenvolvimento Web . Acho que essas poucas horas perderam o aprendizado. Uma nova habilidade como sass será recuperada muito rapidamente porque você será capaz de se desenvolver muito mais rápido no futuro. Espero que tenha gostado do curso. Se você tiver alguma dúvida, por favor pergunte e eu tentarei ajudar.