Skip to content

Commit 4b3564e

Browse files
geraud01geraud01
committed
Exercicio Sass III
0 parents  commit 4b3564e

14 files changed

+345
-0
lines changed

‎Aulas/.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.DS_Store*
2+
css*

‎Aulas/README.md

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# SASS
2+
Referência: https://sass-lang.com/
3+
4+
## Introdução a pré-processadores
5+
São ferramentas utilizadas para aumentar a produtividade no desenvolvimento CSS, mantentendo a compatibilidade entre as versões do CSS nos navegadores.
6+
7+
- SASS https://sass-lang.com/
8+
- Stylus https://stylus-lang.com/
9+
- Less https://lesscss.org/
10+
- PostCSS https://postcss.org/
11+
12+
## Preprocessamento
13+
- Processo de interpretação intermediário
14+
- Antes do processamento do navegador
15+
- Prevenção de erros
16+
- Organização
17+
- Reaproveitamento
18+
19+
## Variáveis
20+
- Facilitam a customização e reaproveitamento
21+
22+
## Identação / Hirarquia
23+
- Estruturação de componentes
24+
- Herança
25+
- Evita sobreposição
26+
27+
## Partials
28+
- Modularizar o código
29+
- snippets
30+
31+
32+
## Code Together
33+
34+
1. ter no node instalado
35+
2. instalar o sass (https://sass-lang.com/install):
36+
```
37+
npm install -g sass
38+
```
39+
3. criar projeto ou clonar o repositório
40+
4. criar ou alterar arquivo style.scss
41+
5. rodar o comando para processar o css:
42+
```
43+
sass ./scss/style.scss ./css/style.css
44+
```
45+
46+
6. customizar o projeto
47+
7. salvar alterações
48+
8. comitar no seu repositório
49+
9. enviar o link do repositório para o portal da EBAC

‎Aulas/images/pexels-mike-244206.jpg

160 KB
Loading

‎Aulas/images/pexels-mike-431950.jpg

54.3 KB
Loading

‎Aulas/images/pexels-pixabay-248747.jpg

14.7 KB
Loading

‎Aulas/images/pexels-torsten-dettlaff-70912.jpg

42.8 KB
Loading

‎Aulas/index.html

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="./css/style.css">
8+
<title>Módulo Sass</title>
9+
</head>
10+
<body>
11+
<header>
12+
<div class="container">
13+
<h4>Loja de Carros</h4>
14+
</div>
15+
</header>
16+
<section>
17+
<div class="destack">
18+
<div class="container">
19+
<h1 class="destack__title">Audi A5</h1>
20+
<h2 class="destack__subtitle">Destaque</h2>
21+
<img class="destack__image" src="./images/pexels-mike-244206.jpg" alt="Foto Audi por Mike em Pexels">
22+
<p class="destack__description">Carro seminovo, 4 portas, completo com ar-condicionado, vidro e travas elelétricas.</p>
23+
</div>
24+
</div>
25+
<div class="container">
26+
<div class="blocks cars">
27+
<h3 class="blocks__title cars__title">Ver Carros</h3>
28+
<ul class="blcks__list cars__list">
29+
<li class="blocks__item cars__item cars__item--destack">
30+
<div class="blocks__img-container cars__img-container">
31+
<img src="./images/pexels-mike-431950.jpg" alt="Foto Mike em Pexels">
32+
</div>
33+
<p class="blocks__description blocks__description--destack">Painel Elegante e moderno </p>
34+
<a class="blocks__button cars__button" href="#01">Ver mais</a>
35+
</li>
36+
<li class="blocks__item cars__item">
37+
<div class="blocks__img-container cars__img-container">
38+
<img src="./images/pexels-pixabay-248747.jpg" alt="Foto Pixabay Pixels">
39+
</div>
40+
<p class="blocks__description">Na velociade do seus sonhos </p>
41+
<a class="blocks__button cars__button" href="#02">Ver mais</a>
42+
</li>
43+
<li class="blocks__item cars__item">
44+
<div class="blocks__img-container cars__img-container">
45+
<img src="./images/pexels-torsten-dettlaff-70912.jpg" alt="Foto Pexels Torsten">
46+
</div>
47+
<p class="blocks__description">Design arrojado e moderno </p>
48+
<a class="blocks__button cars__button" href="#03"> Ver mais</a>
49+
</li>
50+
</ul>
51+
</div>
52+
</div>
53+
</section>
54+
<footer>
55+
<div class="container">
56+
<p> &copy; Desenvolvido por Geraud Oliveira.</p>
57+
</div>
58+
</footer>
59+
60+
</body>
61+
</html>

‎Aulas/scss/_bikes.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import 'blocks';
2+
3+
.bikes{
4+
5+
}

‎Aulas/scss/_blocks.scss

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.blocks {
2+
3+
padding: 3rem 0;
4+
5+
&__title {
6+
color: $color-01;
7+
}
8+
9+
10+
&__list {
11+
list-style-type: none;
12+
font-size: $font-small;
13+
display: block;
14+
float: left;
15+
height: auto;
16+
margin: $space-default auto;
17+
padding: 1rem 0;
18+
width: 100%;
19+
}
20+
21+
&__item {
22+
color: $color-02;
23+
display: block;
24+
margin: $space-default auto;
25+
width: calc(100% / 3 - 15px);
26+
27+
@media (max-width: $tablet){
28+
width: calc(99% - 30px);
29+
30+
}
31+
32+
}
33+
34+
&__img-container {
35+
display: block;
36+
height: 15rem;
37+
overflow: hidden;
38+
width: 100%;
39+
@media (max-width: $tablet) {
40+
height: 20rem;
41+
42+
}
43+
44+
}
45+
46+
&__button {
47+
background-color: $color-01;
48+
border-radius: 5px;
49+
color: white;
50+
display: block;
51+
font-size: $font-medium;
52+
margin: $mt-02 auto $mb;
53+
padding: 4px 8px;
54+
text-align: center;
55+
text-decoration: none;
56+
}
57+
}

‎Aulas/scss/_cars.scss

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@import 'blocks';
2+
3+
@mixin theme($theme: $color-01, $bg: $color-04) {
4+
background-color: $bg;
5+
border: 1px solid $theme;
6+
box-shadow: 0 0 1px rgba($color-default, .25);
7+
}
8+
9+
.cars {
10+
11+
&__title {
12+
color: $color-02;
13+
}
14+
15+
&__item {
16+
@include theme ($theme: $color-default, $bg: $bg-color);
17+
color: $color-04;
18+
display: block;
19+
height: max-content;
20+
justify-content: center;
21+
align-items: baseline;
22+
flex-flow: column;
23+
24+
&--destack{
25+
@include theme;
26+
}
27+
}
28+
29+
&__button {
30+
background-color: $color-default;
31+
}
32+
}
33+

‎Aulas/scss/_destack.scss

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.destack {
2+
background-color: $color-04;
3+
padding: $space-default;
4+
5+
&__title {
6+
color: $color-03;
7+
float: left;
8+
font-size: $font-big;
9+
margin-top: 0;
10+
}
11+
&__subtitle {
12+
float: left;
13+
font-size: $font-small;
14+
margin-left: $space-default;
15+
margin-top: $mt;
16+
}
17+
&__image {
18+
width: 100%;
19+
height: auto;
20+
margin: $space-default auto;
21+
}
22+
&__description {
23+
font-size: $font-normal;
24+
color: $color-02;
25+
padding: 2rem 0;
26+
width: 100%;
27+
}
28+
}

‎Aulas/scss/_reset.scss

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@use'sass:math';
2+
3+
* {
4+
border: 0;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
html {
10+
font-size: 62.5%;
11+
}
12+
13+
div,
14+
p {
15+
display: block;
16+
}
17+
18+
article,
19+
header,
20+
section,
21+
footer {
22+
display: block;
23+
margin: 0 auto;
24+
width: 100%;
25+
padding: 4rem 0;
26+
}
27+
28+
section {
29+
padding: 0;
30+
}
31+
32+
.container {
33+
margin: 0 auto;
34+
max-width: math.div(1000, 1200)*100%;
35+
36+
}
37+
38+
@media (max-width: 1199px) {
39+
.container {
40+
max-width: math.div(1000, 1200)*100%;
41+
}
42+
43+
}
44+
45+
img {
46+
width: 100%;
47+
height: auto;
48+
}
49+
50+
body {
51+
font-family: $font-family-default;
52+
font-size: $font-small;
53+
color: $color-default;
54+
}
55+
56+
p {
57+
color: $color-01;
58+
font-size: $font-normal;
59+
margin-bottom: $mb;
60+
text-align: $align;
61+
}
62+
63+
h1 {
64+
color: $color-01;
65+
font-family: Georgia, 'Times New Roman', Times, serif;
66+
font-size: $font-big;
67+
margin-top: $mt-02;
68+
}
69+
70+
h2 {
71+
color: $color-02;
72+
font-size: $font-medium;
73+
}
74+
75+
h3 {
76+
color: $color-03;
77+
font-size: $font-normal;
78+
}
79+
80+
header,
81+
footer {
82+
background-color: $bg-color
83+
}
84+
85+
86+
footer {
87+
color: $color-04
88+
}

‎Aulas/scss/_vars.scss

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
$align: left;
2+
$bg-color: #ddd;
3+
$color-01: #f01;
4+
$color-02: #999;
5+
$color-03: #f00;
6+
$color-04: #222;
7+
$color-default: #444;
8+
$font-big: 3rem;
9+
$font-family-default: Arial, Helvetica, sans-serif;
10+
$font-medium: 2.2rem;
11+
$font-normal: 1.5rem;
12+
$font-small: 1.2rem;
13+
$mb: 1.5rem;
14+
$mt: 1.5rem;
15+
$mt-02: 3rem;
16+
$space-default: 1.5rem;
17+
$tablet: 999px

‎Aulas/scss/style.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import 'vars';
2+
@import 'reset';
3+
@import 'cars';
4+
@import 'bikes';
5+
@import 'destack';

0 commit comments

Comments
 (0)