Compreendendo 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:
- Utilizar a extensão do Visual Studio Code - Live Sass Compiler;
- Utilizar o aplicativo - Scout App.
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.04
Compreendendo 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:
- Utilizar a extensão do Visual Studio Code - Live Sass Compiler;
- Utilizar o aplicativo - Scout App.
Obrigado pelo seu feedback!