Entrar Ainda não tem acesso?
1
resposta

Faça como eu fiz: Criando um projeto no vite.

Referente ao curso SASS com Vite: otimizando e modularizando seu CSS, no capítulo Conhecendo o SASS e o Vite e atividade Faça como eu fiz: criando um projeto com o Vite

por Estanislau Antonio da Silva Junior
| 62.8k xp | 223 posts

Index. html

 <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./assets/favicon.png" type="image/x-icon">
    <title>Serenatto</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Barlow:wght@400;600&display=swap"
      rel="stylesheet">
    <link rel="stylesheet" href="./styles/main.css">
</body>

</html>

Scss

* {
    margin: 0;
    padding: 0;
}

$primary-color: #212529;
$secondary-color: #fff;
$accent-color: #8A5E36;
$font-family-primary: 'Barlow', sans-serif;

body {
    font-family: $font-family-primary;
    background-color: $secondary-color;
    color: $primary-color;
}

body {
    font-family: $font-family-primary;
    background-color: $secondary-color;
    color: $primary-color;

    a {
        color: $primary-color;

        &:hover {
            color: $accent-color;
        }
    }
}

Depois da sugestão:npm install -D sass-embedded deu certo a importação

1 resposta
por Rafaela Petelin Silvério
| 861.2k xp | 1933 posts
Alura Scuba Team

Oi, Estanislau! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Seu projeto está bem estruturado, com organização tanto no index.html quanto no SCSS. Legal ver que você já está usando variáveis no SCSS e aplicando estilos aninhados com &:hover, que deixa o código mais limpo e modular.

Uma dica interessante para o futuro é testar o uso do :root para criar variáveis CSS quando estiver trabalhando apenas com CSS puro. Veja este exemplo:


:root {
  --primary-color: #212529;
  --secondary-color: #fff;
}

body {
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

Esse código define variáveis globais com -- e usa var() para aplicá-las. É útil quando você não usa pré-processadores como o Sass.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!