+

SASS e Multiplos Temas

Aprendendo a aplicar varios temas no Angular

Entendendo um pouco sobre Folhas de Estilo CSS

CSS - Cascading Style Sheets (ou Folhas de estilo em cascata) - é a linguagem fundamental utilizada para descrever a apresentação de um documento HTML, permitindo definir cores, fontes, layouts e outras propriedades visuais.

Sintaxe

Resultado

body {
  margin: 0;
}

.login {
  min-height: 100vh;
  background-color: #fa9d48;
  display: flex;
  justify-content: center;
  align-items: center;
}

form {
  width: 250px;
  padding: 50px;
  background-color: #fafafa;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

label {
  display: flex;
  justify-content: space-between;
  font-family: Tahoma, sans-serif;
}

O que e o SASS?

SASS é o superpoder que o CSS sempre quis ter. Ele te permite usar variáveis, aninhar seletores, criar mixins (uma espécie de função para CSS) e muito mais, o que deixa seu código mais limpo e fácil de manter. Ele nos ajuda a organizar melhor os estilos, economizando tempo e dor de cabeça - especialmente em projetos grandes.

Sintaxe

Resultado

$primary-color: #001514
$text-color: #C2D076

body
  font-family: Arial, sans-serif
  color: $primary-color
  background-color: lighten($text-color, 90%)

  .container
    width: 80%
    margin: 0 auto
    
    .header
      background-color: darken($primary-color, 10%)
      padding: 20px
      text-align: center
      color: $text-color

Compilado

Tudo que escrevemos na sintaxe SASS precisa ser compilado para CSS normal, para que os navegadores consigam aplicar a folha de estilo.

Browser

Variáveis de aninhamento

Compilado CSS

$gap-s: 8px
$gap-m: 16px
$gap-l: 24px

$font-family-default: Arial, sans-serif

$color-primary: cornflowerblue

nav 
  ul 
  margin: 0
  padding: 0
  list-style: none
  display: flex
  gap: $gap-m
  li 
    a 
    text-decoration: none
    font-family: $font-family-default
    color: $color-primary
nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 16px;
}
nav li {
  text-decoration: none;
  font-family: Arial, sans-serif;
  color: cornflowerblue;
}

Mixins

Compilado CSS

$cor-principal: #3498db 
$cor-cancelar: #e74c3c 

@mixin botao-estiloso($cor)
  padding: 10px 20px
  border-radius: 5px
  background-color: $cor
  color: #ffffff
  &:hover
    background-color: darken($cor, 10%)

.botao-comprar
  @include botao-estiloso($cor-principal)

.botao-cancelar
  @include botao-estiloso($cor-cancelar)
.botao-comprar {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #3498db;
  color: #ffffff;
}
.botao-comprar:hover {
  background-color: #217dbb;
}

.botao-cancelar {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #e74c3c;
  color: #ffffff;
}
.botao-cancelar:hover {
  background-color: #d62c1a;
}

Funções

Compilado CSS

@function area-do-circulo($raio)
  $pi: 3.14159
  @return $pi * $raio * $raio

.borda 
  border: area-do-circulo(5) * 1px solid #3498db
  padding: 20px
  margin: 20px
  text-align: center
  background-color: #f0f0f0
  border-radius: 10px
.borda {
  border: 78.53975px solid #3498db;
  padding: 20px;
  margin: 20px;
  text-align: center;
  background-color: #f0f0f0;
  border-radius: 10px;
}

Heranças

Compilado CSS

.message
  padding: 10px
  border: 1px solid #ccc
  color: #333333

.success
  @extend .message
  border-color: green

.error
  @extend .message
  border-color: red

.warning
  @extend .message
  border-color: orange
.message, .warning, .error, .success {
  padding: 10px;
  border: 1px solid #ccc;
  color: #333333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: orange;
}

Segue a arquitetura padrão de um projeto em SASS

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Typography rules
|   ...                  # Etc…
|
|– components/
|   |– _buttons.scss     # Buttons
|   |– _carousel.scss    # Carousel
|   |– _cover.scss       # Cover
|   |– _dropdown.scss    # Dropdown
|   ...                  # Etc…
|
|– layout/
|   |– _navigation.scss  # Navigation
|   |– _grid.scss        # Grid system
|   |– _header.scss      # Header
|   |– _footer.scss      # Footer
|   |– _sidebar.scss     # Sidebar
|   |– _forms.scss       # Forms
|   ...                  # Etc…
|
|– pages/
|   |– _home.scss        # Home specific styles
|   |– _contact.scss     # Contact specific styles
|   ...                  # Etc…
|
|– sass-utils/
|   |– _variables.scss   # Sass Variables
|   |– _functions.scss   # Sass Functions
|   |– _mixins.scss      # Sass Mixins
|   |– _helpers.scss     # Class & placeholders helpers
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   ...                  # Etc…
|
|
`– style.scss            # Primary Sass file

O que é SCSS ?

SCSS é uma forma de usar o SASS que se parece bastante com o CSS tradicional. Se você não foi muito com a cara da sintaxe original do SASS, que tem um estilo mais sucinto, o SCSS mantém a estrutura familiar do CSS, assim a transição fica bem mais tranquila.

 

Como vimos, o SASS utiliza uma sintaxe baseada em indentação, sem precisar de chaves {} e ;

Exemplo

Compilado CSS

$primary-color: #3498db;

body {
  background-color: $primary-color;
  font: 100% Helvetica, sans-serif;
}

h1 {
  color: darken($primary-color, 80%);
  font-size: 2em;
}
body {
  background-color: #3498db;
  font: 100% Helvetica, sans-serif;
}

h1 {
  color: black;
  font-size: 2em;
}

Funcionalidades do SASS adicionadas no CSS puro.

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-family: "Arial", sans-serif;
  --padding: 10px;
  --hover-opacity: 0.9;
}

body {
  font-family: var(--font-family);
  padding: var(--padding);
  background-color: var(--primary-color);
  color: #ffffff;

  button {
    background-color: var(--secondary-color);
    color: #ffffff;
    padding: var(--padding);
    border: none;
    border-radius: 5px;

    &:hover {
      background-color: var(--secondary-color);
      opacity: var(--hover-opacity);
    }
  }
}

Qual escolher?

Comparações SASS e SCSS

Recurso SASS SCSS
Extensão de arquivo .sass .scss
Sintaxe Sintaxe baseada em indentação, sem chaves ou ponto e vírgula. Sintaxe semelhante ao CSS, com chaves e ponto e vírgula.
Compatibilidade Requer uma sintaxe diferente, não é diretamente compatível com o CSS padrão. Totalmente compatível com CSS padrão.
Uso Preferido por aquelas pessoas que gostam de uma sintaxe mais simplificada. Ideal para pessoas desenvolvedoras em transição do CSS.
Flexibilidade Mais conciso e limpo para algumas pessoas desenvolvedoras. Familiar para quem conhece CSS.

Congrats

Referências

Angular SASS

By Frank Lima

Made with Slides.com

Angular SASS

  • 156

More from Frank Lima