Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Compreendendo a Sintaxe do Sass para um CSS Aprimorado | Pré-Processadores CSS e Sass
Técnicas Avançadas de CSS

bookCompreendendo a Sintaxe do Sass para um CSS Aprimorado

Para começar a escrever código sass, é necessário criar um arquivo com a extensão .scss. (por exemplo, feature.scss).

Vamos analisar a sintaxe do sass utilizando o seguinte código css. Manipularemos o botão que terá um efeito de hover. Escrevemos o código css para isso:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
}

.button:hover {
  background-color: darkmagenta;
}

Vamos reescrever o mesmo código utilizando a sintaxe do sass:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
  
  &:hover {
    background-color: darkmagenta;
  }
}

A diferença é que utilizamos estilos para um elemento dentro do primeiro par de chaves {}. Além disso, não utilizamos o nome da classe do elemento duas vezes. Utilizamos o símbolo comercial (&) em seu lugar.

Nota

Em caso de dúvidas ou dificuldades com algum recurso do sass, é altamente recomendado utilizar a documentação do sass.

Compilação

Os navegadores não compreendem a sintaxe de pré-processadores. Eles entendem apenas as sintaxes de html, css e javascript. Então, como funciona? É necessário compilar o arquivo sass para um arquivo css. Após a compilação, será possível visualizar o resultado.

Existem as seguintes opções para compilar Sass em CSS:

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 7. Capítulo 2

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.04

bookCompreendendo a Sintaxe do Sass para um CSS Aprimorado

Deslize para mostrar o menu

Para começar a escrever código sass, é necessário criar um arquivo com a extensão .scss. (por exemplo, feature.scss).

Vamos analisar a sintaxe do sass utilizando o seguinte código css. Manipularemos o botão que terá um efeito de hover. Escrevemos o código css para isso:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
}

.button:hover {
  background-color: darkmagenta;
}

Vamos reescrever o mesmo código utilizando a sintaxe do sass:

.button {
  font-size: 24px;
  color: green;
  background-color: rebeccapurple;
  
  &:hover {
    background-color: darkmagenta;
  }
}

A diferença é que utilizamos estilos para um elemento dentro do primeiro par de chaves {}. Além disso, não utilizamos o nome da classe do elemento duas vezes. Utilizamos o símbolo comercial (&) em seu lugar.

Nota

Em caso de dúvidas ou dificuldades com algum recurso do sass, é altamente recomendado utilizar a documentação do sass.

Compilação

Os navegadores não compreendem a sintaxe de pré-processadores. Eles entendem apenas as sintaxes de html, css e javascript. Então, como funciona? É necessário compilar o arquivo sass para um arquivo css. Após a compilação, será possível visualizar o resultado.

Existem as seguintes opções para compilar Sass em CSS:

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 7. Capítulo 2
some-alt