tdc 2016 - sass: css com super-poderes

Globalcode – Open4education

Trilha Web – Sass: CSS com super-poderesRodrigo Amora

[email protected] @RodrigoAmora

mailto:[email protected]


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

http://www.boxes-list.com


Contatos

[email protected] @RodrigoAmora

mailto:[email protected]?subject=


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;

http://rubyinstaller.org/


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; background-color: grey; border: 1px solid blue; border-radius: 5px; }


Variáveis

$cor-branca: #fff; $borda-azul: 1px solid blue;

.div { background-color: grey; border: $borda-azul; border-radius: 5px; color: $cor-branca; }


sass estilos.scss:estilos.cssArquivo 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

http://sass-lang.com


Obrigado! E-mail: [email protected] Twitter: @RodrigoAmora

mailto:[email protected]?subject=

tdc 2016 - sass: css com super-poderes

Internet