Agilizando o desenvolvimentoweb com SASS
Com Renato Galvão#mktmeetup
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
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
Funcionamento básico de uma página web
Funcionamento básico de uma página web
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:
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
Necessidades de existir uma forma inteligente de escrever CSS
Em resumo: “Pega o pessoal de camisa vermelha e troca pra azul belê?”
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?”
Syntactically Awesome Style Sheets
http://sass-lang.com/
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.
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!
Instalação do SASS
Windows1. Instale o Ruby (http://www.rubyinstaller.org/)2. Abra o Prompt com Ruby3. Digite o comando “gem install sass”4. Feito!
Instalação do SASS
Mac1. Abra o terminal2. Digite o comando “gem install sass”3. Feito!
<- HTML5 Boilerplate
Executando o SASS
Criei um diretório chamado: “palestra-sass”A estrutura dele é a seguinte:
Executando o SASS
Abra sua pasta do projeto Ex: “/htdocs/palestra-sass/”1. Abra o terminal ou prompt com ruby2. 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.
Primeiros passos utilizando o SASS
SCSS
SASS
Primeiros passos utilizando o SASS
Variáveis
Primeiros passos utilizando o SASS
Aninhamentos ou Nesting
Primeiros passos utilizando o SASS
Imports
Primeiros passos utilizando o SASS
Mixins
Primeiros passos utilizando o SASS
Herança ou Inheritance
Primeiros passos utilizando o SASS
Operadores matemáticos
Primeiros passos utilizando o SASS
Pseudo elementos
Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa
Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa
Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa
Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa
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. =]
Primeiros passos utilizando o SASS
Tipos de saída: defaultComando: sass --watch sass/:css/
Primeiros passos utilizando o SASS
Tipos de saída: compactComando: sass --style compact --watch sass/:css/
Primeiros passos utilizando o SASS
Tipos de saída: expandedComando: sass --style expanded --watch sass/:css/
Primeiros passos utilizando o SASS
Tipos de saída: compressedComando: sass --style compressed--watch sass/:css/
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.
O que já sabemos até agora sobre SASS ?
Dúvidas atéaqui?
Indo um pouco mais à fundo no SASS
Placeholder selector: %
Indo um pouco mais à fundo no SASS
Color operations
Indo um pouco mais à fundo no SASS
Color operations (funções RGB)
Indo um pouco mais à fundo no SASS
Color operations (funções Hue, Saturation, Lightness)
Indo um pouco mais à fundo no SASS
Interpolação
Indo um pouco mais à fundo no SASS
@if, !default e @debug
Indo um pouco mais à fundo no SASS
@if, !default e @debug
Indo um pouco mais à fundo no SASS
@if, !default e @debug
Indo um pouco mais à fundo no SASS
@for
Indo um pouco mais à fundo no SASS
@each
Indo um pouco mais à fundo no SASS
@function
http://compass-style.org/
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.
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.
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/prompt2. Digite o comando “gem update --system”3. Depois, o comando “gem install compass”
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/prompt2. Digite o comando “compass create <path>”3. Nesse exemplo usei “compass create palestra-sass”
Criando um projeto Compass
O Compass criará uma estrutura básica:
sass css
Criando um projeto Compass
E um config.rb padrão:
Que você configura conforme sua necessidade:
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 projeto2. Digite o comando “compass watch”3. Ou “sass --compass --watch sass:css”
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:
Mas como o Compass ajuda afinal?
Com o Compass, você só precisa escrever isso:
Mesma coisa para o “border-radius”:
Mas como o Compass ajuda afinal?
Também para o “box-sizing”:
e “box-shadow”:
Mas como o Compass ajuda afinal?
e “inline-block”:
e “transform”:
Mas como o Compass ajuda afinal?
Ou ainda pro “background-gradient”:
Mas como o Compass ajuda afinal?
Mas a grande estrela do Compass, ainda está por vir...Que rrrrrrrrrufem os tambores...
Mas como o Compass ajuda afinal?
O gerador de Sprites!
Imaginem quanto tempo vocês passariam no Photoshop para gerar esses sprites...
Mas como o Compass ajuda afinal?
Mas como o Compass ajuda afinal?
Globo Esporte
Mas como o Compass ajuda afinal?
Como seria no Compass ?
Mas como o Compass ajuda afinal?
Como seria no Compass ?
Mas como o Compass ajuda afinal?
Mas como o Compass ajuda afinal?
Mas como o Compass ajuda afinal?
Ah Galvão, mas eu não gosto do sprite na vertical...
A primeira vez que gerei sprites com Compass!
The Rock aprova o Compass!
http://susy.oddbird.net/
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.
Entendendo o básico do Susy
Como instalar o Susy ?
Como instalar o Susy ?
1. Você faz o download do arquivo .zip direto do site deles2. 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!
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
Como usar o Susy ?
Fácil!
Como usar o Susy ?
Grid: 28 colunasColuna: 48pxGutter: 0px
t
Como usar o Susy ?
Grid: 12 colunasColuna: 60pxGutter: 20px
Como usar o Susy ?
Como usar o Susy ?
Como usar o Susy ?
E agora a surpresinha…
Depois que vocês começarem a utilizar
SASS, Susy e Compass, um fenômeno curioso
vai acontecer.
Vocês vão ter TEMPO!
Juntem-se a nóse compartilhem código!
Obrigado!
Facebook: facebook.com/renato.galvonesTwitter: twitter.com/RenatoGalvonesGithub: github.com/renatogalvao
Top Related