https://github.com/lucasreis0/calmariaspa

Este projeto utiliza o pré-processador SASS para estilizar um site de forma eficiente, aplicando conceitos como modularização de código, variáveis e mixins para criar uma experiência visualmente atraente e consistente para os usuários.
https://github.com/lucasreis0/calmariaspa

aninhamento css extend html mediaqueries mixins partials placeholders sass

Last synced: 12 days ago
JSON representation

Este projeto utiliza o pré-processador SASS para estilizar um site de forma eficiente, aplicando conceitos como modularização de código, variáveis e mixins para criar uma experiência visualmente atraente e consistente para os usuários.

• Host: GitHub
• URL: https://github.com/lucasreis0/calmariaspa
• Owner: LUCASREIS0
• Created: 2024-03-23T16:15:22.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-03-24T02:43:35.000Z (11 months ago)
• Last Synced: 2024-03-24T17:50:21.041Z (11 months ago)
• Topics: aninhamento, css, extend, html, mediaqueries, mixins, partials, placeholders, sass
• Language: SCSS
• Homepage: https://calmariaspar.vercel.app
• Size: 15.9 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        



    
 Projeto de Estilização com SASS 

    



## ℹ️ **Sobre o Projeto**

Este projeto é resultado da formação [*Aprofunde seus conhecimentos em CSS*](https://cursos.alura.com.br/formacao-css-estilos) da Alura, com foco no curso [**SASS e CSS: estilizando um site**](https://cursos.alura.com.br/course/sass-css-estilizando-site). O objetivo central foi aplicar os recursos avançados do pré-processador SASS para estilizar um site, priorizando a modularização, utilização de variáveis, mixins e partials.

## 🎯 **Objetivo**

O principal objetivo deste projeto foi *utilizar o pré-processador SASS* para criar folhas de estilos de **fácil manutenção**, **modularizar o código** e **aplicar estilos consistentes** em diferentes seções de um site.

## 🔧 **Funcionalidades**

- *Modularização de Código:* Organização dos estilos em `partials` para facilitar a manutenção.

- *Otimização com Variáveis:* Utilização de `variáveis` para cores, tamanhos e outras propriedades.

- *Criação de Mixins:* Códigos reutilizáveis para estilização dinâmica de seções e textos.

- *Estilos Avançados:* Implementação de estilos para seções específicas, como `Serviços` e `Desconto`.

- *Pseudo-classes e Parent Selector:* Aplicação de estilos avançados para interatividade.

- *Reutilização de Código:* Utilização de `@Extend` para evitar repetição e manter o código limpo.

- *Posicionamento e Estilização:* Posicionamento de imagens e estilização de formulários.

## 🧠 **Aprendizados em SASS e CSS**

Durante o desenvolvimento deste projeto, adquiri conhecimentos sólidos em:

- *Modularização e Organização de Código:* Utilizando partials e imports para manter o código organizado e escalável.

- *Otimização de Estilos:* Através de variáveis e mixins para reduzir a repetição e facilitar a manutenção.

- *Estilização Avançada:* Aplicando pseudo-classes e Parent Selector para estilização dinâmica.

- *Sintaxe Recuada:* Utilizando a sintaxe recuada para melhor legibilidade do código.

## 🚀 **Como Executar**

Para executar este projeto localmente, siga estas etapas:

1. **Clone o Repositório:** `git clone https://github.com/seu-usuario/seu-projeto.git`

2. **Instale o SASS:** `npm install -g sass` (caso ainda não tenha instalado).

3. **Navegue até o Diretório do Projeto:** `cd seu-projeto`

4. **Compile o SASS para CSS:** `sass --watch scss:css`

5. **Abra o Arquivo HTML:** Abra o arquivo `index.html` no seu navegador preferido.

## 🔗 *Versão Hospedada*

Uma versão hospedada deste projeto está disponível [aqui](https://calmariaspar.vercel.app/).

## 👤 **Autor**

Desenvolvido por [Lucas Reis](https://www.linkedin.com/in/lucasreisv/).



---