Agilizando o desenvolvimento web com SASS

Agilizando o desenvolvimento
web 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
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

escrever CSS
Em resumo: “Pega o pessoal de camisa vermelha e troca pra azul belê?”

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?”

Agilizando o desenvolvimento web com SASS

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
Windows
1. Instale o Ruby (http://www.rubyinstaller.org/)
2. Abra o Prompt com Ruby
3. Digite o comando “gem install sass”
4. Feito!

Instalação do SASS
Mac
1. Abra o terminal
2. Digite o comando “gem install sass”
3. Feito!

Executando o SASS
Criei um diretório chamado: “palestra-sass”
A estrutura dele é a seguinte:

<- HTML5 Boilerplate

Executando o SASS
Abra sua pasta do projeto Ex: “/htdocs/palestra-sass/”
1. Abra o terminal ou prompt com ruby
2. 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

Variáveis

Aninhamentos ou Nesting

Imports

Mixins

Herança ou Inheritance

Operadores matemáticos

Pseudo elementos

Convertendo SCSS pra SASS e vice-versa

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. =]

Tipos de saída: default
Comando: sass --watch sass/:css/

Tipos de saída: compact
Comando: sass --style compact --watch sass/:css/

Tipos de saída: expanded
Comando: sass --style expanded --watch sass/:css/

Tipos de saída: compressed
Comando: 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: %

Color operations

Color operations (funções RGB)

Color operations (funções Hue, Saturation, Lightness)

Interpolação

@if, !default e @debug

@for

@each

@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/prompt
2. 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/prompt
2. Digite o comando “compass create <path>”
3. Nesse exemplo usei “compass create palestra-sass”

O Compass criará uma estrutura básica:
sass

css

E um config.rb padrão:

Que você configura conforme sua necessidade:

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 projeto
2. 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:

Com o Compass, você só precisa escrever isso:

Mesma coisa para o “border-radius”:

Também para o “box-sizing”:

e “box-shadow”:

e “inline-block”:

e “transform”:

Ou ainda pro “background-gradient”:

Mas a grande estrela do Compass, ainda está por vir...
Que rrrrrrrrrufem os tambores...

O gerador de Sprites!

Imaginem quanto tempo vocês passariam no Photoshop para
gerar esses sprites...

Facebook

Globo Esporte

Como seria no Compass ?

Ah Galvão, mas eu não gosto do sprite na vertical...

A primeira vez que gerei sprites com 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.

Como instalar o Susy ?
1. Você faz o download do arquivo .zip direto do site deles
2. 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 ?
Grid: 28 colunas
Coluna: 48px
Gutter: 0px

t

Como usar o Susy ?
Grid: 12 colunas
Coluna: 60px
Gutter: 20px

Depois que vocês
começarem a utilizar
SASS, Susy e Compass,
um fenômeno curioso
vai acontecer.

Juntem-se a nós
e compartilhem código!

Obrigado!

Facebook: facebook.com/renato.galvones
Twitter: twitter.com/RenatoGalvones
Github: github.com/renatogalvao

Agilizando o desenvolvimento web com SASS

Mais conteúdo relacionado

Mais procurados (19)

Destaque (20)

Semelhante a Agilizando o desenvolvimento web com SASS (20)

Último (17)

Agilizando o desenvolvimento web com SASS