Sass - Syntactically Awesome Style Sheets
2 gostaram1,091 visualizações
O documento discute pré-processadores CSS como Sass e Compass. Sass oferece recursos como variáveis, seletores aninhados e mixins que facilitam a manutenção de estilos. Compass é um framework completo para Sass que fornece mixins, funções e utilidades como reset e sprites. O documento explica como instalar e usar Sass, Compass e seus principais recursos e benefícios.
Sass - Syntactically Awesome Style Sheets
- 1. Syntactically Awesome Style Sheets "Folhas de Estilo Sintaticamente Impressionantes"
- 8. Por que Sass ? ● Mais ativo na comunidade (criado em 2007 por Hampton Catlin) ● Sintaxe simples ● Curva de aprendizado baixa ● Facilita a manutenção ● Mais fácil utilizar modularização ● DRY ● Compass (framework mais completo) ● Diversos outros plugins
- 9. SassMeister - The Sass Playground!
- 10. node Sass
- 11. lib Sass
- 12. Apps
- 13. Como começar ? $ gem install sass Somente Sass
- 14. $ sass file.scss file.css $ sass --watch folder Comandos Sass
- 15. $ sass file.scss file.css --style nested|expanded|compact|compressed
- 17. Sass vs CSS ● Partials & Imports ● Variables ● Estruturas de controle (if-else, for, each) ● Functions ● Mixins ● Nested selectors ● Placeholder selectors ● Ancestor selectors ● Pseudo selectors
- 18. Partials & @import Arquivos que iniciam com "_" são chamados de partials, esses arquivos não são compilados para CSS mas podem ser importados dentro de outros arquivos para serem reutilizados. _typography.scss _sprites.scss _icons.scss style.scss style.css
- 19. Variáveis
- 20. Nested selectors
- 21. Pseudo seletores
- 23. @extend
- 25. Media Queries
- 26. @mixin
- 30. @function
- 31. @each
- 32. @for
- 33. O Compass é uma imensa coleção de mixins, funções e utilidades diversas
- 35. $ gem install compass Sass e Compass
- 37. config.rb
- 38. $ compass compile $ compass watch Comandos Compass $ compass install bootstrap
- 39. Algumas utilidades do Compass ● Reset ● Mixins para prefixar as novas regras do CSS3 ● Mixins para importar fontes ● Mixins para para criar regras cross-browser ● Mixins para trabalhar com gradientes ● Mixins para gerar sprites ● Mixins para manipular imagens (ex: base64 inline) ● E muito mais...
- 40. Reset
- 41. Prefixos para novas regras do CSS3
- 43. CSS Hacks
- 44. CSS3 Gradients
- 45. Sprites
- 47. Imagens
- 48. Boilerplate
- 49. E muito mais