SlideShare une entreprise Scribd logo
1  sur  14
Télécharger pour lire hors ligne
Curso
CSS3 com
Sass e Compass:
Importando outros
arquivos Sass
#7
Agenda!
• Imports!
• Organizando o Código melhor!
Requisitos!
• Ruby!
• Gem Sass!
• Editor Texto!
• Scout IDE ou terminal!
Como funciona!
Escopo Variáveis!
$link-color: blue;!
$link-color: red;!
!
a {!
color: $link-color;!
}!
Nested Imports!
Nested Imports!
tema-azul.scss
aside {!
background: blue;!
color: white;!
}!
Nested Imports!
tema-azul.scss
aside {!
background: blue;!
color: white;!
}!

.blue-theme {@import "blue-theme"}!
Nested Imports!
tema-azul.scss

.blue-theme {@import "blue-theme"}!

aside {!
background: blue;!
color: white;!
}!

.blue-theme {!
aside {!
background: blue;!
color: #fff;!
}!
}!
Estudo de Caso!

• Sencha
Download Código Fonte!
https://github.com/loiane/
curso-css3-sass-compass
Todas as aulas do curso!
http://www.loiane.com/2012/03/curso-onlinecss3-com-sass-e-compass-gratuito/
http://loiane.com
facebook.com/loianegroner

@loiane
https://github.com/loiane
youtube.com/user/Loianeg
Obrigada!

Contenu connexe

Similaire à [Curso CSS3 com Sass e Compass] Aula 07: Importando outros arquivos Sass

Rails front-end com bourbon e sua familia @ Front in Maceió 2014
Rails front-end com bourbon e sua familia @ Front in Maceió 2014Rails front-end com bourbon e sua familia @ Front in Maceió 2014
Rails front-end com bourbon e sua familia @ Front in Maceió 2014Mauro George
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Afonso Gomes
 
HTML&CSS 4 - Intermediate CSS (1/2)
HTML&CSS 4 - Intermediate CSS (1/2)HTML&CSS 4 - Intermediate CSS (1/2)
HTML&CSS 4 - Intermediate CSS (1/2)Dinis Correia
 
Sass: Estilo levado à sério
Sass: Estilo levado à sérioSass: Estilo levado à sério
Sass: Estilo levado à sérioGabriel Nunes
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com SassVitor Garcia
 
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
 
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
 
Speed up! Critical css to the rescue
Speed up! Critical css to the rescueSpeed up! Critical css to the rescue
Speed up! Critical css to the rescuemelidevelopers
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptRodrigo Branas
 
Lightning Talk sobre Sinatra no III RubyOnRio
Lightning Talk sobre Sinatra no III RubyOnRioLightning Talk sobre Sinatra no III RubyOnRio
Lightning Talk sobre Sinatra no III RubyOnRioLuciano Sousa
 
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
 
TDC 2014 - SP - Bower & Robygems - Cada um no seu quadrado
TDC 2014 - SP - Bower & Robygems - Cada um no seu quadradoTDC 2014 - SP - Bower & Robygems - Cada um no seu quadrado
TDC 2014 - SP - Bower & Robygems - Cada um no seu quadradoCezinha Anjos
 
MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebRogério Moraes de Carvalho
 
Frontline - Rails3.1
Frontline - Rails3.1Frontline - Rails3.1
Frontline - Rails3.1Daniel Lopes
 

Similaire à [Curso CSS3 com Sass e Compass] Aula 07: Importando outros arquivos Sass (20)

Rails front-end com bourbon e sua familia @ Front in Maceió 2014
Rails front-end com bourbon e sua familia @ Front in Maceió 2014Rails front-end com bourbon e sua familia @ Front in Maceió 2014
Rails front-end com bourbon e sua familia @ Front in Maceió 2014
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
 
HTML&CSS 4 - Intermediate CSS (1/2)
HTML&CSS 4 - Intermediate CSS (1/2)HTML&CSS 4 - Intermediate CSS (1/2)
HTML&CSS 4 - Intermediate CSS (1/2)
 
Sass: Estilo levado à sério
Sass: Estilo levado à sérioSass: Estilo levado à sério
Sass: Estilo levado à sério
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
 
Pre vs Pos
Pre vs PosPre vs Pos
Pre vs Pos
 
WDI - aula 07 - css com html
WDI - aula 07 - css com htmlWDI - aula 07 - css com html
WDI - aula 07 - css com html
 
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
 
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
 
Speed up! Critical css to the rescue
Speed up! Critical css to the rescueSpeed up! Critical css to the rescue
Speed up! Critical css to the rescue
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
Modular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativosModular CSS - Projetando CSS para aplicativos
Modular CSS - Projetando CSS para aplicativos
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
 
Lightning Talk sobre Sinatra no III RubyOnRio
Lightning Talk sobre Sinatra no III RubyOnRioLightning Talk sobre Sinatra no III RubyOnRio
Lightning Talk sobre Sinatra no III RubyOnRio
 
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
 
TDC 2014 - SP - Bower & Robygems - Cada um no seu quadrado
TDC 2014 - SP - Bower & Robygems - Cada um no seu quadradoTDC 2014 - SP - Bower & Robygems - Cada um no seu quadrado
TDC 2014 - SP - Bower & Robygems - Cada um no seu quadrado
 
MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões Web
 
Frontline - Rails3.1
Frontline - Rails3.1Frontline - Rails3.1
Frontline - Rails3.1
 
Introdução ao CSS
Introdução ao CSSIntrodução ao CSS
Introdução ao CSS
 

[Curso CSS3 com Sass e Compass] Aula 07: Importando outros arquivos Sass