1
resposta

[Dúvida] eu to com problema na section de nossos serviços, os estilos não estão se aplicando

@use '../abstract/variaveis'; @use '../abstract/mixins';

#nosso-espaco { @include mixins.margem-central(80%);

.detalhes {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
    padding: 2rem 0;

    .imgs-espaco {
        max-width: 500px;
    }

    .espaco-textos {
        max-width: 500px;
      
        .titulo {
          @include mixins.ff-fs-cl(
            variaveis.$ft-titulos,
            1.8rem,
            variaveis.$cor-secundaria
          );
          font-weight: 500;
        }
      
        .infos {
          @include mixins.ff-fs-cl(
            variaveis.$ft-textos,
            1rem,
            variaveis.$cor-principal
          );
          margin-top: 1rem;
          line-height: 1.6;
        }
      
        .separador {
          width: 100%;
          margin-top: 1rem;
        }
      }
      &:nth-child(2){
        flex-direction: row-reverse;
      }
      
    }
}          o quê eu fiz de errado?
1 resposta

Oi, Lucas! Como vai?

Do que observei, me parece que o problema no seu código. Está na estrutura e indentação:

O problema é que você tem uma chave de fechamento '}' extra no final do código, que está desalinhando toda a estrutura de aninhamento. Além disso, a referência &:nth-child(2) está com indentação incorreta em relação a sua classe pai.

Testa esse código e veja se faz mais sentido:

@use '../abstract/variaveis'; 
@use '../abstract/mixins';

#nosso-espaco { 
  @include mixins.margem-central(80%);

  .detalhes {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
    padding: 2rem 0;

    .imgs-espaco {
      max-width: 500px;
    }

    .espaco-textos {
      max-width: 500px;
      
      .titulo {
        @include mixins.ff-fs-cl(
          variaveis.$ft-titulos,
          1.8rem,
          variaveis.$cor-secundaria
        );
        font-weight: 500;
      }
      
      .infos {
        @include mixins.ff-fs-cl(
          variaveis.$ft-textos,
          1rem,
          variaveis.$cor-principal
        );
        margin-top: 1rem;
        line-height: 1.6;
      }
      
      .separador {
        width: 100%;
        margin-top: 1rem;
      }
    }
    
    &:nth-child(2) {
      flex-direction: row-reverse;
    }
  }
}

A principal correção foi na estrutura:

  • Removi a chave de fechamento extra que estava causando o problema
  • Corrigi a indentação do seletor &:nth-child(2) para que ele se refira à classe .detalhes

Espero ter ajudado! Bons estudos!

Sucesso