[Dúvida] Sobre Styles.sass e Github!

Olá, boa tarde!

Eu não fiz especificamente este curso, mas acho que posso ajudar.

Tem uma extensão do VSCode que se chama Live Sass Compiler. (Imagino que ela tenha sido instalada durante o curso, senão é só você procurar na aba de extensões e instalar). Ao instalar essa extensão, quando estiver trabalhando no projeto, você clica em "Watch Sass", no menu inferior do VSCode. Com isso, ele vai ficar "vigiando" os arquivos com extensão .sass ou .scss e irá atualizar automaticamente o arquivo .css.

Sobre a segunda dúvida, quando você for colocar no seu index.html o arquivo de estilos, você deve colocar o arquivo com extensão .css (e não o arquivo .sass ou .scss). Vai ficar algo assim no seu head do index.html:

<link rel="stylesheet" href="./style.css">

Só que não sei como está sua estrutura de pastas, então pode ser que precise ajustar o caminho no href, este foi só um exemplo.

Se isso não for suficiente para resolver, compartilha aqui o link do seu projeto no github para poder tentar te ajudar melhor :)

Ainda não funcionou mesmo fazendo isso. Você poderia dar uma olhada no meu código? https://github.com/eduarda-magnago/calmaria-spa

Olá, boa tarde :) Acabei de baixar o seu projeto e rodar aqui na minha máquina. O que acontece é que ele não está compilando devido a alguns erros, vou listar aqui o que encontrei:

No arquivo _footer.sass:

• Quando usar a extensão .sass, não precisa usar ponto-vírgula. Além disso também não precisa dos colchetes para indicar os estilos {}, e a variável $cor-quaternaria não estava correspondendo ao que você colocou no arquivo de variáveis.

Eu ajustei e ficou assim:

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

footer
    background: variaveis.$cor-quartenaria
    padding: 2rem
    text-align: center
    margin-top: 5rem
    @include mixins.ff-fs-cl(variaveis.$ft-textos, 1rem, variaveis.$cor-primaria)

No arquivo _header.scss:

• Como essa é a extensão .scss precisa do ponto-vírgula, estava faltando um ponto vírgula no final de:

@include mixins.ff-fs-cl(
          variaveis.$ft-textos,
          1rem,
          variaveis.$cor-primaria
);

E no h1, ao tentar passar a cor na propriedade color, você esqueceu de chamar o arquivo de variáveis, ajustei assim:

h1 {
        font-size: 42px;
        color: variaveis.$cor-primaria;
.......

Feito isso começou a compilar corretamente o SASS :) Aí ele já compila automático e acredito que agora consiga subir no github pages.

boa tarde, Eduarda.

Eduarda, você disse que o sass parou de ser transmitido para o css e que teve que atualizar manualmente, não tenho dados o suficiente para saber qual foi o seu problema especifico, mas acredito que isso possa ser fruto de um erro comum. talvez você tenha fechado o vscode e continuado o codar em outro dia, com isso você pode ter esquecido de ligar o watch sass.

watch sass é essa extensão que fica no canto inferior direito, ela tem que estar ativada para poder atualizar o css, e ela também impede modificações direta no css, então se o watch sass estivesse ativada ele não permitiria que você fizesse modificação diretamente no css. não sei se esse é de fato o seu problema. mas como disse é muito comum iniciantes esquecerem de ativar a extensão quando fecham e abrem o vscode.

Olá, pessoal! Obrigada por estarem ajudando. Alterei meus erros de código mas no Github pages carrega apenas o HTML da página. Acredito que seja por conta desse problema com o sass e css pelo fato deles não estarem interagindo um com o outro. Quando eu tiro o código do css, não acontece nada. Na minha cabeça ele tinha que aparecer automático porque o resto dos códigos estão corretos e eu também apertei o botão "Watch".

Esse aqui é o deploy da página: https://eduarda-magnago.github.io/calmaria-spa/ Github: https://github.com/eduarda-magnago/calmaria-spa

Eu baixei novamente o projeto, e ainda tinha um erro no footer, na variável quartenaria, aí eu ajustei, e compilou o SASS. (A variável precisa estar escrita certinho nos dois arquivos)

Assim:

footer
    background: variaveis.$cor-quartenaria

Agora a questão do github pages realmente ele não estava encontrando o arquivo por conta dos caminhos de URL que estavam no index.html.

O link para o css deve ficar assim: href="./styles/styles.css"

Precisa desse . antes da barra, para indicar que ele vai buscar a partir da raiz do documento. Senão quando a gente sobe lá no github ele procura algo como "https://natcurti.github.io/styles/styles.css", então precisa desse . para ele compreender que está buscando na raiz do projeto.

Na importação das imagens, você também pode retirar a barra, deixando apenas: <img src="assets/logo.png">

Eu subi no meu github só pra testar (vou apagar depois o repositório), vou te mandar o link daí se você quiser pode clonar:

https://github.com/natcurti/eduarda-projeto

Esse ficou sendo o deploy agora: https://natcurti.github.io/eduarda-projeto/

Boa noite Natalia, com essas atualizações consegui resolver.

Muito obrigada mesmo pela ajuda, salvou demais!!!