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

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


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


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


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: defaultComando: sass --watch sass/:css/


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


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


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: %


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


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 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:


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!

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 ?


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!


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 ?

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

agilizando o desenvolvimento web com sass

Technology