Globalcode – Open4education Trilha Web – Sass: CSS com super-poderes Rodrigo Amora [email protected] @RodrigoAmora
Globalcode – Open4education
Trilha Web – Sass: CSS com super-poderesRodrigo Amora
[email protected] @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
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.cssArquivo 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
Obrigado! E-mail: [email protected] Twitter: @RodrigoAmora