Resumo da Live TikTok 09/10/2024 – Desvendando o Código

Olá Pessoal!

Na Live do dia 09/10/2024 Conhecemos o Pré Processar SASS.

SASS

O Sass (Syntactically Awesome Stylesheets) é um pré-processador de CSS que facilita a escrita de folhas de estilo, oferecendo funcionalidades adicionais que não estão disponíveis no CSS puro. Ele permite que desenvolvedores escrevam código mais organizado, reutilizável e eficiente, tornando o processo de estilização de websites e aplicativos web muito mais ágil.

Uma das principais vantagens do Sass é a aninhagem de regras. Em vez de repetir seletores em várias partes do código, você pode aninhar as regras CSS, o que reflete a hierarquia HTML e torna o código mais legível e fácil de manter. Além disso, o Sass permite o uso de variáveis, uma funcionalidade extremamente útil para armazenar valores que são usados repetidamente, como cores, tamanhos de fontes ou espaçamentos. Com isso, se houver necessidade de mudar um valor, basta alterar a variável, e todas as instâncias no código serão atualizadas automaticamente.

Outro ponto forte do Sass são os mixins e as funções. Mixins permitem a criação de blocos de código reutilizáveis, ajudando a evitar duplicação. As funções, por sua vez, permitem fazer cálculos e manipulações dinâmicas no CSS, como ajustar cores ou calcular medidas.

O Sass também permite a divisão do código em arquivos menores, usando a funcionalidade de partials e importações, organizando melhor o projeto e facilitando sua manutenção. Todos esses pequenos arquivos são compilados em um único arquivo CSS no final, tornando a página mais leve e rápida.

Na nossa Live utilizamos a extensão Live Sass Compiler na IDE VsCode.

HTML



<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SASS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div class="bola1"> 
            <a href="#" class="link"> Link</a>
    </div>

    <div class="bola2">      </div>
    <div class="bola3">      </div>
    
</body>
</html>



SASS


@import "./variaveis";

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@mixin centralizandoBody( $justify-content ){
    display: flex;
    justify-content: $justify-content;
    align-items: center;
}

body{
    @include centralizandoBody(center);
    width: 100%;
    height: 100vh;
    background-color: #1a1a1a;
}



.bola1{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: $primeiraCor;

    a{
        color:$segundaCor;
    }
    &:hover{
        background-color: $segundaCor;
    }
}
.bola2{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color:$segundaCor;
}
.bola3{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color:$terceiraCor;

    }

VARIÁVEIS SASS

$primeiraCor : rgb(0, 255, 68);
$segundaCor: blue;
$terceiraCor: #333;




CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #1a1a1a;
}

.bola1 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: rgb(0, 255, 68);
}
.bola1 a {
  color: blue;
}
.bola1:hover {
  background-color: blue;
}

.bola2 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: blue;
}

.bola3 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #333;
}/*# sourceMappingURL=style.css.map */