SlideShare uma empresa Scribd logo
1 de 49
Baixar para ler offline
Globalcode – Open4education
Trilha Web – Sass: CSS com super-poderes
Rodrigo Amora
rodrigo.amora.freitas@gmail.com
@RodrigoAmora
Globalcode – Open4education
Quem sou eu
Rodrigo Amora
Sou formado em Sistemas de Informação pela
Unigranrio.
Sou Desenvolvedor Web desde 2009.
Sou Desenvolvedor Mobile desde 2011.
Globalcode – Open4education
Sócio e Dev
www.boxes-list.com
Globalcode – Open4education
Contatos
rodrigo.amora.freitas@gmail.com
@RodrigoAmora
Globalcode – Open4education
Agenda
Tipos de Dados
Variáveis
Mixin
Nesting
Imports
Extends
Operações
Controles de Diretivas e Expressões
Darken
Lithen
Globalcode – Open4education
Sass
Sass é um pré-processador CSS, criado com
intuito de facilitar a criação e manutenção de
arquivos CSS;
Versão atual 3.4.22;
Foi feito em Ruby;
Globalcode – Open4education
Instalação no Linux e MacOS
gem install sass
Globalcode – Open4education
Instalação no Windows
Toasty!!!
Troque de S.O
Globalcode – Open4education
Instalação no Windows
Baixar e executar o instalador o Ruby através do
site: http://rubyinstaller.org/
Colocar o diretório do Ruby no path;
Executar o comando: gem install sass;
Globalcode – Open4education
O Sass trabalha com arquivos .scss e os converte
para arquivos .css normal
Globalcode – Open4education
Tipos de Dados
O Sass trabalha os seguintes tipos de dados:
Números (ex: 1.2, 13, 10px);
Strings;
Colors: blue, #04a3f9, rgba(255, 0, 0, 0.5);
Boolean;
Null;
Listas de valores separados por espaço ou
vírgula;
Maps (ex: (key1: value1, key2: value2) )
Globalcode – Open4education
Variáveis
Variáveis no Sass possuem o mesmo conceito da
programação back-end e JS, ou seja serve para
guarda valores;
Globalcode – Open4education
Variáveis
a {
color: #fff;
}
.div {
color: #fff;
background-color: grey;
border: 1px solid blue;
border-radius: 5px;
}
Globalcode – Open4education
Variáveis
$cor-branca: #fff;
a {
color: $cor-branca;
}
.div {
color: $cor-branca;
background-color: grey;
border: 1px solid blue;
border-radius: 5px;
}
Globalcode – Open4education
Variáveis
$cor-branca: #fff;
$borda-azul: 1px solid blue;
.div {
background-color: grey;
border: $borda-azul;
border-radius: 5px;
color: $cor-branca;
}
Globalcode – Open4education
sass estilos.scss:estilos.css
Arquivo usado pelo Sass Arquivo gerado pelo Sass
Globalcode – Open4education
Mais eu vou ter que executar esse comando para
toda alteração que eu fizer?
Globalcode – Open4education
sass --watch estilos.scss:estilos.css
Globalcode – Open4education
Mixin
Usado para guardar trechos de código CSS
repetidos;
É chamado através da diretiva @include;
Globalcode – Open4education
Mixin
@mixin meu_mixin {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.minha_classe {
@include meu_mixin;
}
Globalcode – Open4education
Mixin
@mixin meu_mixin($radius: 0.3em) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.minha_classe {
@include meu_mixin(2px);
}
Globalcode – Open4education
Nesting
Recurso do Sass para aninhar propriedades do
CSS;
Globalcode – Open4education
Nesting
.minha_classe {
a {
color: red;
}
p {
background-color: blue;
}
}
Globalcode – Open4education
Nesting
.minha_classe {
}
.minha_classe a {
color: red
}
.minha_classe p {
background-color: blue;
}
Globalcode – Open4education
@import
Serve para importar arquivos dentro de outros
arquivos;
Funciona da mesma forma que a função include do
PHP e require do JS;
Globalcode – Open4education
@import
@import "header.scss";
@import "body.scss";
@import "footer.scss";
Globalcode – Open4education
@import
Também pode usar sem a extensão
@import "header";
@import "body";
@import "footer";
Globalcode – Open4education
@extend
Este é um dos recursos mais úteis do Sass.
@extend permite herdar as propriedades de uma
classe ou seletor. Ela ajuda a manter o seu .scss
mais simples.
Tem o mesmo conceito de Herança da Orientação
a Objetos;
Globalcode – Open4education
@extend
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
Globalcode – Open4education
Interpolation
É recurso que permite encaixar valores dentro de
outros valores;
Usado através do simbolo #{}
Globalcode – Open4education
Interpolation
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
p.foo {
border-color: blue;
}
Globalcode – Open4education
@warn
A directiva @warn imprime o valor de uma
expressão do Sass para o fluxo de saída de erro
padrão.
@warn "Assuming #{$x} to be in pixels";
Globalcode – Open4education
@debug
Tem a mesma função do @warn, só que em modo
debug.
@debug 10em + 12em;
Globalcode – Open4education
@error
Tem o mesmo objetivo de @warn, só que imprime
mensagens quando acontece algum erro;
@error “mensagem….”;
Globalcode – Open4education
Operações
O Sass tem suporte as operações matemáticas
básicas (soma, subtração, divisão e multiplicação);
Globalcode – Open4education
Operações - Soma
.minha_classe {
width: 600px + 960px;
}
Globalcode – Open4education
Operações - Subtração
.minha_classe {
width: 600px - 960px;
}
Globalcode – Open4education
Operações - Multiplicação
.minha_classe {
width: 960px * 100%;
}
Globalcode – Open4education
Operações - Divisão
.minha_classe {
width: 600px / 960px * 100%;
}
Globalcode – Open4education
Controle de Diretivas e
Expressões
O Sass também tem suporte a Controle de
Diretivas e Expressões Regulares com as funções:
@if, @for, @each e @while;
Globalcode – Open4education
@if
if(true, 1px, 2px) => 1px
Globalcode – Open4education
@if
@Mixin meu_mixi($radius) {
@if $radius > 5 {
//Implementação
}
}
Globalcode – Open4education
@while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
Globalcode – Open4education
@for
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
Globalcode – Open4education
@each
@each $animal in tigre, cachorro, elefante, girafa {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
Globalcode – Open4education
Darken
Função do Sass para deixar a cor mais escura;
Sintaxe:
darken(cor, porcentagem); -> darken(#0000FF, 20%);
Globalcode – Open4education
Lighten
Função do Sass para deixar a cor mais clara;
Sintaxe:
lighten(cor, porcentagem); -> lighten(#0000FF, 20%);
Globalcode – Open4education
Referência
http://sass-lang.com
Globalcode – Open4education
Obrigado!
E-mail: rodrigo.amora.freitas@gmail.com
Twitter: @RodrigoAmora

Mais conteúdo relacionado

Destaque

Destaque (20)

TDC POA 2016 - Robotium + Cucumber + Gradle, misture com spoon e tenha uma ex...
TDC POA 2016 - Robotium + Cucumber + Gradle, misture com spoon e tenha uma ex...TDC POA 2016 - Robotium + Cucumber + Gradle, misture com spoon e tenha uma ex...
TDC POA 2016 - Robotium + Cucumber + Gradle, misture com spoon e tenha uma ex...
 
Como ensinei mais de 1000 testadores
Como ensinei mais de 1000 testadoresComo ensinei mais de 1000 testadores
Como ensinei mais de 1000 testadores
 
TDC2016POA | Trilha Web - Realtime applications com Socket.io
TDC2016POA | Trilha Web - Realtime applications com Socket.ioTDC2016POA | Trilha Web - Realtime applications com Socket.io
TDC2016POA | Trilha Web - Realtime applications com Socket.io
 
A transição de um QA tradicional para um Agile Tester
A transição de um QA tradicional para um Agile TesterA transição de um QA tradicional para um Agile Tester
A transição de um QA tradicional para um Agile Tester
 
Apresentação tdc 2016 - trilha de testes
Apresentação tdc   2016 - trilha de testesApresentação tdc   2016 - trilha de testes
Apresentação tdc 2016 - trilha de testes
 
TDC Floripa 2015 - Branding, UX e Marketing
TDC Floripa 2015 - Branding, UX e MarketingTDC Floripa 2015 - Branding, UX e Marketing
TDC Floripa 2015 - Branding, UX e Marketing
 
Tdc 5 ideias para melhorar os seus testes
Tdc   5 ideias para melhorar os seus testesTdc   5 ideias para melhorar os seus testes
Tdc 5 ideias para melhorar os seus testes
 
Ensinando e aprendendo com desafios
Ensinando e aprendendo com desafiosEnsinando e aprendendo com desafios
Ensinando e aprendendo com desafios
 
TDC2016POA | Trilha Web - JSON API: não reinvente a roda
TDC2016POA | Trilha Web - JSON API: não reinvente a rodaTDC2016POA | Trilha Web - JSON API: não reinvente a roda
TDC2016POA | Trilha Web - JSON API: não reinvente a roda
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
 
TDC2016POA | Trilha Web - Realidade Virtual com WebVR
TDC2016POA | Trilha Web -  Realidade Virtual com WebVRTDC2016POA | Trilha Web -  Realidade Virtual com WebVR
TDC2016POA | Trilha Web - Realidade Virtual com WebVR
 
Estou desempregado e agora? Como me recolocar como QA.
Estou desempregado e agora? Como me recolocar como QA.Estou desempregado e agora? Como me recolocar como QA.
Estou desempregado e agora? Como me recolocar como QA.
 
Apresentação de Padrões de Design para Aplicativos Móveis.
Apresentação de Padrões de Design para Aplicativos Móveis.Apresentação de Padrões de Design para Aplicativos Móveis.
Apresentação de Padrões de Design para Aplicativos Móveis.
 
Automatizando uma app Híbrida
Automatizando uma app HíbridaAutomatizando uma app Híbrida
Automatizando uma app Híbrida
 
Implementando acessibilidade em aplicações Android
Implementando acessibilidade em aplicações AndroidImplementando acessibilidade em aplicações Android
Implementando acessibilidade em aplicações Android
 
Micro serviços alterando seu mindset de tester
Micro serviços alterando seu mindset de testerMicro serviços alterando seu mindset de tester
Micro serviços alterando seu mindset de tester
 
10 coisas que não me contaram sobre Testes
10 coisas que não me contaram sobre Testes10 coisas que não me contaram sobre Testes
10 coisas que não me contaram sobre Testes
 
TDC2016POA | Trilha Ruby - Stack Level too Deep e Tail Call Optimization: É u...
TDC2016POA | Trilha Ruby - Stack Level too Deep e Tail Call Optimization: É u...TDC2016POA | Trilha Ruby - Stack Level too Deep e Tail Call Optimization: É u...
TDC2016POA | Trilha Ruby - Stack Level too Deep e Tail Call Optimization: É u...
 
TDC2016POA | Trilha UX Design - UX no processo evolutivo de produto
TDC2016POA | Trilha UX Design - UX no processo evolutivo de produtoTDC2016POA | Trilha UX Design - UX no processo evolutivo de produto
TDC2016POA | Trilha UX Design - UX no processo evolutivo de produto
 
TDC2016POA | Trilha UX Design - O que diabos signifca proposta de valor?
TDC2016POA | Trilha UX Design -  O que diabos signifca proposta de valor?TDC2016POA | Trilha UX Design -  O que diabos signifca proposta de valor?
TDC2016POA | Trilha UX Design - O que diabos signifca proposta de valor?
 

Semelhante a TDC 2016 - Sass: CSS com super-poderes.

Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHP
elliando dias
 

Semelhante a TDC 2016 - Sass: CSS com super-poderes. (20)

Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
 
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
Introduzindo StimulusJS: o novo Framework JavaScript para Ruby On Rails.
 
JSF2 c/ PrimeFaces, RichFaces e ICEfaces
JSF2 c/ PrimeFaces, RichFaces e ICEfacesJSF2 c/ PrimeFaces, RichFaces e ICEfaces
JSF2 c/ PrimeFaces, RichFaces e ICEfaces
 
Less - CSS Dynamic
Less - CSS DynamicLess - CSS Dynamic
Less - CSS Dynamic
 
O Aduino ama a Internet - TDC 2012
O Aduino ama a Internet - TDC 2012O Aduino ama a Internet - TDC 2012
O Aduino ama a Internet - TDC 2012
 
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015  Porto Alegre - Interfaces ricas com Rails e React.JSTDC2015  Porto Alegre - Interfaces ricas com Rails e React.JS
TDC2015 Porto Alegre - Interfaces ricas com Rails e React.JS
 
Avaliando o Apache Cassandra como cache distribuido no SPC Brasil - NoSQLBR
Avaliando o Apache Cassandra como cache distribuido no SPC Brasil - NoSQLBRAvaliando o Apache Cassandra como cache distribuido no SPC Brasil - NoSQLBR
Avaliando o Apache Cassandra como cache distribuido no SPC Brasil - NoSQLBR
 
Analise frameworks php
Analise frameworks phpAnalise frameworks php
Analise frameworks php
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014ASP.NET vNext no .NET Architects Days 2014
ASP.NET vNext no .NET Architects Days 2014
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
 
Arquitetura escalável e resiliente com NGINX, DataSnap, REDIS e MongoDB
Arquitetura escalável e resiliente com NGINX, DataSnap, REDIS e MongoDBArquitetura escalável e resiliente com NGINX, DataSnap, REDIS e MongoDB
Arquitetura escalável e resiliente com NGINX, DataSnap, REDIS e MongoDB
 
TDC2017 | São Paulo - Trilha Rad: Delphi C++ How we figured out we had a SRE...
TDC2017 | São Paulo - Trilha Rad: Delphi C++  How we figured out we had a SRE...TDC2017 | São Paulo - Trilha Rad: Delphi C++  How we figured out we had a SRE...
TDC2017 | São Paulo - Trilha Rad: Delphi C++ How we figured out we had a SRE...
 
JSF 2.0: Uma Evolução nas Interfaces Web com Java
JSF 2.0: Uma Evolução nas Interfaces Web com JavaJSF 2.0: Uma Evolução nas Interfaces Web com Java
JSF 2.0: Uma Evolução nas Interfaces Web com Java
 
JSF 2.0 e ScrumToys
JSF 2.0 e ScrumToysJSF 2.0 e ScrumToys
JSF 2.0 e ScrumToys
 
Ruby On Rails Regis
Ruby On Rails RegisRuby On Rails Regis
Ruby On Rails Regis
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHP
 
Aplicações 12 fatores, melhor com Docker
Aplicações 12 fatores, melhor com DockerAplicações 12 fatores, melhor com Docker
Aplicações 12 fatores, melhor com Docker
 
Modern PHP
Modern PHPModern PHP
Modern PHP
 
Meetup São Paulo, Maxscale Implementação e Casos de Uso
Meetup São Paulo, Maxscale Implementação e Casos de UsoMeetup São Paulo, Maxscale Implementação e Casos de Uso
Meetup São Paulo, Maxscale Implementação e Casos de Uso
 

TDC 2016 - Sass: CSS com super-poderes.