https://github.com/leandroffdev/sass
Aprendendo sobre Sass
https://github.com/leandroffdev/sass
Last synced: 5 months ago
JSON representation
Aprendendo sobre Sass
- Host: GitHub
- URL: https://github.com/leandroffdev/sass
- Owner: leandroffdev
- Created: 2024-06-16T02:38:30.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-16T18:03:06.000Z (almost 2 years ago)
- Last Synced: 2025-04-29T23:05:43.356Z (about 1 year ago)
- Language: SCSS
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sass
Aprendendo sobre Sass
[SASS](https://sass-lang.com/guide/)
> O SASS é uma linguagem de extensão do CSS, a sigla significa “Syntactically Awesome Style Sheets” traduzindo ao pé da letra, folhas de estilo com uma sintaxe incrível. A sua ideia é adicionar recursos especiais como variáveis, mixins, funções e operações e outras opções variadas
> para tornar o CSS mais fácil de escrever e manter.
> O SASS é compilado para CSS, portanto, os navegadores não precisam saber o que é o sass.
> O SASS é uma linguagem de programação que pode ser utilizada para criar CSS mais rápido.
### index.html
```
Olá Mundo!
```
### index.scss
```
body {
background: #cccccc;
h1 {
color: #333;
}
}
```
### Compilando o SASS para CSS
```
instalar a extenção "live sass" e clicar no botao "watch sass"
```
### index.css gerado
```
body {
background: #cccccc;
}
body h1 {
color: #333;
}
```
### Variável
```
$primary-color: #333;
$secondary-color: #eee;
$font: Helvetica, sans-sefit;
```
### Aninhamento
```
body {
background: $secondary-color;
h1 {
color: $primary-color;
}
&:after {
content: "";
width: 20px;
height: 20px;
background: $primary-color;
}
&:hover {
opacity: .5;
}
}
```
### Modulos
```
//_modulo1.scss
$primary-color: #333;
body {
font: Helvetica;
}
//index.scss
@use 'modulo1';
h1 {
color: modulo1.$primary-color;
}
```
### Mixins
- São um grupo de declarações CSS
```
@mixin tema($theme: DarkGray) {
background: $theme;
color: #fff
}
.info {
@include tema();
}
.alerta {
@include tema(DarkRed);
}
.success {
@include tema(DarkGreen);
}
```
### Extended
```
.contato {
@extended promocao;
}
```