Upload
carlos-roberto-gomes-junior
View
483
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Talk about Sass and Compass at Stored E-commerce
Citation preview
Syntactically Awesome Style Sheets"Folhas de Estilo Sintaticamente Impressionantes"
Sass & Compass
Pré-processadores de CSS
*.scss*.sass*.stylus*.less
Pré-processador
style.css
Browser
Pré-processadores mais populares
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
SassMeister - The Sass Playground!
node Sass
lib Sass
Apps
Como começar ?
$ gem install sass
Somente Sass
$ sass file.scss file.css
$ sass --watch folder
Comandos Sass
$ sass file.scss file.css --style nested|expanded|compact|compressed
Duas sintaxes
*.sass *.scss
Sass vs CSS● Partials & Imports● Variables● Estruturas de controle (if-else, for, each)● Functions● Mixins● Nested selectors● Placeholder selectors ● Ancestor selectors● Pseudo selectors
Partials & @importArquivos 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
Variáveis
Nested selectors
Pseudo seletores
Ancestor selector
@extend
Placeholder seletor
Media Queries
@mixin
@function
@each
@for
O Compass é uma imensa coleção de mixins, funções e utilidades diversas
$ gem install compass
Sass e Compass
config.rb
$ compass compile
$ compass watch
Comandos Compass
$ compass install bootstrap
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...
Reset
Prefixos para novas regras do CSS3
Importando fontes
CSS Hacks
CSS3 Gradients
Sprites
Imagens
Boilerplate
E muito mais
Obrigado!
@carlosrberto
http://carlosroberto.name