Episódio 38: Glamouring seu CSS (SASS)

Foi um Natal refrescante onde cheguei de volta aos meus dois pés depois de comer muita comida, sentado em banhos quentes e dormindo por toda parte. Espero que todos tenham tido um lindo Natal, e hoje eu comece com novos olhos para escrever sobre este blogposto juntos. Antes de começarmos,

Por que queremos glamour nosso CSS para começar? Dois motivos principais:

  • Muitos códigos para processar

Se estamos trabalhando em um projeto maior, com várias páginas CSS e um site que precisa de imagens, demorará mais tempo para o nosso site renderizar.

  • Mais difícil de administrar

Se tivermos muitos códigos escritos em nosso CSS, será difícil para um desenvolvedor ler, e muito menos gerenciar / navegar ao longo do tempo.

O SASS é o préprocessador que muitos desenvolvedores usam para compilar seu código CSS o mínimo possível. Não é apenas mais comprimido ou mais limpo, também, fundamentalmente, mantém a base e a saída do seu código como CSS. Como isso faz a diferença? Bem, o SASS nos permite escrever código mínimo, elegante, comprimido e poderoso e, em seguida, executará o “compilador Sass” para converter todo o seu idioma SASS em CSS. Em outras palavras, os computadores nunca sabem que o que os enviamos é o SASS, pois usamos um conversor de idiomas para comunicar com eles um idioma com o qual eles estão familiarizados.

Como é isso para uma explicação básica sobre como o SASS funciona? Estrondo! No entanto, é aqui que as coisas ficam um tanto loucas! Nós não vamos usar folhas de estilo Syntactically Awesome! (Dafaq!) Não, para glamourar , estamos usando SCSS (Sassy CSS). Ao aprender isso em um dia, parece que a sintaxe para SCSS e CSS é muito mais semelhante, portanto, é mais fácil de pegar do que o SASS onde não há semiconsonos ou suportes.

Muitos dizem que é uma preferência de design. Eu digo, para alguém que entra nas profundezas do CSS, que é a via de mergulho mais fácil de passar. Passemos pelo básico das regras e benefícios do SCSS:

Como faço para obter isso? (Node e NPM)

O que até são essas coisas. OK.

Nó ou Nó.js permite escrever e executar aplicativos do Javascript no servidor. É um idioma popular que é usado para escrever ferramentas (SASS) e ajudar com desenvolvimento web local hoje. O nó é ou fornece são, então, pacotes que um desenvolvedor poderia usar. No entanto, como um poderia acessar, organizar ou chegar a esses pacotes?

O NPM é um gerenciador de pacotes e um gerenciador de pacotes é algo que cada desenvolvedor front-end usa. É quase como uma caixa de presente de ferramentas onde um desenvolvedor poderia escolher quais ferramentas eles precisam para escrever melhor código. Sem o NPM, ou um gerenciador de pacotes, nunca seremos capazes de usar ou acessar pacotes feitos em Nó.

Em outras palavras, o SASS é um pacote de nós e usaremos o NPM para acessá-lo, organizá-lo ou executá-lo para uso. Legal.

Depois de instalar nó e npm, verifique se as versões estão sendo executadas digitando o seguinte comando no terminal:

 nó -v 
 npm -v

Isso listará as versões que você tem de nó e npm, e mostra que você a possui. Ótimo, agora, seja qual for o projeto em que você esteja, entre na pasta do projeto e execute.

 npm init

Isso criará um arquivo package.json que irá armazenar todos os pacotes (sass) que baixaremos mais tarde. Ele pedirá que você preencha os detalhes, como nome, repositório git, descrição se desejar entrar nos detalhes. Um programa de apresentações e estrutura simples npm é.

Agora, simplesmente instalamos o pacote:

 npm install node-sass --save-dev

Então, é bem claro que o nó-sass é o pacote. No entanto, o que faz – save-dev fazer? Ele basicamente atualiza o arquivo package.json com o Sass e o coloca como uma das dependências dos desenvolvedores. Dessa forma, não precisamos instalá-lo sempre e assim, nosso projeto sabe que precisamos desse pacote sempre.

Agora, aproveite os gráficos e carregue e instale.

Se quisermos verificar se foi carregado e salvo no nosso arquivo package.json, abra-o no seu editor.

Aqui, você pode ver que “node-sass” é salvo sob Dependências do projeto. Yay, nós fizemos isso! Uma nota, no entanto:

Nós usamos apenas – save-dev, se o pacote é uma ferramenta para o desenvolvimento. Por exemplo, se desejássemos usar o JQUERY no projeto, não o usaríamos como arquivo que queremos incluir, não para o desenvolvimento do nosso projeto. (Isso faz sentido, eu espero que sim). Para mostrar a diferença no arquivo package.json, vou instalá-lo e mostrar a diferença.

Veja como Jquery está sob dependências em vez de devDependencies. Pode ser uma pequena diferença, mas o NPM é usado para organizar nossos pacotes. Então, se nos dão um recurso de organização, podemos também usá-lo para manter nossos pacotes listados, limpos e saber que pacote é usado por que motivo.

Agora, diga se você estava trabalhando de forma colaborativa como desenvolvedor. É altamente provável. Você vai comprometer todos esses arquivos abaixo para o seu github para que eles garantam?

Não! Porque é por isso que o arquivo package.json é para! O pacote.json é um arquivo que documenta todos os pacotes que você baixar. Então, se o seu amigo que está enviando esse código às necessidades do projeto, você precisaria enviar os arquivos, incluindo o pacote.json. Então, eles simplesmente executariam o seguinte comando abaixo, considerando o fato de eles já ter npm e nó.

 instalação npm

Estrondo! Ele instalará os milhares de arquivos que você viu na imagem anterior em seu computador. Que maneira de economizar espaço no GITHUB ou nas transferências de arquivos, estou certo?

No entanto, nesta situação, digamos que não preciso do Jquery para este projeto. Ops, eu baixei um pacote que eu não preciso, por que eu deveria mantê-lo. Nunca devemos manter os pacotes que não usamos.

 npm desinstalar jquery --save

E agora, se verificar o nosso arquivo package.json.

O Jquery desapareceu! O que!

Agora podemos finalmente usar o SASS, mas antes de fazer isso, vejamos alguns conceitos que o SASS ou o SCSS fornecem.

Variáveis:

Aqui, estou usando o CodePen para demonstrar os benefícios da ferramenta do CSS Sassy. Você pode ver que estou definindo uma variável na linha 6 com um sinal de dólar. Tudo o que estou configurando é a cor primária para uma determinada cor e, em seguida, chamando a variável na linha 10.

O benefício de ter variáveis ??é que, em projetos de grande escala, se queríamos mudar uma cor, tamanho de fonte ou outros elementos ao longo do projeto, poderíamos simplesmente mudar um valor e o computador irá processar isso para nós! Perverso.

Se quisermos ver como este SASSY CSS é cumprido no CSS (eu expliquei o conceito anteriormente), seria assim.

Veja como nossas variáveis ??não são mostradas e veja como nossa cor de fundo está configurada para o valor variável que tivemos! Louco!

Aninhamento:

Este é um conceito muito legal mas estranho para o CSS, mas pode ser realmente útil. Digamos que temos um ul com uma classe chamada “navegação” e dentro dele temos vários <li> e um <p> dizendo “Aqui”. Visualize, ótimo. O que fazemos quando queremos apenas editar os elementos <li>. No CSS, aninhamos fazendo o seguinte:

É assim que fazemos isso em CSS, simplesmente chamamos a classe e especificamos o elemento. No SCSS, é ainda melhor e logicamente faz mais sentido.

Bem, você olha para isso! Nós podemos simplesmente chamar o elemento li em nosso seletor de classe de navegação! Não é apenas um código mais limpo, mas curto, com menos seletores para olhar.

Vamos tomar outro caso. Digamos que temos todos esses elementos <li> e nós o denominamos da maneira que fizemos. No entanto, podemos ver que o primeiro elemento <li> está fora de lugar. O que eu faço para enfrentar isso mesmo. Sim, você adivinhou: aninhamento. Vamos fazer isso em CSS primeiro.

Ótimo, isso deve fazer o truque. No entanto, como vimos anteriormente, podemos aninhar elementos em seletores no SCSS, vamos fazê-lo!

Whoa O que eu acabei de fazer lá! O que é este & símbolo? Bem, é um símbolo de e comercial que está compilando os seletores que temos até atingir esse ponto. Em outras palavras, eu poderia escrever isso em vez de usar o e comercial.

 .navigation li: first-child

Isso significa o mesmo que diz o e comercial. Nota: os espaços significam uma grande diferença. Se tivéssemos um sapce entre li e: first-child, o CSS o tomaria como dois elementos diferentes e o link entre nossos seletores não passará.

E se queríamos aninhar as coisas mais fundo. Digamos que eu quero abordar o objeto A nos elementos li, no elemento ul com a classe “navegação”. Não há limite para o nidificação (como é por isso que eles dizem que este é o último nível que deve aninhar. Em outras palavras, passar 3 camadas profundas é um bolo de esponja perfeito)

E podemos aninhar qualquer coisa, mesmo pseudo-classes que definitivamente tornam nosso CSS mais limpo do que se usássemos o CSS original.

Uma coisa sobre flutuadores:

Quando flutuamos elementos (seja para a direita, para o centro ou para a esquerda), esses elementos perderão sua cor de fundo se alguém decidir colocar um. Por que é isso? Isso ocorre porque os elementos que estabelecemos flutuador também não têm altura e, dado que não estão em um bloco, a cor que definimos não pode ser adicionada ao bloco.

Dilema. O que nós fazemos. ClearFix.

Esta é uma classe que adicionaremos ao elemento que afeta todos os elementos que são o nosso navegador. Então, nós escrevemos o código para a seguinte classe.

Para o meu entendimento e de lê-lo no W3schools, este é um hack para “Se um elemento é mais alto que o elemento que o contém, e ele é flutuado, ele irá transbordar para fora do seu container”. No nosso caso, o flutuador não possui um bloco ou seção no lugar.

O importante aqui é a pseudo-classe que usamos chamado “depois”, pois esta é a chave para o que limpa ou gerencia o método do flutuador. No interior, estamos configurando o conteúdo para nada (como não queremos que nossos carros alegrem conter nada), claro: ambas as propriedades são a outra chave que irá resolver o problema do flutuador e exibi-los em um formato de tabela. Dessa forma, as “linhas”, suponho, terão um lugar para a cor ir. [Aviso: Isto é para meu entendimento, estou errado]

Isso é reivindicado como a maneira mais segura de conter um flutuador.

Características de cores:

Isso é algo menor, mas uma adição doce ao SCSS. É chamado de “Recursos HSL” e o SCSS tem essas coisas chamadas escurecer e aliviar.

Podemos usá-lo em qualquer lugar, mas digamos que o estou usando no botão para algum botão. Meu $ color-secundário é uma variável, e o método escurecer irá escurecer a cor de fundo do botão em 15%. Que louco é isso!

Vamos mais fundo: Mixins.

Em suma, mixins são enormes variáveis ??de código reutilizável. Por que isso é útil? Digamos que queríamos usar o código de clearfix em vários seletores em nosso CSS. Se estamos seguindo a prática de escrever como código mínimo possível ou seguindo o princípio DRY (Não se repita), então não seria sugerido ou sábio copiar e colar o código de esclarecimento que escrevemos anteriormente em cada seletor que queremos ajustar.

Se você está começando a fazer o quebra-cabeça, sim, vamos usar mixins para conter o código do clearfix e chamá-lo. Estou dizendo que é uma situação de nidificação completa. Caso contrário, pense nisso como um método (se você codificou antes)

Para fazer ou usar uma mistura, chamamos isso como tal: @mixin. O clearfix é o nome do mixin. Para chamar essa mistura, diremos @include e o nome mixins, que é clearfix.

No entanto, essa não é a única coisa!

Mixins pode ter argumentos. Digamos que nosso mixin se aplica a muitos elementos do nosso código, mas possui um recurso que bugs a estratégia. Digamos que esta é uma cor em nosso mixin, e precisamos que um dos nossos elementos seja preto para combinar nosso design em vez de a cor de tudo ser branco. Nós podemos apenas fazer isso!

Nosso mixin agora leva um argumento e esse argumento será definido como a propriedade de cor. Então, seja qual for a cor, nós passaremos quando esta combinação for chamada, essa cor será inserida neste mixin. Por exemplo:

Aqui, eu estou chamando essa mistura para um seletor e dando-lhe uma variável de cor que é uma variável que contém a cor branca. Fabuloso.

Mais funções:

Nós já tocamos nisso, mas você provavelmente não percebeu ou percebeu isso. Coisas como “escurecer” e “iluminar” são funções, onde eles tomam argumentos dependendo de como eles são construídos.

Se alguém codificou, sabe-se quais funções ou métodos são (basicamente o código que executa ações com o código em um jist). Embora o SASS ou o SCSS tenham funções incorporadas, também podemos escrever nossas próprias funções!

Embora isso pareça uma ótima oportunidade de usar, pergunta-se por que você precisa escrever suas próprias funções dado que, mesmo que estivéssemos escrevendo operações de matemática, SCSS e SASS nos permitem apenas colocar um “+” no código … (Hmmmm, mais para descobertas mais tarde).

No entanto, vamos fazer uma função para mostrar como uma função poderia funcionar.

Aqui, estou fazendo uma função de divisão simples, onde eu dou dois argumentos (ou, neste caso, números), e devolvê-lo. (Ignore o sinal de adição porque não consigo me incomodar em removê-lo).

Agora, se chamarmos isso.

Aqui, na propriedade de margem no seletor de navegação, nós equiparemos esse método. Se queremos que a margem seja de 30 px, colocamos (60,2) como números! No entanto, por que eu coloquei um * 1px depois. Veja, se não o fizermos, o SCSS não saberia qual unidade queremos que esse número seja. Poderia ser porcentagens, poderia ser pixels ou em! Portanto, uma maneira segura de garantir que nossa unidade seja um pixel (ou a unidade que escolhemos), devemos multiplicar nossos pixels por 1.

Estou assumindo que você pode fazer isso no método que definimos também. No entanto, este é um ótimo exemplo para mostrar como podemos usar funções e operações matemáticas no SCSS.

Estende:

Até agora, mixins e funções são formas em que podemos refatorar nosso código CSS e ferramentas que nos dão mais controle sobre o que podemos inserir em nosso código CSS. Extender é outra ferramenta que podemos usar, fazer o mesmo e, como o nome sugere, estamos “ampliando o código” em elementos.

Isso pode ser útil quando temos vários botões em nossa página com o mesmo estilo e efeitos. Digamos que temos dois botões que fazem exatamente a mesma coisa. Como podemos refatorar isso?

Temos muitos btn-mains, btn-hots que repetem aqui. Vamos refatorar usando uma extensão como tal.

Então, o que eu fiz aqui é que eu coloquei o código de estilo do botão em um espaço reservado (chamando-o com%) e estendendo esse espaço reservado no seletor principal .btn. Embora você possa pensar que agora o espaço reservado está sendo aplicado ao seletor btn-main, você está enganado.

[Uma nota importante, notas]:

Se tomarmos mixins e se estendendo, eles funcionam da mesma maneira, mas o que é diferente sobre eles é “que código está se aplicando ao que”.

  • Com mixins, quando fazemos um mixin e chamamos, esse mixin está sendo aplicado a qualquer seletor em que chamamos.
  • Com estende-se, quando fazemos uma extensão e chamamos, o seletor que chamamos está sendo aplicado na extensão.

Por isso, no nosso exemplo de extensão nosso seletor btn-main está sendo aplicado ao btn-placeholder. Conceito estranho, mas experimente embeber isso em

Se você estiver tendo dificuldade em descobrir sua cabeça, eu gostaria de pensar que as mixins e as extensões são opostas umas das outras … em termos de qual código está sendo aplicado ao que.

O que seria interessante se você alguma vez codificasse no SASS no codePen, você pode ver seu SCSS compilado, o que mostra como o computador acabará por lê-lo. Ele mostrará o código que não é mostrado (variáveis) eo código que cada seletor decidiu considerar.

No CSS compilado após o SCSS ter pré-processado.

Uma regra para estender é que você deve usá-los se as regras para os elementos estiverem relacionadas inerentemente ou tematicamente entre si.

O que isso significa. Bem, os botões são tematicamente relacionados, dado que eles são botões em um site. Falando do ponto de vista do projeto, há uma chance provável de que nossos botões tenham a mesma aparência ou tenham a maioria das mesmas características. Inerentemente, significaria se eles herdassem um do outro, o que ainda é um mistério nebuloso que ainda não tenho que explorar (por isso, não vou entrar nisso)

Na imagem acima, você pode ver que o CSS compilado colocou esses dois elementos / seletores com as seguintes propriedades. Isso pode ser visto como uma questão de manutenção futura na linha, se os seletores denominados não se relacionarem inerentemente ou tematicamente. Por exemplo, e se nós queríamos mudar uma propriedade nesta situação em que esses botões não estão relacionados? Vai demorar mais tempo para voltar e ter uma grande chance de reeditar o código imensamente.

Escrevendo e Compilando nossos arquivos SCSS / SASS.

Como todo tipo de arquivo, ele tem um lugar onde ele pertence entre nossos arquivos de código. Por isso, vamos fazer uma pasta SASS na pasta do nosso projeto.

 mkdir sass

Mude para o diretório do projeto e faça um arquivo scss. Dado que estamos falando sobre scss todo esse tempo. (Principal é o nome do arquivo css sassy)

 cd sass 
 toque main.scss

Agora, uma vez que você escreveu seu código css sassy neste arquivo que você fez. Agora vamos entrar no seu arquivo package.json, onde vamos ajustar os scripts para compilar esses arquivos.

Você verá isso em seus scripts, você já tem algo escrito lá. Este é um script predefinido que você pode mudar, e vamos mudar.

Agora, o que estamos escrevendo nos scripts é o script que vamos chamar para compilar o nosso css. Precisamos mencionar o pacote e os arquivos que nosso script deve compilar como tal.

Então, aqui estamos chamando a compilação do script: sass e depois ligando para o pacote que baixamos junto com o arquivo que queremos compilar. No entanto, quando compilamos o código, esse código compilado precisa ir em algum lugar, e nós garantiremos que ele vá para um arquivo css com o mesmo nome, na pasta css, porque queremos ser desenvolvedores limpos e limpos /

Então, para finalmente compilar seus arquivos css sassy para css, precisamos executar o seguinte código em nossa linha / terminal de comando abaixo:

 npm executar compilação: sass

E agora, se você verificar o seu css / main.css ou qualquer outro nome do seu arquivo css, ele deve ter compilado todo o seu código css sassy nesse arquivo!

No entanto, aqui é onde entramos em dilemas.

* Eleva a mão, sim senhor!

“E se eu editar meu arquivo Sassy CSS e quiser ver as alterações no meu arquivo CSS. Isso significa que eu tenho que executar essa linha npm toda vez que eu faço isso? “

Grande pergunta, e vamos adicionar algo pequeno, de modo que o nosso roteiro conheça as mudanças.

Você verificará isso, tudo o que é necessário é um -w e isso irá notificar nosso código para cuidar de quaisquer mudanças que ocorram entre nossos arquivos sass ou css! Você pode verificar no terminal as mudanças quando você executa a “compilação npm run: sass”, pois imprime as mudanças que você faz no seu código em seu editor de texto simultaneamente! Homem da tecnologia!

Nota: Eu acredito que você pode fazer isso com comandos sass também.

 sass - assistir main.scss: main.css

“E se eu quiser compilar vários arquivos no script!

Muito boa pergunta, usando o comando Sass, você pode fazer isso.

 sass - assistir main.scss: main.css

No entanto, se estamos mudando nossos scripts, podemos escrever o código como tal.

"compile:sass": "node-sass scss -o css -w"

Este pedaço de código do que eu li no artigo abaixo, deve compilar todo o seu código sass em arquivos css. Estou sob o pressuposto de que você teria que fazer esses arquivos CSS vazios primeiro para que seu código compilado possa ir a algum lugar, mas tente ver o que funciona para você.

Eu li que não importa onde você coloca o “-w” ou “relógio, desde que seja antes do scss e depois do nó-sass …

Para mais informações, o link está abaixo:

Assista e compile Sass em cinco etapas rápidas
Sass é talvez o mais popular dos pré-processadores CSS; Durante anos nos ajudou a escrever limpo, reutilizável e modular … webdesign.tutsplus.com

“E se eu quiser ver minhas mudanças acontecerem automaticamente na tela?

Pergunta incrível e útil para se lembrar. Aqui, vamos precisar de um servidor ao vivo para ver todas as nossas mudanças na tela toda vez que fazemos uma mudança. Isto é, então não precisamos atualizar a página de cada vez, nem escrever código sempre.

Vamos querer instalar este pacote globalmente porque queremos usá-lo em qualquer lugar em nosso projeto, em qualquer projeto e em qualquer lugar em nosso computador. Como todos sabemos, isso definitivamente virá a ser útil mais do que apenas um projeto.

 npm instala o servidor ao vivo -g

Você não poderá encontrá-lo em suas pastas de projetos à medida que instalamos em todo o mundo. Assim, a única maneira de verificá-lo é se executado ao vivo em nosso terminal. Nota: Execute o servidor ao vivo na pasta em outra janela, como você pode querer manter o seu outro terminal de janelas para outros usuários (verificando seu processo em sass ou executando outros pedaços de código, etc.)

 servidor ao vivo

Isso deve abrir seu projeto em seu navegador padrão. Agora você deve ver duas coisas agora.

  • Veja se o seu projeto está aberto no navegador padrão
  • Que está conectado a algum host local, (um monte de números como 127.0.01: 1800)

Você adivinhou, a única maneira de testar se funciona é mudar algo no seu arquivo CSS, SCSS e ver se sua página do navegador padrão muda qualquer coisa.

Nessa nota, comente abaixo para qualquer comentário ou ideias adicionais e seja bem-vindo para os 17 minutos do SCSS, SASS resumido.

~ Vejo você na próxima vez

Fato divertido do dia / atualização do dia:

Eu começo as últimas três semanas do meu bootcamp de codificação na próxima semana. É muito assustador, com um monte de “é hora de obter coisas sérias”. Entrevistas e projetos finais. Excitante, sim. Preparado, um nunca está preparado.

Então, não espere que os blogs diários voltem para essas três semanas. No entanto, não faz mal verificar se eu possa estar documentando meu projeto final ou Deus sabe do que escrevo sobre isso.

Caso contrário, confira as coisas que eu fiz, confira meu github na minha insta.

Ambos estão sob @thatdania

Texto original em inglês.