agilizando o desenvolvimento web com sass
DESCRIPTION
Slides da palestra que apresentei no 1º Mkt Meet Up em 30/01/2014. A palestra é bem didática, e vai desde o funcionamento básico de uma página web até algumas funções mais complexas dentro SASS. Tem também uma explicação sobre o Compass e suas principais funções e uma introdução rápida ao Susy.TRANSCRIPT
![Page 1: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/1.jpg)
Agilizando o desenvolvimentoweb com SASS
Com Renato Galvão#mktmeetup
![Page 2: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/2.jpg)
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
![Page 3: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/3.jpg)
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
![Page 4: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/4.jpg)
Funcionamento básico de uma página web
![Page 5: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/5.jpg)
Funcionamento básico de uma página web
![Page 6: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/6.jpg)
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:
![Page 7: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/7.jpg)
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
![Page 8: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/8.jpg)
Necessidades de existir uma forma inteligente de escrever CSS
Em resumo: “Pega o pessoal de camisa vermelha e troca pra azul belê?”
![Page 9: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/9.jpg)
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?”
![Page 10: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/10.jpg)
![Page 11: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/11.jpg)
Syntactically Awesome Style Sheets
http://sass-lang.com/
![Page 12: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/12.jpg)
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.
![Page 13: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/13.jpg)
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!
![Page 14: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/14.jpg)
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!
![Page 15: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/15.jpg)
Instalação do SASS
Mac1. Abra o terminal2. Digite o comando “gem install sass”3. Feito!
![Page 16: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/16.jpg)
<- HTML5 Boilerplate
Executando o SASS
Criei um diretório chamado: “palestra-sass”A estrutura dele é a seguinte:
![Page 17: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/17.jpg)
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.
![Page 18: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/18.jpg)
Primeiros passos utilizando o SASS
SCSS
SASS
![Page 19: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/19.jpg)
Primeiros passos utilizando o SASS
Variáveis
![Page 20: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/20.jpg)
Primeiros passos utilizando o SASS
Aninhamentos ou Nesting
![Page 21: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/21.jpg)
Primeiros passos utilizando o SASS
Imports
![Page 22: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/22.jpg)
Primeiros passos utilizando o SASS
Mixins
![Page 23: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/23.jpg)
Primeiros passos utilizando o SASS
Herança ou Inheritance
![Page 24: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/24.jpg)
Primeiros passos utilizando o SASS
Operadores matemáticos
![Page 25: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/25.jpg)
Primeiros passos utilizando o SASS
Pseudo elementos
![Page 26: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/26.jpg)
Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa
![Page 27: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/27.jpg)
Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa
![Page 28: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/28.jpg)
Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa
![Page 29: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/29.jpg)
Primeiros passos utilizando o SASS
Convertendo SCSS pra SASS e vice-versa
![Page 30: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/30.jpg)
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. =]
![Page 31: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/31.jpg)
Primeiros passos utilizando o SASS
Tipos de saída: defaultComando: sass --watch sass/:css/
![Page 32: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/32.jpg)
Primeiros passos utilizando o SASS
Tipos de saída: compactComando: sass --style compact --watch sass/:css/
![Page 33: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/33.jpg)
Primeiros passos utilizando o SASS
Tipos de saída: expandedComando: sass --style expanded --watch sass/:css/
![Page 34: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/34.jpg)
Primeiros passos utilizando o SASS
Tipos de saída: compressedComando: sass --style compressed--watch sass/:css/
![Page 35: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/35.jpg)
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.
![Page 36: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/36.jpg)
O que já sabemos até agora sobre SASS ?
Dúvidas atéaqui?
![Page 37: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/37.jpg)
Indo um pouco mais à fundo no SASS
Placeholder selector: %
![Page 38: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/38.jpg)
Indo um pouco mais à fundo no SASS
Color operations
![Page 39: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/39.jpg)
Indo um pouco mais à fundo no SASS
Color operations (funções RGB)
![Page 40: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/40.jpg)
Indo um pouco mais à fundo no SASS
Color operations (funções Hue, Saturation, Lightness)
![Page 41: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/41.jpg)
Indo um pouco mais à fundo no SASS
Interpolação
![Page 42: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/42.jpg)
Indo um pouco mais à fundo no SASS
@if, !default e @debug
![Page 43: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/43.jpg)
Indo um pouco mais à fundo no SASS
@if, !default e @debug
![Page 44: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/44.jpg)
Indo um pouco mais à fundo no SASS
@if, !default e @debug
![Page 45: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/45.jpg)
Indo um pouco mais à fundo no SASS
@for
![Page 46: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/46.jpg)
Indo um pouco mais à fundo no SASS
@each
![Page 47: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/47.jpg)
Indo um pouco mais à fundo no SASS
@function
![Page 48: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/48.jpg)
http://compass-style.org/
![Page 49: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/49.jpg)
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.
![Page 50: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/50.jpg)
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.
![Page 51: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/51.jpg)
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”
![Page 52: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/52.jpg)
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”
![Page 53: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/53.jpg)
Criando um projeto Compass
O Compass criará uma estrutura básica:
sass css
![Page 54: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/54.jpg)
Criando um projeto Compass
E um config.rb padrão:
Que você configura conforme sua necessidade:
![Page 55: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/55.jpg)
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”
![Page 56: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/56.jpg)
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:
![Page 57: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/57.jpg)
Mas como o Compass ajuda afinal?
Com o Compass, você só precisa escrever isso:
Mesma coisa para o “border-radius”:
![Page 58: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/58.jpg)
Mas como o Compass ajuda afinal?
Também para o “box-sizing”:
e “box-shadow”:
![Page 59: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/59.jpg)
Mas como o Compass ajuda afinal?
e “inline-block”:
e “transform”:
![Page 60: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/60.jpg)
Mas como o Compass ajuda afinal?
Ou ainda pro “background-gradient”:
![Page 61: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/61.jpg)
Mas como o Compass ajuda afinal?
Mas a grande estrela do Compass, ainda está por vir...Que rrrrrrrrrufem os tambores...
![Page 62: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/62.jpg)
Mas como o Compass ajuda afinal?
O gerador de Sprites!
Imaginem quanto tempo vocês passariam no Photoshop para gerar esses sprites...
![Page 63: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/63.jpg)
Mas como o Compass ajuda afinal?
![Page 64: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/64.jpg)
Mas como o Compass ajuda afinal?
Globo Esporte
![Page 65: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/65.jpg)
Mas como o Compass ajuda afinal?
Como seria no Compass ?
![Page 66: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/66.jpg)
Mas como o Compass ajuda afinal?
Como seria no Compass ?
![Page 67: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/67.jpg)
Mas como o Compass ajuda afinal?
![Page 68: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/68.jpg)
Mas como o Compass ajuda afinal?
![Page 69: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/69.jpg)
Mas como o Compass ajuda afinal?
Ah Galvão, mas eu não gosto do sprite na vertical...
![Page 70: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/70.jpg)
A primeira vez que gerei sprites com Compass!
![Page 71: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/71.jpg)
The Rock aprova o Compass!
![Page 72: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/72.jpg)
http://susy.oddbird.net/
![Page 73: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/73.jpg)
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.
![Page 74: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/74.jpg)
Entendendo o básico do Susy
![Page 75: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/75.jpg)
Como instalar o Susy ?
![Page 76: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/76.jpg)
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!
![Page 77: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/77.jpg)
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
![Page 78: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/78.jpg)
Como usar o Susy ?
Fácil!
![Page 79: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/79.jpg)
Como usar o Susy ?
Grid: 28 colunasColuna: 48pxGutter: 0px
t
![Page 80: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/80.jpg)
Como usar o Susy ?
Grid: 12 colunasColuna: 60pxGutter: 20px
![Page 81: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/81.jpg)
Como usar o Susy ?
![Page 82: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/82.jpg)
Como usar o Susy ?
![Page 83: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/83.jpg)
Como usar o Susy ?
![Page 84: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/84.jpg)
E agora a surpresinha…
![Page 85: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/85.jpg)
Depois que vocês começarem a utilizar
SASS, Susy e Compass, um fenômeno curioso
vai acontecer.
![Page 86: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/86.jpg)
Vocês vão ter TEMPO!
![Page 87: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/87.jpg)
![Page 88: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/88.jpg)
Juntem-se a nóse compartilhem código!
![Page 89: Agilizando o desenvolvimento web com SASS](https://reader034.vdocuments.pub/reader034/viewer/2022052301/559469f41a28ab9e2b8b458f/html5/thumbnails/89.jpg)
Obrigado!
Facebook: facebook.com/renato.galvonesTwitter: twitter.com/RenatoGalvonesGithub: github.com/renatogalvao