11
Loiane Groner http://loiane.com Curso CSS3 com Sass e Compass: Sass com Linha de Comando

Curso CSS3 com Sass e Compass - Aula 03: Sass com Linha de Comando

Embed Size (px)

Citation preview

Page 1: Curso CSS3 com Sass e Compass - Aula 03: Sass com Linha de Comando

Loiane Gronerhttp://loiane.com

CursoCSS3 com

Sass e Compass:Sass com Linha de

Comando

Page 2: Curso CSS3 com Sass e Compass - Aula 03: Sass com Linha de Comando

Agenda• Compilar Sass em CSS manualmente

• Compilar Sass em CSS automaticamente

• Engenharia Reversa: CSS para SCSS

Page 3: Curso CSS3 com Sass e Compass - Aula 03: Sass com Linha de Comando

Requisitos

• Ruby• Gem Sass• Editor texto• Terminal (Linux e Mac)• Terminal Ruby (Windows)

Page 4: Curso CSS3 com Sass e Compass - Aula 03: Sass com Linha de Comando

.vermelho { color: red;}

aula03.scss

Page 5: Curso CSS3 com Sass e Compass - Aula 03: Sass com Linha de Comando

$ sass aula03.scss

Page 6: Curso CSS3 com Sass e Compass - Aula 03: Sass com Linha de Comando

$ sass --watch curso/sass:curso/css

Page 7: Curso CSS3 com Sass e Compass - Aula 03: Sass com Linha de Comando

$ sass-convert aula03.css aula03.scss

Page 10: Curso CSS3 com Sass e Compass - Aula 03: Sass com Linha de Comando

.contato { email: ‘[email protected]’; blog: ‘loiane.com’; facebook: ‘facebook.com/loianegroner’; twitter: ‘@loiane’; github: ‘loiane’; vimeo: ‘loiane’; youtube: ‘loianeg’;}

Page 11: Curso CSS3 com Sass e Compass - Aula 03: Sass com Linha de Comando

Obrigada!