Slides para um talk rápida sobre conceitos e ferramentas iniciais em SASS, um pré-processador CSS.

1. Iniciando com SASS
CSS with superpowers

2. Hi!
Camila Lopes

3. 3
O SASS é tanto uma linguagem de extensão
quanto um pré-processador CSS. Basicamente a
função de um pré-processador é possibilitar o uso
de recursos que ainda não existem na
linguagem nativa, no caso do CSS: variáveis,
aninhamento, mixins, herança e outros.
Conceito

5. This is a great
headline
And this is the subtitle that
makes it comprehensible
SCSS SASS
$font-stack : Helvetica , sans-serif;
$primary-color : #333;
body {
font: 100% $font-stack ;
color: $primary-color ;
}
$font-stack : Helvetica , sans-serif
$primary-color : #333
body
font: 100% $font-stack
color: $primary-color

6. Produtividade
Quais são as
principais
vantagens ?
Manutenção
Mesmo resultado com menos
código utilizando funções,
herança, regras aninhadas,
estruturas de repetição,
operadores e muito mais.
Código modularizado, presença de
variáveis, suporte a
reaproveitamento de código.

7. Alternativas
para fazer a
transpilação.

8. 8
Mão na massa.
Vamos codar!

9. Thanks!
Does anyone have any questions?
contact@camilalopes.me
camilalopes.me