Atividade PBL — Pré-processadores CSS
Disciplina: Programação Web 2
Professor: Me. Danilo Bueno
Duplas: 2 integrantes
Duração: 4 aulas de 50 minutos (em sala)
Contextualização
Você recebeu o código de um site funcional escrito em CSS puro.
O código funciona, mas está difícil de manter: valores se repetem, seletores são longos e qualquer mudança exige editar o arquivo todo.
Sua tarefa é refatorar esse CSS para SCSS, aproveitando os recursos do Sass para deixar o código mais organizado, reutilizável e fácil de manter.
Arquivos base da atividade
O site base
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ana Souza — Dev Profile</title>
<link rel="stylesheet" href="./_task-base.css">
</head>
<body>
<header class="topbar">
<span class="brand">@anasouza</span>
<nav class="nav">
<a href="#">Sobre</a>
<a href="#">Projetos</a>
<a href="#">Contato</a>
</nav>
</header>
<section class="hero">
<h1 class="name">Ana Souza</h1>
<p class="role">Desenvolvedora Front-end</p>
<p class="bio">
Apaixonada por interfaces acessíveis e código limpo.
Sempre aprendendo, sempre construindo.
</p>
<div class="actions">
<a href="#" class="btn-primary">Ver projetos</a>
<a href="#" class="btn-secondary">Entrar em contato</a>
</div>
</section>
<section class="skills">
<h2 class="heading">Habilidades</h2>
<div class="grid">
<article class="card">
<h3 class="title">HTML & CSS</h3>
<p class="desc">Semântica, acessibilidade e layouts modernos com Flexbox e Grid.</p>
<span class="tag">Intermediário</span>
</article>
<article class="card">
<h3 class="title">JavaScript</h3>
<p class="desc">DOM, eventos, fetch API e manipulação assíncrona de dados.</p>
<span class="tag">Básico</span>
</article>
<article class="card">
<h3 class="title">Ferramentas</h3>
<p class="desc">Git, VS Code, Figma e linha de comando para o fluxo diário.</p>
<span class="tag">Básico</span>
</article>
</div>
</section>
<footer class="footer">
<div class="links">
<a href="#">GitHub</a> ·
<a href="#">LinkedIn</a> ·
<a href="#">E-mail</a>
</div>
</footer>
</body>
</html>o CSS que você vai refatorar
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
background: #f8fafc;
color: #1e293b;
}
/* TOPBAR */
.topbar {
background: #2563eb;
padding: 16px 32px;
display: flex;
justify-content: space-between;
align-items: center;
}
.topbar .brand {
color: #fff;
font-weight: 600;
font-size: 1.1rem;
}
.topbar .nav {
display: flex;
gap: 24px;
}
.topbar .nav a {
color: #fff;
text-decoration: none;
}
.topbar .nav a:hover {
text-decoration: underline;
}
/* HERO */
.hero {
padding: 64px 32px;
max-width: 720px;
margin: 0 auto;
}
.hero .name {
font-size: 2.5rem;
color: #2563eb;
margin-bottom: 8px;
}
.hero .role {
font-size: 1.1rem;
color: #64748b;
margin-bottom: 16px;
}
.hero .bio {
line-height: 1.7;
margin-bottom: 32px;
}
.hero .actions {
display: flex;
gap: 16px;
}
/* BOTOES */
.btn-primary {
background: #2563eb;
color: #fff;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
}
.btn-secondary {
background: transparent;
color: #2563eb;
padding: 12px 24px;
border-radius: 8px;
border: 2px solid #2563eb;
text-decoration: none;
font-weight: 600;
}
/* HABILIDADES */
.skills {
max-width: 720px;
margin: 0 auto 64px;
padding: 0 32px;
}
.skills .heading {
font-size: 1.4rem;
color: #1e293b;
margin-bottom: 24px;
}
.skills .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* CARDS */
.card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 24px;
}
.card .title {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 8px;
}
.card .desc {
font-size: 0.9rem;
color: #64748b;
margin-bottom: 16px;
line-height: 1.5;
}
.card .tag {
display: inline-block;
background: #eff6ff;
color: #2563eb;
padding: 4px 12px;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
}
/* FOOTER */
.footer {
background: #1e293b;
padding: 24px 32px;
text-align: center;
}
.footer .links a {
color: #94a3b8;
text-decoration: none;
margin: 0 12px;
}
.footer .links a:hover {
color: #fff;
}Você vai criar os arquivos SCSS. Para compilar, instale o Sass e rode:
sass --watch estilo.scss estilo.cssCaso não consiga realizar a instalação, utilize a alternativa online sem instalação: Sass Playground
Fase 1 — Variáveis
Leia a documentação de variáveis do Sass.
Avalie o CSS base e identifique onde o recurso de variáveis pode ser aplicado para melhorar a manutenibilidade do código.
Aplique as variáveis no seu arquivo SCSS.
Fase 2 — Nesting
Leia a documentação de aninhamento (nesting) do Sass, incluindo o uso do &.
Avalie o CSS base e reorganize os seletores usando nesting onde fizer sentido.
Fase 3 — Mixins
Leia a documentação de mixins do Sass.
Avalie o SCSS que você criou até agora e identifique padrões que poderiam ser abstraídos em um ou mais mixins.
Fase 4 — Partials
Leia a documentação de partials e do sistema de módulos do Sass (@use).
Divida seu SCSS em arquivos modulares e use @use para importá-los em um arquivo principal.
Desafio (opcional)
Leia sobre @extend e placeholders (%).
Avalie se há situações no seu SCSS onde @extend faria mais sentido do que um mixin. Aplique onde julgar adequado e registre no relatório.
Fase 5 — Entrega
Faça o questionário e entregue os arquivos refatorados na atividade do Moodle, conforme instruído. Todos os integrantes do grupo devem fazer a entrega individualmente.
scss-refatorado.zip— todos os arquivos.scsscriados pelo grupo