Alta produtividade com front end com sass e compass
51
-
Upload
danilo-sousa -
Category
Design
-
view
95 -
download
4
description
Alta produtividade com front end com sass e compass
Transcript of Alta produtividade com front end com sass e compass
@andersonaguiar
Trabalho na
Sobre mim
Anderson Aguiar, 23
Os 3 mais populares
Features
• Variables• Nesting• Mixins• Selector Inheritance• Compression• Clean code• Silent comments• Colors(darken, lighten, saturate, grayscale)• Mathematical Expressions• Imports
Features
Variables
Features
Mathematical Expressions
Features
Mathematical Expressions
Features
Colors
Features
Nesting
Features
Mixins
Features
Mixins
Features
Selector Inheritance
Features
Compression + Silent comments
Features
Imports
Syntax
SCSS SASS
Instalação
Instalação
Instalar o ruby:
http://rubyinstaller.org/downloads/
Instalação
Instalação
Instalação
gem install sass ;)
Utilização
sass --watch arquivo.scss:arquivo.csssass --watch sass:css --style compact
Utilização
Mas eu não gosto do terminal
Perguntas sobre SASS?
?
Frameworks
Features
• Frameworks• Comunidade forte• Já vem com SASS por default• CSS3• Sprites• Images• Estatísticas dos SCSS/CSS• Validação de CSS• ...
Instalação + Utilização
1) Entrar no diretório do projeto2) Digitar no terminal: compass create3) Editar o config.rb que foi gerado, para as suas preferências4) Digitar no terminal: compass watch5) Começar a mágica ;)
Configuração
Features
CSS3
• Não precisa preencher vendors, o compass faz isso pra você
• Incompatibilidade de sintaxe• Clearfix• Box• Box-shadow• Border radius• Text shadow• Gradient• Etc...
Features
CSS3
Features
CSS3
Features
Media queries
Features
Sprites
Features
Images
Features
Images
Features
Grids
Features
Grids – Instalação e uso
https://github.com/nextmat/compass-960-plugin
Features
Stats
Pré-processadores de CSS
Less: http://lesscss.org/Stylus: http://learnboost.github.com/stylus/Sass: http://sass-lang.com/
Devo usar?
• Já domino o CSS tradicional?
• Irá agregar melhoria no meu desenvolvimento?
Dúvidas?
?
Referências
http://www.tidbits.com.br/desenvolvendo-css-de-forma-mais-produtiva-usando-sass (imagem de instalação windows, fluxo variáveis de ambiente)
http://www.slideshare.net/chriseppstein/authoring-stylesheets-with-compass-sass
http://www.slideshare.net/hlb/sass-compass-7653212
http://www.slideshare.net/adantz/frontendentwicklung-mit-sass-compass
http://www.slideshare.net/verekia/deep-dive-into-css-preprocessors
http://compass-style.org/
http://sass-lang.com/
Obrigado!
Disponível em:http://www.slideshare.net/andersonagr
Contato: @andersonaguiar
![[Curso CSS3 com Sass e Compass] Aula 07: Importando outros arquivos Sass](https://static.fdocument.pub/doc/165x107/548da9e0b479591e1d8b465b/curso-css3-com-sass-e-compass-aula-07-importando-outros-arquivos-sass.jpg)
