Eu estou com um problema que a página central não atualiza nada que faço nos arquivos scss. Com isso, eu segui tudo que foi mencionado na aula e nada foi alterado. Fui conferir se alterava algum elemento no arquivo header, mas estava igual. A única coisa que percebi é que no arquivo styles.css as partes de nosso espaco não foi criado. E com isso, não estou conseguindo aplicar.
.style.css
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background: linear-gradient(180deg, #E8F5C8 0%, #FFFFFF 96.87%);
padding: 2rem;
}
header nav {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
}
header nav .linha {
border-top: 1px solid black;
width: 80%;
}
header nav ul {
display: inline-flex;
gap: 2rem;
}
header nav ul li {
list-style-type: none;
}
header nav ul a {
text-decoration: none;
color: #0C0421;
font-weight: 500;
font-family: "Montserrat", sans-serif;
}
header #home {
max-width: 1040px;
width: 80%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
header #home .textos-home {
max-width: 464px;
}
header #home .textos-home h1 {
font-size: 42px;
color: #0C0421;
margin-bottom: 2rem;
font-family: "Krona One", sans-serif;
}
header #home .textos-home h1 span {
color: #4e75ff;
}
header #home .img-home {
max-width: 474px;
}
header #home .img-home img {
width: 100%;
}
header #home .btn-main {
width: 280px;
height: 66px;
padding: 24px;
border-radius: 40px;
gap: 10px;
background-color: #4e75ff;
font-family: "Krona One", sans-serif;
font-weight: 600;
font-size: 22px;
border: none;
color: white;
}/*# sourceMappingURL=styles.css.map */
._header.scss
@use '../abstract/variaveis';
@use '../abstract/mixins';
header{
background:variaveis.$gradiente-primario;
padding: 2rem;
nav{
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6rem;
.linha{
border-top: 1px solid black;
width: 80%;
}
ul{
display: inline-flex;
gap: 2rem;
li{
list-style-type: none;
}
a{
text-decoration: none;
@include mixins.ff-fs-cl(variaveis.$ft-textos, 1rem, variaveis.$cor-primaria);
font-weight: 500;
}
}
}
#home{
max-width: 1040px;
@include mixins.margem-central(80%);
display: flex;
align-items: center;
justify-content: space-between;
.textos-home{
max-width: 464px;
h1{
font-size: 42px;
color: variaveis.$cor-primaria;
margin-bottom: 2rem;
font-family: variaveis.$ft-titulos;
span{
color: variaveis.$cor-secundaria;
}
}
.btn-main{
width: 280px;
height: 66px;
padding: 24px;
border-radius: 40px;
gap: 10px;
background-color: variaveis.$cor-secundaria;
font-family: variaveis.$ft-titulos;
font-weight: 600;
font-size: 22px;
border: none;
color: white;
}
}
.img-home {
max-width: 474px;
img{
width: 100%;
}
}
}
}
._nosso-espaco.scss
@use '../abstract/mixins';
#nosso-espaco{
@include mixins.margem-central(80%);
}
._mixins.scss
@mixin margem-central($width){
margin: 0 auto;
width: $width;
}
@mixin ff-fs-cl($f-family, $f-size, $f-color){
font-family: $f-family;
font-size: $f-size;
color: $f-color;
}