SlideShare une entreprise Scribd logo
1  sur  14
Télécharger pour lire hors ligne
Curso
        CSS3 com
     Sass e Compass:
       Instalação +
       Hello World
Loiane Groner
http://loiane.com
Agenda

• Instalação Sass no Windows
• Instalação Sass no Linux - Ubuntu
• Instalação Sass no Mac OS
• Criar primeiro arquivo Sass
• Compilar Sass em CSS
Requisitos

• Ruby
• Gem Sass
• Editor texto
• Terminal (Linux e Mac)
• Terminal Ruby (Windows)
Instalação no
  Windows
• RubyInstaller : http://rubyinstaller.org

• Iniciar -> Acessórios -> Command Prompt
with Ruby

• $ gem install sass
Instalação no
Linux - Ubuntu
• Abra o terminal

• $ sudo apt-get install ruby1.9.1

• $ sudo gem install sass
Instalação no
   Mac OS
• Ruby já vem instalado

• Abra o terminal

• $ sudo gem install sass
el lo Wor ld!
H
aula02.scss

.vermelho {
    color: red;
}
$ sass aula02.scss




.vermelho {
  color: red; }
.contato {
   email: ‘curso@extjs4.com’;
   blog: ‘loiane.com’;
   facebook: ‘facebook.com/loianegroner’;
   twitter: ‘@loiane’;
   github: ‘loiane’;
   vimeo: ‘loiane’;
   youtube: ‘loianeg’;
 }
Obrigada!

Contenu connexe

Tendances

Ruby no tucupi e Rails com farinha
Ruby no tucupi e Rails com farinhaRuby no tucupi e Rails com farinha
Ruby no tucupi e Rails com farinhas4nx
 
Novidades do ASP.NET Core 2.0 - ASP.NET Core Campinas - Agosto/2017
Novidades do ASP.NET Core 2.0 - ASP.NET Core Campinas - Agosto/2017Novidades do ASP.NET Core 2.0 - ASP.NET Core Campinas - Agosto/2017
Novidades do ASP.NET Core 2.0 - ASP.NET Core Campinas - Agosto/2017Renato Groff
 
Como recuperar senhas WEP de redes wireless com Backtrack
Como recuperar senhas WEP de redes wireless com BacktrackComo recuperar senhas WEP de redes wireless com Backtrack
Como recuperar senhas WEP de redes wireless com BacktrackNatanael Simões
 
KDC Spoofing com Kerberos MIT
KDC Spoofing com Kerberos MITKDC Spoofing com Kerberos MIT
KDC Spoofing com Kerberos MITDiego Santos
 
Kdc spoofing com kerberos mit
Kdc spoofing com kerberos mitKdc spoofing com kerberos mit
Kdc spoofing com kerberos mitMarcelo Fleury
 
Application Servers e Ruby
Application Servers e RubyApplication Servers e Ruby
Application Servers e RubyRafael Soares
 
Utilizando o Redis com ASP.NET Core 2
Utilizando o Redis com ASP.NET Core 2Utilizando o Redis com ASP.NET Core 2
Utilizando o Redis com ASP.NET Core 2Ericson da Fonseca
 
APIs na nuvem com Azure e ASP.NET Core - Azure Weekend 2016
APIs na nuvem com Azure e ASP.NET Core - Azure Weekend 2016APIs na nuvem com Azure e ASP.NET Core - Azure Weekend 2016
APIs na nuvem com Azure e ASP.NET Core - Azure Weekend 2016Renato Groff
 
Semana Acadêmica ICET - Feevale - 12/04/2014
Semana Acadêmica ICET - Feevale - 12/04/2014Semana Acadêmica ICET - Feevale - 12/04/2014
Semana Acadêmica ICET - Feevale - 12/04/2014Getup Cloud
 
ASP.NET Core em Linux - Canal .NET Dev Week
ASP.NET Core em Linux - Canal .NET Dev WeekASP.NET Core em Linux - Canal .NET Dev Week
ASP.NET Core em Linux - Canal .NET Dev WeekRenato Groff
 
Implementação de Servidor Linux Ubuntu Server
Implementação de Servidor Linux Ubuntu ServerImplementação de Servidor Linux Ubuntu Server
Implementação de Servidor Linux Ubuntu ServerTiago Bezerra Dos Santos
 
Linux e Docker: novas possibilidades com tecnologias Microsoft - 2o. Stone Te...
Linux e Docker: novas possibilidades com tecnologias Microsoft - 2o. Stone Te...Linux e Docker: novas possibilidades com tecnologias Microsoft - 2o. Stone Te...
Linux e Docker: novas possibilidades com tecnologias Microsoft - 2o. Stone Te...Renato Groff
 
Tunando sua aplicação LNMP
Tunando sua aplicação LNMPTunando sua aplicação LNMP
Tunando sua aplicação LNMPLeandro Mendes
 
Desenvolvimento web no Linux
Desenvolvimento web no LinuxDesenvolvimento web no Linux
Desenvolvimento web no LinuxEduardo Rozario
 

Tendances (17)

Ruby no tucupi e Rails com farinha
Ruby no tucupi e Rails com farinhaRuby no tucupi e Rails com farinha
Ruby no tucupi e Rails com farinha
 
Novidades do ASP.NET Core 2.0 - ASP.NET Core Campinas - Agosto/2017
Novidades do ASP.NET Core 2.0 - ASP.NET Core Campinas - Agosto/2017Novidades do ASP.NET Core 2.0 - ASP.NET Core Campinas - Agosto/2017
Novidades do ASP.NET Core 2.0 - ASP.NET Core Campinas - Agosto/2017
 
Como recuperar senhas WEP de redes wireless com Backtrack
Como recuperar senhas WEP de redes wireless com BacktrackComo recuperar senhas WEP de redes wireless com Backtrack
Como recuperar senhas WEP de redes wireless com Backtrack
 
KDC Spoofing com Kerberos MIT
KDC Spoofing com Kerberos MITKDC Spoofing com Kerberos MIT
KDC Spoofing com Kerberos MIT
 
Kdc spoofing com kerberos mit
Kdc spoofing com kerberos mitKdc spoofing com kerberos mit
Kdc spoofing com kerberos mit
 
Application Servers e Ruby
Application Servers e RubyApplication Servers e Ruby
Application Servers e Ruby
 
Utilizando o Redis com ASP.NET Core 2
Utilizando o Redis com ASP.NET Core 2Utilizando o Redis com ASP.NET Core 2
Utilizando o Redis com ASP.NET Core 2
 
APIs na nuvem com Azure e ASP.NET Core - Azure Weekend 2016
APIs na nuvem com Azure e ASP.NET Core - Azure Weekend 2016APIs na nuvem com Azure e ASP.NET Core - Azure Weekend 2016
APIs na nuvem com Azure e ASP.NET Core - Azure Weekend 2016
 
Semana Acadêmica ICET - Feevale - 12/04/2014
Semana Acadêmica ICET - Feevale - 12/04/2014Semana Acadêmica ICET - Feevale - 12/04/2014
Semana Acadêmica ICET - Feevale - 12/04/2014
 
Amilton - Armored WordPress
Amilton - Armored WordPressAmilton - Armored WordPress
Amilton - Armored WordPress
 
ASP.NET Core em Linux - Canal .NET Dev Week
ASP.NET Core em Linux - Canal .NET Dev WeekASP.NET Core em Linux - Canal .NET Dev Week
ASP.NET Core em Linux - Canal .NET Dev Week
 
Implementação de Servidor Linux Ubuntu Server
Implementação de Servidor Linux Ubuntu ServerImplementação de Servidor Linux Ubuntu Server
Implementação de Servidor Linux Ubuntu Server
 
Virtual box
Virtual boxVirtual box
Virtual box
 
Node slide
Node slideNode slide
Node slide
 
Linux e Docker: novas possibilidades com tecnologias Microsoft - 2o. Stone Te...
Linux e Docker: novas possibilidades com tecnologias Microsoft - 2o. Stone Te...Linux e Docker: novas possibilidades com tecnologias Microsoft - 2o. Stone Te...
Linux e Docker: novas possibilidades com tecnologias Microsoft - 2o. Stone Te...
 
Tunando sua aplicação LNMP
Tunando sua aplicação LNMPTunando sua aplicação LNMP
Tunando sua aplicação LNMP
 
Desenvolvimento web no Linux
Desenvolvimento web no LinuxDesenvolvimento web no Linux
Desenvolvimento web no Linux
 

Similaire à Curso CSS3 com Sass e Compass - Aula 02 - Instalação e Hello World

Introdução á linguagem Ruby com aplicativo em Rails
Introdução á linguagem Ruby com aplicativo em RailsIntrodução á linguagem Ruby com aplicativo em Rails
Introdução á linguagem Ruby com aplicativo em Railsoverduka
 
Alta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassAlta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassDanilo Sousa
 
Docker + Bancos de Dados: descomplicando a montagem de ambientes de Desenvolv...
Docker + Bancos de Dados: descomplicando a montagem de ambientes de Desenvolv...Docker + Bancos de Dados: descomplicando a montagem de ambientes de Desenvolv...
Docker + Bancos de Dados: descomplicando a montagem de ambientes de Desenvolv...Renato Groff
 
Minicurso Ruby e Rails (RailsMG UNA)
Minicurso Ruby e Rails (RailsMG UNA)Minicurso Ruby e Rails (RailsMG UNA)
Minicurso Ruby e Rails (RailsMG UNA)Daniel Lopes
 
TDC 2016 - Sass: CSS com super-poderes.
TDC 2016 - Sass: CSS com super-poderes.TDC 2016 - Sass: CSS com super-poderes.
TDC 2016 - Sass: CSS com super-poderes.Rodrigo Amora
 
Talk no Meetup LaravelSP #3
Talk no Meetup LaravelSP #3Talk no Meetup LaravelSP #3
Talk no Meetup LaravelSP #3Wellington Silva
 
Uma visão rápida sobre Nodejs
Uma visão rápida sobre NodejsUma visão rápida sobre Nodejs
Uma visão rápida sobre NodejsRafael Soares
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endAnderson Aguiar
 
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...Renato Groff
 
Agilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASSAgilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASSRenato Galvão
 
Node.js, Uma breve introdução
Node.js, Uma breve introduçãoNode.js, Uma breve introdução
Node.js, Uma breve introduçãoPablo Feijó
 
TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had ...
TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had ...TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had ...
TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had ...tdc-globalcode
 
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Ab...
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Ab...Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Ab...
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Ab...Renato Groff
 
Docker de ponta a ponta: do Desenvolvimento à Nuvem - Fevereiro-2020
Docker de ponta a ponta: do Desenvolvimento à Nuvem - Fevereiro-2020Docker de ponta a ponta: do Desenvolvimento à Nuvem - Fevereiro-2020
Docker de ponta a ponta: do Desenvolvimento à Nuvem - Fevereiro-2020Renato Groff
 

Similaire à Curso CSS3 com Sass e Compass - Aula 02 - Instalação e Hello World (20)

Introdução á linguagem Ruby com aplicativo em Rails
Introdução á linguagem Ruby com aplicativo em RailsIntrodução á linguagem Ruby com aplicativo em Rails
Introdução á linguagem Ruby com aplicativo em Rails
 
Alta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compassAlta produtividade com front end com sass e compass
Alta produtividade com front end com sass e compass
 
Docker + Bancos de Dados: descomplicando a montagem de ambientes de Desenvolv...
Docker + Bancos de Dados: descomplicando a montagem de ambientes de Desenvolv...Docker + Bancos de Dados: descomplicando a montagem de ambientes de Desenvolv...
Docker + Bancos de Dados: descomplicando a montagem de ambientes de Desenvolv...
 
Minicurso Ruby e Rails (RailsMG UNA)
Minicurso Ruby e Rails (RailsMG UNA)Minicurso Ruby e Rails (RailsMG UNA)
Minicurso Ruby e Rails (RailsMG UNA)
 
TDC 2016 - Sass: CSS com super-poderes.
TDC 2016 - Sass: CSS com super-poderes.TDC 2016 - Sass: CSS com super-poderes.
TDC 2016 - Sass: CSS com super-poderes.
 
Talk no Meetup LaravelSP #3
Talk no Meetup LaravelSP #3Talk no Meetup LaravelSP #3
Talk no Meetup LaravelSP #3
 
Ruby on Rails em 30 minutos
Ruby on Rails em 30 minutosRuby on Rails em 30 minutos
Ruby on Rails em 30 minutos
 
Uma visão rápida sobre Nodejs
Uma visão rápida sobre NodejsUma visão rápida sobre Nodejs
Uma visão rápida sobre Nodejs
 
Ruby on Rails for beginners 2.0
Ruby on Rails for beginners 2.0Ruby on Rails for beginners 2.0
Ruby on Rails for beginners 2.0
 
SASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-endSASS + COMPASS - Alta Produtividade no Front-end
SASS + COMPASS - Alta Produtividade no Front-end
 
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Se...
 
Agilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASSAgilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASS
 
Node.js, Uma breve introdução
Node.js, Uma breve introduçãoNode.js, Uma breve introdução
Node.js, Uma breve introdução
 
TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had ...
TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had ...TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had ...
TDC2017 | São Paulo - Trilha Programação Funcional How we figured out we had ...
 
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Ab...
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Ab...Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Ab...
Docker: Primeiros Passos, Dicas e Truques no Gerenciamento de Containers - Ab...
 
Docker de ponta a ponta: do Desenvolvimento à Nuvem - Fevereiro-2020
Docker de ponta a ponta: do Desenvolvimento à Nuvem - Fevereiro-2020Docker de ponta a ponta: do Desenvolvimento à Nuvem - Fevereiro-2020
Docker de ponta a ponta: do Desenvolvimento à Nuvem - Fevereiro-2020
 
Rails
RailsRails
Rails
 
[Sass] Aula 01
[Sass] Aula 01[Sass] Aula 01
[Sass] Aula 01
 
Alagoas Dev Day
Alagoas Dev DayAlagoas Dev Day
Alagoas Dev Day
 
Docker + Django
Docker + DjangoDocker + Django
Docker + Django
 

Curso CSS3 com Sass e Compass - Aula 02 - Instalação e Hello World