O documento apresenta uma introdução ao SASS (Syntactically Awesome Style Sheets), um pré-processador CSS. O palestrante discute como o SASS permite escrever CSS de forma mais inteligente e organizada através de recursos como variáveis, aninhamento, mixins e herança. Ele também introduz o framework Compass e a biblioteca Susy para grids responsivos, mostrando como esses ferramentas podem facilitar e agilizar o desenvolvimento web.

1. Agilizando o desenvolvimento
web com SASS
Com Renato Galvão
#mktmeetup

2. Quem é esse ser inanimado aqui na frente?
● Tenho 28 anos
● Trabalho na Mktvirtual há 4 anos
● Sou formado Técnico em informática pelo
SENAI - Santos
● Abandonei um curso de Desenvolvimento
de Sistemas Comerciais na CEFET Cubatão pra entrar na FATEC
● Me arrependi amargamente quando
descobri que o Curso da CEFET era
infinitamente melhor que a FATEC

3. O que vamos ver hoje?
● Relembraremos o funcionamento básico de uma página web (HTML +
CSS)
● Necessidades de existir uma forma inteligente de escrever CSS
● SASS
● Introdução rápida ao Susy
● Compass
● Surpresinha

4. Funcionamento básico de uma página web

5. Funcionamento básico de uma página web

6. Funcionamento básico de uma página web
Uma folha de estilos consiste num conjunto de propriedades CSS(Cascading
Style Sheet) que alteram as características dos elementos HTML.
Com a folha de estilos você pode estilizar margens, espaçamentos, fontes,
planos de fundo, bordas, efeitos de mouse over, e etc… nas tags HTML.
Exemplo:

7. Necessidades de existir uma forma inteligente de
escrever CSS
● Quanto maior o projeto mais difícil e trabalhosa a manutenção dos CSS’
s
● Dependendo do projeto alguns arquivos CSS podem ficar com até
milhares de linhas

8. Necessidades de existir uma forma inteligente de
escrever CSS
Em resumo: “Pega o pessoal de camisa vermelha e troca pra azul belê?”

9. Necessidades de existir uma forma inteligente de
escrever CSS
A
MAIOR e principal delas:
● Por muitas e muitas vezes você já se pegou copiando grandes classes de
CSS e se perguntou: “Será que não tem algum jeito de fazer isso de
forma mais inteligente?”

11. Syntactically Awesome Style Sheets
http://sass-lang.com/

12. O que exatamente é o SASS?
O que dizem por aí:
O SASS é um pré-processador escrito em Ruby que permite
que sejam aplicadas técnicas de programação em arquivos
CSS.

13. O que exatamente é o SASS?
O que EU digo:
O SASS é um pré-processador muito FODA que me trouxe de
volta a ALEGRIA DE VIVER e muitas horas a menos de
trabalho!

14. Instalação do SASS
Windows
1. Instale o Ruby (http://www.rubyinstaller.org/)
2. Abra o Prompt com Ruby
3. Digite o comando “gem install sass”
4. Feito!

15. Instalação do SASS
Mac
1. Abra o terminal
2. Digite o comando “gem install sass”
3. Feito!

16. Executando o SASS
Criei um diretório chamado: “palestra-sass”
A estrutura dele é a seguinte:
<- HTML5 Boilerplate

17. Executando o SASS
Abra sua pasta do projeto Ex: “/htdocs/palestra-sass/”
1. Abra o terminal ou prompt com ruby
2. Digite o comando “sass --watch sass/:css/”
Toda alteração feita em qualquer arquivo dentro da pasta
sass o compilador irá reconhecer e gerar o arquivo .css
respectivo na pasta css.

18. Primeiros passos utilizando o SASS
SCSS
SASS

19. Primeiros passos utilizando o SASS
Variáveis

20. Primeiros passos utilizando o SASS
Aninhamentos ou Nesting

21. Primeiros passos utilizando o SASS
Imports

22. Primeiros passos utilizando o SASS
Mixins

23. Primeiros passos utilizando o SASS
Herança ou Inheritance

24. Primeiros passos utilizando o SASS
Operadores matemáticos

25. Primeiros passos utilizando o SASS
Pseudo elementos

26. Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa

27. Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa

28. Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa

29. Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa

30. Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa
De qualquer forma, não tem problema nenhum em importar
um SCSS dentro do SASS, e um SCSS dentro de um SASS.
Converter seria só por TOC, ou organização mesmo. =]

31. Primeiros passos utilizando o SASS
Tipos de saída: default
Comando: sass --watch sass/:css/

32. Primeiros passos utilizando o SASS
Tipos de saída: compact
Comando: sass --style compact --watch sass/:css/

33. Primeiros passos utilizando o SASS
Tipos de saída: expanded
Comando: sass --style expanded --watch sass/:css/

34. Primeiros passos utilizando o SASS
Tipos de saída: compressed
Comando: sass --style compressed--watch sass/:css/

35. O que já sabemos até agora sobre SASS ?
O que é o SASS
Como instalar o SASS
A diferença entre SCSS ou SASS
Permite o uso de variáveis, aninhamento, mixins, imports,
herança e operadores matemáticos
● Converter para SCSS ou SASS ou importar diretamente.
●
●
●
●

36. O que já sabemos até agora sobre SASS ?
Dúvidas até
aqui?

37. Indo um pouco mais à fundo no SASS
Placeholder selector: %

38. Indo um pouco mais à fundo no SASS
Color operations

39. Indo um pouco mais à fundo no SASS
Color operations (funções RGB)

40. Indo um pouco mais à fundo no SASS
Color operations (funções Hue, Saturation, Lightness)

41. Indo um pouco mais à fundo no SASS
Interpolação

42. Indo um pouco mais à fundo no SASS
@if, !default e @debug

43. Indo um pouco mais à fundo no SASS
@if, !default e @debug

44. Indo um pouco mais à fundo no SASS
@if, !default e @debug

45. Indo um pouco mais à fundo no SASS
@for

46. Indo um pouco mais à fundo no SASS
@each

47. Indo um pouco mais à fundo no SASS
@function

48. http://compass-style.org/

49. O que é o Compass ?
O Compass é um Framework de criação de CSS.
É também considerado um plugin para o SASS, já que é
possível incluí-lo no próprio comando de watch do SASS.

50. O que é o Compass ?
Lembram dos slides sobre @mixin e @function do SASS?
O Compass é um framework com centenas de @mixins e
@functions criadas para facilitar sua vida ao máximo.

51. Instalando o Compass
O processo é bem parecido com o do SASS, um pouco mais
simples porquê agora já temos o Ruby instalado. =]
1. Abra o terminal/prompt
2. Digite o comando “gem update --system”
3. Depois, o comando “gem install compass”

52. Criando um projeto Compass
Diferentemente do SASS, o Compass precisa de um arquivo
de configuração básico para “conhecer” sua estrutura.
Para criar um projeto Compass, faça o seguinte comando:
1. Abra o terminal/prompt
2. Digite o comando “compass create <path>”
3. Nesse exemplo usei “compass create palestra-sass”

53. Criando um projeto Compass
O Compass criará uma estrutura básica:
sass
css

54. Criando um projeto Compass
E um config.rb padrão:
Que você configura conforme sua necessidade:

55. Criando um projeto Compass
Então para rodar o processo de “watch” você vai precisar
rodar um dos comandos abaixo.
1. Abra o terminal/prompt e vá até seu projeto
2. Digite o comando “compass watch”
3. Ou “sass --compass --watch sass:css”

56. Mas como o Compass ajuda afinal?
Digamos que você quer colocar um “opacity” de 40% na
classe “fade”.
Para fazer isso de uma maneira Cross-browser você
precisaria escrever assim:

57. Mas como o Compass ajuda afinal?
Com o Compass, você só precisa escrever isso:
Mesma coisa para o “border-radius”:

58. Mas como o Compass ajuda afinal?
Também para o “box-sizing”:
e “box-shadow”:

59. Mas como o Compass ajuda afinal?
e “inline-block”:
e “transform”:

60. Mas como o Compass ajuda afinal?
Ou ainda pro “background-gradient”:

61. Mas como o Compass ajuda afinal?
Mas a grande estrela do Compass, ainda está por vir...
Que rrrrrrrrrufem os tambores...

62. Mas como o Compass ajuda afinal?
O gerador de Sprites!
Imaginem quanto tempo vocês passariam no Photoshop para
gerar esses sprites...

63. Mas como o Compass ajuda afinal?
Facebook

64. Mas como o Compass ajuda afinal?
Globo Esporte

65. Mas como o Compass ajuda afinal?
Como seria no Compass ?

66. Mas como o Compass ajuda afinal?
Como seria no Compass ?

67. Mas como o Compass ajuda afinal?

68. Mas como o Compass ajuda afinal?

69. Mas como o Compass ajuda afinal?
Ah Galvão, mas eu não gosto do sprite na vertical...

70. A primeira vez que gerei sprites com Compass!

71. The Rock aprova o Compass!

72. http://susy.oddbird.net/

73. O que é o Susy ?
O Susy cumpre exatamente o que diz no logo.
“Grids Responsivos para Compass”
Com ele é muito, muito simples criarmos layouts responsivos
de fácil manutenção.

74. Entendendo o básico do Susy

75. Como instalar o Susy ?

76. Como instalar o Susy ?
1. Você faz o download do arquivo .zip direto do site deles
2. Pega a pasta “sass” e remove todo o resto.
3. Joga essa pasta “sass” dentro do seu diretório que já tem
os outros arquivos “sass” e manda bala!

77. Como instalar o Susy ?
Mas por quê fazer isso?
Se outra pessoa participar do projeto ela não vai ter
problema nenhum para já começar a desenvolver.
Nos outros métodos, pode acontecer(e aconteceu!) de
precisar atualizar o Compass e não ter direitos, nem ninguém
por perto pra por a senha do Admin. #fail

78. Como usar o Susy ?
Fácil!

79. Como usar o Susy ?
Grid: 28 colunas
Coluna: 48px
Gutter: 0px
t

80. Como usar o Susy ?
Grid: 12 colunas
Coluna: 60px
Gutter: 20px

81. Como usar o Susy ?

82. Como usar o Susy ?

83. Como usar o Susy ?

84. E agora a surpresinha…

85. Depois que vocês
começarem a utilizar
SASS, Susy e Compass,
um fenômeno curioso
vai acontecer.

86. Vocês vão ter TEMPO!

88. Juntem-se a nós
e compartilhem código!

89. Obrigado!
Facebook: facebook.com/renato.galvones
Twitter: twitter.com/RenatoGalvones
Github: github.com/renatogalvao