Agilizando o desenvolvimento web com SASS

2,011 views
1,832 views

Published on

Slides da palestra que apresentei no 1º Mkt Meet Up em 30/01/2014.

A palestra é bem didática, e vai desde o funcionamento básico de uma página web até algumas funções mais complexas dentro SASS.

Tem também uma explicação sobre o Compass e suas principais funções e uma introdução rápida ao Susy.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,011
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
90
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Agilizando o desenvolvimento web com SASS

  1. 1. Agilizando o desenvolvimento web com SASS Com Renato Galvão #mktmeetup
  2. 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. 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. 4. Funcionamento básico de uma página web
  5. 5. Funcionamento básico de uma página web
  6. 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. 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. 8. Necessidades de existir uma forma inteligente de escrever CSS Em resumo: “Pega o pessoal de camisa vermelha e troca pra azul belê?”
  9. 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?”
  10. 10. Syntactically Awesome Style Sheets http://sass-lang.com/
  11. 11. 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.
  12. 12. 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!
  13. 13. 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!
  14. 14. Instalação do SASS Mac 1. Abra o terminal 2. Digite o comando “gem install sass” 3. Feito!
  15. 15. Executando o SASS Criei um diretório chamado: “palestra-sass” A estrutura dele é a seguinte: <- HTML5 Boilerplate
  16. 16. 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.
  17. 17. Primeiros passos utilizando o SASS SCSS SASS
  18. 18. Primeiros passos utilizando o SASS Variáveis
  19. 19. Primeiros passos utilizando o SASS Aninhamentos ou Nesting
  20. 20. Primeiros passos utilizando o SASS Imports
  21. 21. Primeiros passos utilizando o SASS Mixins
  22. 22. Primeiros passos utilizando o SASS Herança ou Inheritance
  23. 23. Primeiros passos utilizando o SASS Operadores matemáticos
  24. 24. Primeiros passos utilizando o SASS Pseudo elementos
  25. 25. Primeiros passos utilizando o SASS Convertendo SCSS pra SASS e vice-versa
  26. 26. Primeiros passos utilizando o SASS Convertendo SCSS pra SASS e vice-versa
  27. 27. Primeiros passos utilizando o SASS Convertendo SCSS pra SASS e vice-versa
  28. 28. Primeiros passos utilizando o SASS Convertendo SCSS pra SASS e vice-versa
  29. 29. 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. =]
  30. 30. Primeiros passos utilizando o SASS Tipos de saída: default Comando: sass --watch sass/:css/
  31. 31. Primeiros passos utilizando o SASS Tipos de saída: compact Comando: sass --style compact --watch sass/:css/
  32. 32. Primeiros passos utilizando o SASS Tipos de saída: expanded Comando: sass --style expanded --watch sass/:css/
  33. 33. Primeiros passos utilizando o SASS Tipos de saída: compressed Comando: sass --style compressed--watch sass/:css/
  34. 34. 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. ● ● ● ●
  35. 35. O que já sabemos até agora sobre SASS ? Dúvidas até aqui?
  36. 36. Indo um pouco mais à fundo no SASS Placeholder selector: %
  37. 37. Indo um pouco mais à fundo no SASS Color operations
  38. 38. Indo um pouco mais à fundo no SASS Color operations (funções RGB)
  39. 39. Indo um pouco mais à fundo no SASS Color operations (funções Hue, Saturation, Lightness)
  40. 40. Indo um pouco mais à fundo no SASS Interpolação
  41. 41. Indo um pouco mais à fundo no SASS @if, !default e @debug
  42. 42. Indo um pouco mais à fundo no SASS @if, !default e @debug
  43. 43. Indo um pouco mais à fundo no SASS @if, !default e @debug
  44. 44. Indo um pouco mais à fundo no SASS @for
  45. 45. Indo um pouco mais à fundo no SASS @each
  46. 46. Indo um pouco mais à fundo no SASS @function
  47. 47. http://compass-style.org/
  48. 48. 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.
  49. 49. 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.
  50. 50. 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”
  51. 51. 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”
  52. 52. Criando um projeto Compass O Compass criará uma estrutura básica: sass css
  53. 53. Criando um projeto Compass E um config.rb padrão: Que você configura conforme sua necessidade:
  54. 54. 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”
  55. 55. 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:
  56. 56. Mas como o Compass ajuda afinal? Com o Compass, você só precisa escrever isso: Mesma coisa para o “border-radius”:
  57. 57. Mas como o Compass ajuda afinal? Também para o “box-sizing”: e “box-shadow”:
  58. 58. Mas como o Compass ajuda afinal? e “inline-block”: e “transform”:
  59. 59. Mas como o Compass ajuda afinal? Ou ainda pro “background-gradient”:
  60. 60. Mas como o Compass ajuda afinal? Mas a grande estrela do Compass, ainda está por vir... Que rrrrrrrrrufem os tambores...
  61. 61. Mas como o Compass ajuda afinal? O gerador de Sprites! Imaginem quanto tempo vocês passariam no Photoshop para gerar esses sprites...
  62. 62. Mas como o Compass ajuda afinal? Facebook
  63. 63. Mas como o Compass ajuda afinal? Globo Esporte
  64. 64. Mas como o Compass ajuda afinal? Como seria no Compass ?
  65. 65. Mas como o Compass ajuda afinal? Como seria no Compass ?
  66. 66. Mas como o Compass ajuda afinal?
  67. 67. Mas como o Compass ajuda afinal?
  68. 68. Mas como o Compass ajuda afinal? Ah Galvão, mas eu não gosto do sprite na vertical...
  69. 69. A primeira vez que gerei sprites com Compass!
  70. 70. The Rock aprova o Compass!
  71. 71. http://susy.oddbird.net/
  72. 72. 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.
  73. 73. Entendendo o básico do Susy
  74. 74. Como instalar o Susy ?
  75. 75. 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!
  76. 76. 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
  77. 77. Como usar o Susy ? Fácil!
  78. 78. Como usar o Susy ? Grid: 28 colunas Coluna: 48px Gutter: 0px t
  79. 79. Como usar o Susy ? Grid: 12 colunas Coluna: 60px Gutter: 20px
  80. 80. Como usar o Susy ?
  81. 81. Como usar o Susy ?
  82. 82. Como usar o Susy ?
  83. 83. E agora a surpresinha…
  84. 84. Depois que vocês começarem a utilizar SASS, Susy e Compass, um fenômeno curioso vai acontecer.
  85. 85. Vocês vão ter TEMPO!
  86. 86. Juntem-se a nós e compartilhem código!
  87. 87. Obrigado! Facebook: facebook.com/renato.galvones Twitter: twitter.com/RenatoGalvones Github: github.com/renatogalvao

×