Scribd
Carregar
3 visualizações11 páginas

Aula 2 - CSS

O documento aborda CSS e SASS, explicando que CSS (Cascading Style Sheets) é utilizado para estilizar páginas web, enquanto SASS (Syntactically Awesome Stylesheets) é um pré-processador que adiciona funcionalidades como variáveis e aninhamento. O CSS é estruturado em seletores, propriedades e valores, e inclui conceitos como Box Model, Flexbox e Grid Layout. O SASS permite uma escrita mais organizada e reutilizável de estilos, facilitando a manutenção do código.

Enviado por

joaolucasfrangiotti3
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
3 visualizações11 páginas

Aula 2 - CSS

O documento aborda CSS e SASS, explicando que CSS (Cascading Style Sheets) é utilizado para estilizar páginas web, enquanto SASS (Syntactically Awesome Stylesheets) é um pré-processador que adiciona funcionalidades como variáveis e aninhamento. O CSS é estruturado em seletores, propriedades e valores, e inclui conceitos como Box Model, Flexbox e Grid Layout. O SASS permite uma escrita mais organizada e reutilizável de estilos, facilitando a manutenção do código.

Enviado por

joaolucasfrangiotti3
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

CSS & SASS

CSS
O que é CSS?

● Cascading Style Sheets: Folhas de Estilo em Cascata, utilizadas para definir o visual de páginas web.
● Permite separar o conteúdo HTML da apresentação visual.

Como funciona?

● O CSS utiliza seletores para aplicar estilos aos elementos HTML.


● Exemplo:

Sintaxe do CSS

● Seletor: Identifica o elemento (ex: h1, .classe, #id).


● Propriedade: O que será modificado (ex: color).
● Valor: A nova configuração (ex: blue).
CSS
2. Principais Conceitos de CSS
Box Model

● Representa o layout de cada elemento como uma caixa.


● Componentes:
○ content: Conteúdo do elemento.
○ padding: Espaçamento interno.
○ border: Borda.
○ margin: Espaçamento externo.

Flexbox

● Sistema de layout unidimensional para organizar itens em linha ou coluna.


● Exemplo:
●
CSS
CSS
Grid Layout

● Sistema bidimensional para criar layouts complexos.


● Exemplo:
CSS
Sass
3. Introdução ao Sass
O que é Sass?

● Syntactically Awesome Stylesheets: Pré-processador CSS que adiciona funcionalidades como variáveis, aninhamento e mixins.

Vantagens do Sass

● Variáveis para reutilizar valores.


● Aninhamento para organizar o código.
● Mixins para reaproveitar blocos de código.

Exemplo de Sass
Sass
3. Introdução ao Sass
3.1 Configuração do Sass

Para utilizar o Sass, siga os passos abaixo:

1. Criar um arquivo com a extensão .scss

O arquivo .scss é uma das duas sintaxes suportadas pelo Sass. Ele mantém a estrutura do CSS tradicional, mas adiciona recursos avançados como variáveis,
aninhamento e mixins. Isso facilita a transição para quem já conhece CSS. A outra sintaxe, .sass, usa indentação em vez de chaves e ponto-e-vírgula, mas é menos
popular.

O SCSS (Sassy CSS) é a sintaxe mais utilizada do Sass, pois mantém a estrutura tradicional do CSS, e como falado acima, ele adiciona funcionalidades avançadas como variáveis,
mixins, aninhamento e importações. Ele usa chaves {}, ponto-e-vírgula ; e é compatível com CSS puro, o que facilita a migração de projetos existentes.

3.2 Converter Scss para css

Utilizando node, você pode instalar o pacote de forma global: npm install -g sass

Em seguida rodar o comando sass [Link] [Link] para realizar a conversão

Para compilar automaticamente sempre que houver uma alteração: sass --watch [Link]:[Link]
Sass
Exemplo com Aninhamento

● Aninhamento permite escrever CSS de forma hierárquica, refletindo a estrutura HTML.

● Explicação:
○ Cada nível representa um elemento aninhado no HTML.
○ Facilita a leitura e manutenção do código CSS.
Sass
Exemplo com Mixins

● Mixins permitem criar blocos reutilizáveis de CSS.


● Explicação:
○ @mixin define o bloco reutilizável.
○ @include aplica o mixin, passando parâmetros para personalizar.
Contatos

[Link]@[Link] (Identificar com RA, Nome, Turma)

[Link]

[Link] (Pessoal)
[Link] (Academico)

Você também pode gostar