Sass é um pré-processador CSS que adiciona funcionalidades como variáveis, aninhamento, operações matemáticas e mixins para manter os arquivos CSS organizados e reutilizáveis. Ele permite definir variáveis, aninhar seletores CSS, fazer operações matemáticas e criar mixins reutilizáveis para estilizar componentes de forma dinâmica. Sass compila os arquivos .scss em CSS normal para que seja compatível com todos os navegadores.

1. SassNurielly Caroline Brizola
http://sass-lang.com/guidenurycaroline@gmail.com
@nurycaroline

2. Sass
● Pré-processadores CSS3 são linguagens criadas com
um único propósito de adicionar funcionalidades legais
e criativas para o CSS sem quebrar a compatibilidade
entre browsers.
● Ajuda a manter grandes planilhas de estilo organizadas.

3. Variáveis

4. Variáveis
$width: 5px;
$red: #f4425c;
#sidebar {
width: $width;
color: $red;
}
#sidebar {
width: 5px;
color: #f4425c;
}
Resultado

5. Aninhamento

6. Nesting / Aninhamento
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
}

7. Nesting / Aninhamento - Resultado
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}

8. Operações

9. Operações
article[role="main"] {
float: left;
width:
600px/960px*100%;
}
article[role="main"]{
float: left;
width: 62.5%;
}
Resultado

10. Mixin

11. Mixin
$red: 'red';
@mixin input-color($color) {
border: 2px solid $color;
color: $color;
}
.input.red buttom{
background-color: #FFF;
@include input-color($red);
}

12. Mixin - Resultado
.input.red buttom {
border: 2px solid "red";
color: "red";
}

13. Condicionais

14. Condicionais
$colors: (red: $red, blue: $blue);
@each $type, $color in $colors {
.#{$type}{
color: $color;
}
.b-#{$type}{
background-color: $color;
}
}

15. Condicionais - Resultado
.red {
color: #C43D27;
}
.b-red {
background-color: #C43D27;
}
.blue {
color: #07BED6;
}
.b-blue {
background-color: #07BED6;
}

16. Mixin Each
$red: 'red'; $blue: 'blue';
$colors: (red: $red, blue: $blue);
@mixin input-color($color) {
border: 2px solid $color;
color: $color;
}
@each $chave, $color in $colors {
.configs.#{$chave} input{
background-color: #FFF;
@include input-color($color);
}
}

17. Mixin Each - Resultado
.configs.red input {
background-color: #FFF;
border: 2px solid "red";
color: "red";
}
.configs.blue input {
background-color: #FFF;
border: 2px solid "blue";
color: "blue";
}

18. React + SASS
import './App.sass';
export default class App extends
React.Component {
render() {
return (
<div className=”red”><div>
);
}
}

19. Perguntas

20. Contato

21. Agradecimentos