TDC 2016 - Sass: CSS com super-poderes.

Globalcode – Open4education
Trilha Web – Sass: CSS com super-poderes
Rodrigo Amora
rodrigo.amora.freitas@gmail.com
@RodrigoAmora

Quem sou eu
Rodrigo Amora
Sou formado em Sistemas de Informação pela
Unigranrio.
Sou Desenvolvedor Web desde 2009.
Sou Desenvolvedor Mobile desde 2011.

Sócio e Dev
www.boxes-list.com

Contatos
rodrigo.amora.freitas@gmail.com
@RodrigoAmora

Agenda
Tipos de Dados
Variáveis
Mixin
Nesting
Imports
Extends
Operações
Controles de Diretivas e Expressões
Darken
Lithen

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;

Instalação no Linux e MacOS
gem install sass

Instalação no Windows
Toasty!!!
Troque de S.O

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;

O Sass trabalha com arquivos .scss e os converte
para arquivos .css normal

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) )

Variáveis
Variáveis no Sass possuem o mesmo conceito da
programação back-end e JS, ou seja serve para
guarda valores;

Variáveis
a {
color: #fff;
}
.div {
color: #fff;
background-color: grey;
border: 1px solid blue;
border-radius: 5px;
}

Variáveis
$cor-branca: #fff;
a {
color: $cor-branca;
}
.div {
color: $cor-branca;
border: 1px solid blue;
border-radius: 5px;
}

Variáveis
$cor-branca: #fff;
$borda-azul: 1px solid blue;
.div {
border: $borda-azul;
border-radius: 5px;
color: $cor-branca;
}

sass estilos.scss:estilos.css
Arquivo usado pelo Sass Arquivo gerado pelo Sass

Mais eu vou ter que executar esse comando para
toda alteração que eu fizer?

sass --watch estilos.scss:estilos.css

Mixin
Usado para guardar trechos de código CSS
repetidos;
É chamado através da diretiva @include;

Mixin
@mixin meu_mixin {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.minha_classe {
@include meu_mixin;
}

Mixin
@mixin meu_mixin($radius: 0.3em) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.minha_classe {
@include meu_mixin(2px);
}

Nesting
Recurso do Sass para aninhar propriedades do
CSS;

Nesting
.minha_classe {
a {
color: red;
}
p {
background-color: blue;
}
}

Nesting
.minha_classe {
}
.minha_classe a {
color: red
}
.minha_classe p {
background-color: blue;
}

@import
Serve para importar arquivos dentro de outros
arquivos;
Funciona da mesma forma que a função include do
PHP e require do JS;

@import
@import "header.scss";
@import "body.scss";
@import "footer.scss";

@import
Também pode usar sem a extensão
@import "header";
@import "body";
@import "footer";

@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;

@extend
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}

Interpolation
É recurso que permite encaixar valores dentro de
outros valores;
Usado através do simbolo #{}

Interpolation
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
p.foo {
border-color: blue;
}

@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";

@debug
Tem a mesma função do @warn, só que em modo
debug.
@debug 10em + 12em;

@error
Tem o mesmo objetivo de @warn, só que imprime
mensagens quando acontece algum erro;
@error “mensagem….”;

Operações
O Sass tem suporte as operações matemáticas
básicas (soma, subtração, divisão e multiplicação);

Operações - Soma
.minha_classe {
width: 600px + 960px;
}

Operações - Subtração
.minha_classe {
width: 600px - 960px;
}

Operações - Multiplicação
.minha_classe {
width: 960px * 100%;
}

Operações - Divisão
.minha_classe {
width: 600px / 960px * 100%;
}

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;

@if
if(true, 1px, 2px) => 1px

@if
@Mixin meu_mixi($radius) {
@if $radius > 5 {
//Implementação
}
}

@while
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}

@for
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}

@each
@each $animal in tigre, cachorro, elefante, girafa {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}

Darken
Função do Sass para deixar a cor mais escura;
Sintaxe:
darken(cor, porcentagem); -> darken(#0000FF, 20%);

Lighten
Função do Sass para deixar a cor mais clara;
Sintaxe:
lighten(cor, porcentagem); -> lighten(#0000FF, 20%);

Referência
http://sass-lang.com

Obrigado!
E-mail: rodrigo.amora.freitas@gmail.com
Twitter: @RodrigoAmora

TDC 2016 - Sass: CSS com super-poderes.

Mais conteúdo relacionado

Destaque

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

TDC 2016 - Sass: CSS com super-poderes.