agilizando o desenvolvimento web com sass

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?

Facebook

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