{"id":1442,"date":"2024-10-09T19:36:03","date_gmt":"2024-10-09T22:36:03","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=1442"},"modified":"2024-10-09T19:38:31","modified_gmt":"2024-10-09T22:38:31","slug":"resumo-da-live-tiktok-09-10-2024","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=1442","title":{"rendered":"Resumo da Live TikTok 09\/10\/2024"},"content":{"rendered":"\n

Ol\u00e1 Pessoal! <\/p>\n\n\n\n

Na Live do dia 09\/10\/2024 Conhecemos o Pr\u00e9 Processar SASS.<\/p>\n\n\n\n

SASS<\/h2>\n\n\n\n

O Sass<\/strong> (Syntactically Awesome Stylesheets) \u00e9 um pr\u00e9-processador de CSS que facilita a escrita de folhas de estilo, oferecendo funcionalidades adicionais que n\u00e3o est\u00e3o dispon\u00edveis no CSS puro. Ele permite que desenvolvedores escrevam c\u00f3digo mais organizado, reutiliz\u00e1vel e eficiente, tornando o processo de estiliza\u00e7\u00e3o de websites e aplicativos web muito mais \u00e1gil.<\/p>\n\n\n\n

Uma das principais vantagens do Sass \u00e9 a aninhagem de regras<\/strong>. Em vez de repetir seletores em v\u00e1rias partes do c\u00f3digo, voc\u00ea pode aninhar as regras CSS, o que reflete a hierarquia HTML e torna o c\u00f3digo mais leg\u00edvel e f\u00e1cil de manter. Al\u00e9m disso, o Sass permite o uso de vari\u00e1veis<\/strong>, uma funcionalidade extremamente \u00fatil para armazenar valores que s\u00e3o usados repetidamente, como cores, tamanhos de fontes ou espa\u00e7amentos. Com isso, se houver necessidade de mudar um valor, basta alterar a vari\u00e1vel, e todas as inst\u00e2ncias no c\u00f3digo ser\u00e3o atualizadas automaticamente.<\/p>\n\n\n\n

Outro ponto forte do Sass s\u00e3o os mixins<\/strong> e as fun\u00e7\u00f5es<\/strong>. Mixins permitem a cria\u00e7\u00e3o de blocos de c\u00f3digo reutiliz\u00e1veis, ajudando a evitar duplica\u00e7\u00e3o. As fun\u00e7\u00f5es, por sua vez, permitem fazer c\u00e1lculos e manipula\u00e7\u00f5es din\u00e2micas no CSS, como ajustar cores ou calcular medidas.<\/p>\n\n\n\n

O Sass tamb\u00e9m permite a divis\u00e3o do c\u00f3digo em arquivos menores<\/strong>, usando a funcionalidade de partials<\/strong> e importa\u00e7\u00f5es<\/strong>, organizando melhor o projeto e facilitando sua manuten\u00e7\u00e3o. Todos esses pequenos arquivos s\u00e3o compilados em um \u00fanico arquivo CSS no final, tornando a p\u00e1gina mais leve e r\u00e1pida.<\/p>\n\n\n\n

Na nossa Live utilizamos a extens\u00e3o Live Sass Compiler<\/strong> na IDE VsCode.<\/p>\n\n\n\n

HTML\n\n\n\n<!DOCTYPE html>\n<html lang=\"pt-br\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>SASS<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n    \n    <div class=\"bola1\"> \n            <a href=\"#\" class=\"link\"> Link<\/a>\n    <\/div>\n\n    <div class=\"bola2\">      <\/div>\n    <div class=\"bola3\">      <\/div>\n    \n<\/body>\n<\/html>\n\n\n\nSASS\n\n\n@import \".\/variaveis\";\n\n*{\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n}\n\n@mixin centralizandoBody( $justify-content ){\n    display: flex;\n    justify-content: $justify-content;\n    align-items: center;\n}\n\nbody{\n    @include centralizandoBody(center);\n    width: 100%;\n    height: 100vh;\n    background-color: #1a1a1a;\n}\n\n\n\n.bola1{\n    width: 200px;\n    height: 200px;\n    border-radius: 50%;\n    background-color: $primeiraCor;\n\n    a{\n        color:$segundaCor;\n    }\n    &:hover{\n        background-color: $segundaCor;\n    }\n}\n.bola2{\n    width: 200px;\n    height: 200px;\n    border-radius: 50%;\n    background-color:$segundaCor;\n}\n.bola3{\n    width: 200px;\n    height: 200px;\n    border-radius: 50%;\n    background-color:$terceiraCor;\n\n    }\n\nVARI\u00c1VEIS SASS\n\n$primeiraCor : rgb(0, 255, 68);\n$segundaCor: blue;\n$terceiraCor: #333;\n\n\n\n\nCSS\n\n* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100vh;\n  background-color: #1a1a1a;\n}\n\n.bola1 {\n  width: 200px;\n  height: 200px;\n  border-radius: 50%;\n  background-color: rgb(0, 255, 68);\n}\n.bola1 a {\n  color: blue;\n}\n.bola1:hover {\n  background-color: blue;\n}\n\n.bola2 {\n  width: 200px;\n  height: 200px;\n  border-radius: 50%;\n  background-color: blue;\n}\n\n.bola3 {\n  width: 200px;\n  height: 200px;\n  border-radius: 50%;\n  background-color: #333;\n}\/*# sourceMappingURL=style.css.map *\/\n<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
https:\/\/go.hotmart.com\/V89811082M?dp=1<\/a><\/p>\n\n\n\n
https:\/\/go.hotmart.com\/X90111663X?dp=1<\/a><\/p>\n\n\n\n
\n\n\n\n
HOR\u00c1RIO DAS LIVES<\/strong><\/p>\n\n\n\n
Domingo e Segunda \u00e0s 19:00hs<\/p>\n\n\n\n
Quarta \u00e0s 18:00hs<\/p>\n\n\n\n
Quinta \u00e0s 10:00hs<\/p>\n\n\n\n
Sexta \u00e0s 10:00hs<\/p>\n\n\n\n
S\u00e1bado \u00e0s 20:00hs<\/p>\n\n\n\n
\n