ALCIDES QUEIROZ

ROMPENDO OS (VÁRIOS) LIMITES DO CSS COM

Sass+ Compass
ALCIDES QUEIROZ

ROMPENDO OS (VÁRIOS) LIMITES DO CSS COM

+ Compass
ALCIDES QUEIROZ

ROMPENDO OS (VÁRIOS) LIMITES DO CSS COM

+
/alcidesqueiroz
/alcidesqueiroz
goo.gl/0HSUA4
/alcidesqueiroz
ROMPENDO OS (VÁRIOS) LIMITES DO CSS COM

+

ALCIDES QUEIROZ
ALCIDES QUEIROZ

Just install it:
goo.gl/48fowW
ROMPENDO OS (VÁRIOS) LIMITES DO CSS COM
O PROBLEMA
OS PROBLEMAS
ORGANIZAÇÃO
REUSO
COMPLETAMENTE LOGICLESS
VERBOSO
IMPORTS PROBLEMÁTICOS

OS PROBLEMAS
SASS
O que é?

Pré-processador CSS criado em 2007 por Hampton
Catlin
SASS E SCSS
Sintaxe identada
#main
color: blue
font-size: 0.3em
a

font:
weight: bold
family: serif
&:hover
background-col...
COMPILANDO
sass --update .

sass --update --no-cache .
sass --update --no-cache .:..CSS
sass --watch --no-cache .:..CSS

s...
COMENTÁRIOS
//Comentário inline

/*
Comentário
Em
Bloco
*/
ANINHAMENTO DE SELETORES
CSS
body {
background-color: #FF0;
}
body > header {
width: 900px;
}
body > header h1 {
font-weig...
ANINHAMENTO DE SELETORES
SCSS
body {
background-color: #FF0;
> header{
width: 900px;
h1{
font-weight: normal;
}
}
}
ANINHAMENTO DE SELETORES
SCSS
body, #wrapper {
background-color: #FF0;
> header{
width: 900px;
h1{
font-weight: normal;
}
...
ANINHAMENTO DE SELETORES
CSS Gerado
body, #wrapper {
background-color: #FF0;
}
body > header, #wrapper > header {
width: 9...
NÃO ABUSE!
SIGA A REGRA DOS 4 NÍVEIS
(&) REFERENCE SELECTOR
h1, h2 {
&:before{
margin-right: 10px;
}
.standout {
color: red;
}
&.title{
font-weight: bold;
}

}
(&) REFERENCE SELECTOR
CSS Gerado
h1:before, h2:before {
margin-right: 10px;
}
h1 .standout, h2 .standout {
color: red;
}
...
LET’S CODE!
VARIÁVEIS
$base-color: #679;

color: $base-color;
$default-border-radius: 3px;
border-radius: $default-border-radius;
VARIÁVEIS - A FLAG !default
$base-color: #679;

$base-color: #444;
Agora, o valor de $base-color é #444
VARIÁVEIS - A FLAG !default
$base-color: #679;

$base-color: #444 !default;
O valor de $base-color é #679
VARIÁVEIS - OUTROS USOS
SELETORES
$button-icon-selector: “.btn button .icon:before”;
VARIÁVEIS - OUTROS USOS
PROPRIEDADES COMPLEXAS

$default-border: dotted 2px #444;
$strange-shadow: 7px 7px 5px rgba(50, 50...
VARIÁVEIS - OUTROS USOS
EM CONJUNTO COM OUTRAS VARIÁVEIS

$default-border-style: dotted;
$default-border-color: #222;
$def...
VARIÁVEIS - OUTROS USOS
ETC...

$default-transition-duration: 300ms;
$mask-opacity: 0.7;
$default-label-separator: ‘:’;
LET’S CODE!
INTERPOLAÇÃO
$side: left;
$border: "solid 1px #000";
.nome-de-classe-#{$side}{
text-align: $side;
float: #{$side};
border-...
INTERPOLAÇÃO
CSS Gerado
.nome-de-classe-left {
text-align: left;
float: left;
border-left-width: 1px;
border-top: "solid 1...
IMPORTANDO
@import ‘variables’;
IMPORTANDO - CSS VS SCSS
//Os 4 imports abaixo são imports convencionais do CSS
@import "main.css";
@import "boleto" print...
IMPORTANDO - @import ANINHADO
Exemplo.scss
.top-bar{
.user{
color: #000;
}
}
Exemplo2.scss
#main{
@import ‘exemplo’;
}
IMPORTANDO - @import ANINHADO
CSS Gerado
#main .top-bar .user {
color: #000;
}
PARTIALS
_variables.scss
ORGANIZANDO
variáveis
mixins
componentes
dependências do compass
font-face

layout
ANINHAMENTO DE PROPRIEDADES
CSS
.profile{
border-left: solid 1px #000;
border-right: dotted 4px #FF0;
}
ANINHAMENTO DE PROPRIEDADES
SCSS
.profile{
border:{
left: solid 1px #000;
right: dotted 4px #FF0;
}
}
ANINHAMENTO DE PROPRIEDADES
SCSS
.profile{
border: dashed 2px #00F {
left: solid 1px #000;
right: dotted 4px #FF0;
}
}
LET’S CODE!
Sass INTERACTIVE
sass -i
DIRETIVA @debug
$largura-padrao: 260px;
$largura-total: $largura-padrao * 2;
@debug "Largura total: #{$largura-total}";
TIPOS DE DADO
números
2.5, 20, 40px, 50deg, 600ms

strings
sans-serif, “exemplo”, ‘h1+h2’

cores

Strings são sempre tradu...
TIPOS DE DADO
nulls
null

A flag !default considera variáveis null
como não-definidas, e as reescreve

listas (listas de v...
OPERADORES MATEMÁTICOS
+ soma
- subtração
* multiplicação
/ divisão
OPERADORES MATEMÁTICOS
$altura: 50px * 3 + 400px;
$angulo: 30deg * 4;

$duracao: 400ms * 5;
$largura: ($tamanho-padrao * $...
OPERADORES MATEMÁTICOS
O curioso caso do operador /
font: 20pt/40pt;

/*Isso não é uma
divisão*/
width: 50px/2; //Isso tam...
OPERADORES DE COMPARAÇÃO
== igual a
!= diferente de

> maior que
< menor que
>= maior ou igual que
<= menor que ou igual
OPERADORES DE COMPARAÇÃO
$exemplo: 10 > 6 and (4 > 5 or 3 == 3);
$exemplo2: 20 != 30;
$exemplo3: $b >= 18;
OPERADORES LÓGICOS
and
or

not
OPERADORES LÓGICOS
$exemplo: (true and false) or true;
$exemplo2: not $habilitar-animacoes;
DIRETIVAS DE CONTROLE @if, @else,
@else if
$inverse-color: true;
…
.introduction{
background-color: $base-color;
@if $inve...
DIRETIVAS DE CONTROLE @if, @else,
@else if
@if $width == 'auto' {
//…
} @else if $width == 1 {
//…
} @else {
display: inli...
DIRETIVAS DE CONTROLE @if, @else,
@else if
@if $auto-resize and $largura > 300px{
//…
} @else if not $auto-resize {
//…
} ...
DIRETIVA DE CONTROLE @for
@for $i from 1 through 4 {
.nivel-#{$i} {
font-size: 20px + (12px / $i);
}
}

.nivel-1
.nivel-2
...
DIRETIVA DE CONTROLE @for
@for $i from 1 through 4 {
.nivel-#{$i} {
font-size: 20px + (12px / $i);
}
}

.nivel-1
.nivel-2
...
DIRETIVA DE CONTROLE @for
@for $i from 1 to 4 {
.nivel-#{$i} {
font-size: 20px + (12px / $i);
}
}

.nivel-1 { font-size: 3...
DIRETIVA DE CONTROLE @while
$i: 1;
@while $i <= 5 {
.nivel-#{$i} { text-indent: 1cm * $i; }
$i: $i + 1;
}

.nivel-1
.nivel...
DIRETIVA DE CONTROLE @each
@each $carro in chevette, opala, kadett {
.detalhes-#{$carro} {
background-image: url('/images/...
DIRETIVA DE CONTROLE @each
div{
$i: 2px;
@each $lado in top, right, left, bottom
border-#{$lado}-width: $i;
$i:$i+2px
}
}
...
OPERAÇÕES COM CORES
red + blue //=>#FF00FF
#234 * 3 //=>#6699CC
#DDD - #FF0 //=>#0000DD
#FFF / 10 //=> #191919
LET’S CODE!
HERANÇA - TENTATIVA 1
CSS
.profile{
border: solid 2px #222;
overflow: hidden;
color: #D22;
display: inline-block;
backgrou...
HERANÇA - TENTATIVA 1
Problemas desta abordagem:
Não é DRY
Manutenibilidade
HERANÇA - TENTATIVA 2
CSS
.profile,
.corporative-profile {
border: solid 2px #222;
overflow: hidden;
color: #D22;
display:...
HERANÇA - TENTATIVA 2
Problemas desta abordagem:
Manutenibilidade: para caçar de quem um
determinado seletor herda

Manute...
HERANÇA - TENTATIVA 3
CSS + HTML
.profile{
border: solid 2px #222;
overflow: hidden;
color: #D22;
display: inline-block;
b...
HERANÇA - TENTATIVA 3
Problemas desta abordagem:
Não há clara relação de extensão no código CSS
Uma certa transferência de...
HERANÇA - THE SASS WAY!!!
SCSS
.profile{
border: solid 2px #222;
overflow: hidden;
color: #D22;
display: inline-block;
bac...
HERANÇA
CSS Gerado
.profile, .corporative-profile {
border: solid 2px #222;
overflow: hidden;
color: #D22;
display: inline...
HERANÇA - DEJA VU...
• Sim, o código gerado é igual ao da
tentativa 2.
• O único e grande problema da técnica
adotada era ...
HERANÇA MÚLTIPLA
SCSS
.detalhes{
border: dashed 3px #000;
}
.tile{
background-color: #2D2;
}

.ficha{
@extend .detalhes;
@...
HERANÇA MÚLTIPLA
Ou assim...
.ficha{
@extend .detalhes, .tile;
color: #FFF;
}
HERANÇA - ALÉM DE CLASSES
SCSS
h1{

h2{

font-weight: normal;
font-family: OpenSans
Regular;
font-size: 30px;
}

@extend h...
HERANÇA - ALÉM DE CLASSES
CSS Gerado
h1, h2 {
font-weight: normal;
font-family: OpenSans Regular;
font-size: 30px;
}
#titu...
HERANÇA - SELETORES ANINHADOS
SCSS
button{
.dangerous-button{
&.general-button{
@extend .general-button;
border-radius: 3p...
HERANÇA - HERDANDO DO “NADA”
SCSS
button{
@extend .essa-classe-nao-existe;
}

<< Kaboom!
HERANÇA - A FLAG !OPTIONAL
SCSS
button{
@extend .essa-classe-nao-existe !optional;
}
HERANÇA - SELETORES ABSTRATOS
SCSS
%teste{
color: blue;
}
.teste2{
@extend %teste;
font-weight:
normal;
}
.teste3{
@extend...
HERANÇA - SELETORES ABSTRATOS
CSS Gerado
.teste2, .teste3 {
color: blue;
}
.teste2 {
font-weight: normal;
}
.teste3 {
font...
MIXINS
SCSS
@mixin absolute-full-size{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.content{
@include abso...
MIXINS
CSS Gerado
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
MIXINS - PARÂMETROS
SCSS
@mixin absolute-full-size($spacement){
position: absolute;
top: $spacement;
bottom: $spacement;
l...
MIXINS - PARÂMETROS COM VALOR
DEFAULT
SCSS

@mixin absolute-full-size($spacement: 0){
position: absolute;
top: $spacement;...
MIXINS - PARÂMETROS NOMEADOS
SCSS

@mixin tile-dimensions($horizontal-slots: 1,
$vertical-slots: 1){
width: $horizontal-sl...
MIXINS - DIRETIVA @content
SCSS
@mixin tile-center-icon{
.icon-center{
@content;
}
}
.config-tile{
@include tile-center-ic...
MIXINS - QUANDO USAR?
SCSS
@mixin absolute-full-size{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.conten...
MIXINS VS. EXTENDS
Mixins podem receber parâmetros

Mixins devem ser usados para
compartilhar estilos similares entre
regr...
MIXINS
Exemplo de mixins úteis.
FUNCTIONS
@function calcular($val: 5px) {
@return $val * 2;
}
margin-right: calcular(10px);
FUNCTIONS
@function tamanho-tile($slots: 1) {
$tamanho: $tamanho-padrao * $slots;
@if $espacamento-padrao > 0{
$tamanho: $...
FUNCTIONS VS. MIXINS
Functions retornam um único valor

Mixins não possuem retorno

Functions não podem conter
propriedade...
LET’S CODE!
FUNÇÕES NATIVAS - lighten
Ilumina uma cor
//Ilumina a cor preta em 10%
lighten(#000, 10)//=>#1A1A1A
A função lighten inten...
FUNÇÕES NATIVAS - darken
Escurece uma cor
//Escurece a cor azul em 20%
darken(blue, 20)//=>#000099
A função darken reduz o...
FUNÇÕES NATIVAS - grayscale
Converte uma cor para a sua equivalente
em escala de cinza
grayscale(red)//=>#808080
FUNÇÕES NATIVAS - mix
Mistura duas cores de acordo com um peso
//Mistura as cores preto e branco
mix(black, white)//=>#7F7...
FUNÇÕES NATIVAS - transparentize e
opacify
Torna uma cor transparente de acordo com
um determinado percentual
//Um azul 30...
FUNÇÕES NATIVAS - scale-color
Cria uma nova cor com base em outra existente,
ajustando cada canal
//Aumenta os canais R e ...
FUNÇÕES NATIVAS - if TERNÁRIO
Função que age de forma semelhante ao if
ternário em outras linguagens
//Se $dark-layout for...
FUNÇÕES NATIVAS - unquote
Converte uma string quoted (com aspas) em
uma string sem aspas
$borda: “solid 1px #000”;
a { bor...
FUNÇÕES NATIVAS - nth
Obtém um item de uma lista de acordo com
sua posição
$cor: nth(5px 5px 10px #FBD, 4);//#FBD

Listas ...
FUNÇÕES NATIVAS - length
Retorna o tamanho de uma lista
$margens: 10px 5px 15px 0;
if(length($margens) > 0)... //length re...
FUNÇÕES NATIVAS - index
Retorna a posição de um item em uma lista
$margens: 10px 5px 15px 0;
index($margens, 5px) //index ...
FUNÇÕES NATIVAS - unit
Retorna a unidade de um valor numérico
unit(10px)//=> “px”
unit(120deg)//=> “deg”
unit(800ms)//=> “...
FUNÇÕES NATIVAS - unitless
Testa se um valor numérico possui unidade
@mixin tamanho-texto($tamanho){
@if(unitless($tamanho...
COMPASS config.rb
Retém todas as configurações do compass
# sass_path: the directory your Sass files are in. THIS file
sho...
ALT TAB...

http://goo.gl/YmQSez
COMPASS STATISTICS
Retorna estatísticas sobre um projeto compass
$ compass stats
SEGUINDO EM FRENTE...
Bourbon - http://bourbon.io
Compass Recipes - http://compass-recipes.moox.fr
Todas as funções do Sas...
DICAS ADICIONAIS...
BEM – Block, Element, Modifier - http://goo.gl/QpBJFo
Color Me - http://richbray.me/cms/usage/
Sassy B...
Rompendo os (vários) Limites do CSS com Sass e Compass
Rompendo os (vários) Limites do CSS com Sass e Compass
Rompendo os (vários) Limites do CSS com Sass e Compass
Upcoming SlideShare
Loading in …5
×

Rompendo os (vários) Limites do CSS com Sass e Compass

2,273 views
2,108 views

Published on

Slides do meu workshop sobre Sass + Compass.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,273
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
23
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Rompendo os (vários) Limites do CSS com Sass e Compass

  1. 1. ALCIDES QUEIROZ ROMPENDO OS (VÁRIOS) LIMITES DO CSS COM Sass+ Compass
  2. 2. ALCIDES QUEIROZ ROMPENDO OS (VÁRIOS) LIMITES DO CSS COM + Compass
  3. 3. ALCIDES QUEIROZ ROMPENDO OS (VÁRIOS) LIMITES DO CSS COM +
  4. 4. /alcidesqueiroz /alcidesqueiroz goo.gl/0HSUA4 /alcidesqueiroz ROMPENDO OS (VÁRIOS) LIMITES DO CSS COM + ALCIDES QUEIROZ
  5. 5. ALCIDES QUEIROZ Just install it: goo.gl/48fowW ROMPENDO OS (VÁRIOS) LIMITES DO CSS COM
  6. 6. O PROBLEMA
  7. 7. OS PROBLEMAS
  8. 8. ORGANIZAÇÃO REUSO COMPLETAMENTE LOGICLESS VERBOSO IMPORTS PROBLEMÁTICOS OS PROBLEMAS
  9. 9. SASS O que é? Pré-processador CSS criado em 2007 por Hampton Catlin
  10. 10. SASS E SCSS Sintaxe identada #main color: blue font-size: 0.3em a font: weight: bold family: serif &:hover background-color: #EEE
  11. 11. COMPILANDO sass --update . sass --update --no-cache . sass --update --no-cache .:..CSS sass --watch --no-cache .:..CSS sass --watch --no-cache --poll .:..CSS
  12. 12. COMENTÁRIOS //Comentário inline /* Comentário Em Bloco */
  13. 13. ANINHAMENTO DE SELETORES CSS body { background-color: #FF0; } body > header { width: 900px; } body > header h1 { font-weight: normal; }
  14. 14. ANINHAMENTO DE SELETORES SCSS body { background-color: #FF0; > header{ width: 900px; h1{ font-weight: normal; } } }
  15. 15. ANINHAMENTO DE SELETORES SCSS body, #wrapper { background-color: #FF0; > header{ width: 900px; h1{ font-weight: normal; } } }
  16. 16. ANINHAMENTO DE SELETORES CSS Gerado body, #wrapper { background-color: #FF0; } body > header, #wrapper > header { width: 900px; } body > header h1, #wrapper > header h1 { font-weight: normal; }
  17. 17. NÃO ABUSE!
  18. 18. SIGA A REGRA DOS 4 NÍVEIS
  19. 19. (&) REFERENCE SELECTOR h1, h2 { &:before{ margin-right: 10px; } .standout { color: red; } &.title{ font-weight: bold; } }
  20. 20. (&) REFERENCE SELECTOR CSS Gerado h1:before, h2:before { margin-right: 10px; } h1 .standout, h2 .standout { color: red; } h1.title, h2.title { font-weight: bold; }
  21. 21. LET’S CODE!
  22. 22. VARIÁVEIS $base-color: #679; color: $base-color; $default-border-radius: 3px; border-radius: $default-border-radius;
  23. 23. VARIÁVEIS - A FLAG !default $base-color: #679; $base-color: #444; Agora, o valor de $base-color é #444
  24. 24. VARIÁVEIS - A FLAG !default $base-color: #679; $base-color: #444 !default; O valor de $base-color é #679
  25. 25. VARIÁVEIS - OUTROS USOS SELETORES $button-icon-selector: “.btn button .icon:before”;
  26. 26. VARIÁVEIS - OUTROS USOS PROPRIEDADES COMPLEXAS $default-border: dotted 2px #444; $strange-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75), -10px 5px 20px #444;
  27. 27. VARIÁVEIS - OUTROS USOS EM CONJUNTO COM OUTRAS VARIÁVEIS $default-border-style: dotted; $default-border-color: #222; $default-border-width: 2px; $default-border: $default-border-style $default-border-color $default-border-width;
  28. 28. VARIÁVEIS - OUTROS USOS ETC... $default-transition-duration: 300ms; $mask-opacity: 0.7; $default-label-separator: ‘:’;
  29. 29. LET’S CODE!
  30. 30. INTERPOLAÇÃO $side: left; $border: "solid 1px #000"; .nome-de-classe-#{$side}{ text-align: $side; float: #{$side}; border-#{$side}-width: 1px; border-top: $border; border-right: #{$border}; }
  31. 31. INTERPOLAÇÃO CSS Gerado .nome-de-classe-left { text-align: left; float: left; border-left-width: 1px; border-top: "solid 1px #000"; /*ops...*/ border-right: solid 1px #000; }
  32. 32. IMPORTANDO @import ‘variables’;
  33. 33. IMPORTANDO - CSS VS SCSS //Os 4 imports abaixo são imports convencionais do CSS @import "main.css"; @import "boleto" print; @import "http://teste.com/layout.css"; @import url("font-face.css"); /* O import abaixo não possui extensão CSS, nem é definido via url(), não inicia com "http://" ou possui uma media query, portanto o Sass tentará localizar um arquivo .SCSS ou .SASS equivalente*/ @import ‘variables’;
  34. 34. IMPORTANDO - @import ANINHADO Exemplo.scss .top-bar{ .user{ color: #000; } } Exemplo2.scss #main{ @import ‘exemplo’; }
  35. 35. IMPORTANDO - @import ANINHADO CSS Gerado #main .top-bar .user { color: #000; }
  36. 36. PARTIALS _variables.scss
  37. 37. ORGANIZANDO variáveis mixins componentes dependências do compass font-face layout
  38. 38. ANINHAMENTO DE PROPRIEDADES CSS .profile{ border-left: solid 1px #000; border-right: dotted 4px #FF0; }
  39. 39. ANINHAMENTO DE PROPRIEDADES SCSS .profile{ border:{ left: solid 1px #000; right: dotted 4px #FF0; } }
  40. 40. ANINHAMENTO DE PROPRIEDADES SCSS .profile{ border: dashed 2px #00F { left: solid 1px #000; right: dotted 4px #FF0; } }
  41. 41. LET’S CODE!
  42. 42. Sass INTERACTIVE sass -i
  43. 43. DIRETIVA @debug $largura-padrao: 260px; $largura-total: $largura-padrao * 2; @debug "Largura total: #{$largura-total}";
  44. 44. TIPOS DE DADO números 2.5, 20, 40px, 50deg, 600ms strings sans-serif, “exemplo”, ‘h1+h2’ cores Strings são sempre traduzidas de forma literal, a não ser em interpolações, onde strings “quoted” perdem suas aspas. black, #ABCDEF, rgba(0, 0, 100, 1) booleans true e false
  45. 45. TIPOS DE DADO nulls null A flag !default considera variáveis null como não-definidas, e as reescreve listas (listas de valores separados por espaço ou vírgula) 10px 10px 15px 10px double 5px #FDD; "Lucida Grande", Tahoma, Verdana, Arial, sans-serif 10px 12px, 20px 40px igual a (10px 12px), (20px 40px) Uma lista de listas... =)
  46. 46. OPERADORES MATEMÁTICOS + soma - subtração * multiplicação / divisão
  47. 47. OPERADORES MATEMÁTICOS $altura: 50px * 3 + 400px; $angulo: 30deg * 4; $duracao: 400ms * 5; $largura: ($tamanho-padrao * $quantidade) + ($espacamento-padrao * ($quantidade – 1)) + ($espacamento-padrao / 2);
  48. 48. OPERADORES MATEMÁTICOS O curioso caso do operador / font: 20pt/40pt; /*Isso não é uma divisão*/ width: 50px/2; //Isso também não... width: (50px/2); /*Isso SIM é uma divisão*/ $largura: 50px/2; //Isso também width: 50px/2+1; //E isso...
  49. 49. OPERADORES DE COMPARAÇÃO == igual a != diferente de > maior que < menor que >= maior ou igual que <= menor que ou igual
  50. 50. OPERADORES DE COMPARAÇÃO $exemplo: 10 > 6 and (4 > 5 or 3 == 3); $exemplo2: 20 != 30; $exemplo3: $b >= 18;
  51. 51. OPERADORES LÓGICOS and or not
  52. 52. OPERADORES LÓGICOS $exemplo: (true and false) or true; $exemplo2: not $habilitar-animacoes;
  53. 53. DIRETIVAS DE CONTROLE @if, @else, @else if $inverse-color: true; … .introduction{ background-color: $base-color; @if $inverse-color{ color: #FFF; } }
  54. 54. DIRETIVAS DE CONTROLE @if, @else, @else if @if $width == 'auto' { //… } @else if $width == 1 { //… } @else { display: inline-block; width: $width; }
  55. 55. DIRETIVAS DE CONTROLE @if, @else, @else if @if $auto-resize and $largura > 300px{ //… } @else if not $auto-resize { //… } @else { //… }
  56. 56. DIRETIVA DE CONTROLE @for @for $i from 1 through 4 { .nivel-#{$i} { font-size: 20px + (12px / $i); } } .nivel-1 .nivel-2 .nivel-3 .nivel-4 { { { { font-size: font-size: font-size: font-size: 32px; 26px; 24px; 23px; } } } }
  57. 57. DIRETIVA DE CONTROLE @for @for $i from 1 through 4 { .nivel-#{$i} { font-size: 20px + (12px / $i); } } .nivel-1 .nivel-2 .nivel-3 .nivel-4 { { { { font-size: font-size: font-size: font-size: 32px; 26px; 24px; 23px; } } } }
  58. 58. DIRETIVA DE CONTROLE @for @for $i from 1 to 4 { .nivel-#{$i} { font-size: 20px + (12px / $i); } } .nivel-1 { font-size: 32px; } .nivel-2 { font-size: 26px; } .nivel-3 { font-size: 24px; }
  59. 59. DIRETIVA DE CONTROLE @while $i: 1; @while $i <= 5 { .nivel-#{$i} { text-indent: 1cm * $i; } $i: $i + 1; } .nivel-1 .nivel-2 .nivel-3 .nivel-4 .nivel-5 { { { { { text-indent: text-indent: text-indent: text-indent: text-indent: 1cm; 2cm; 3cm; 4cm; 5cm; } } } } }
  60. 60. DIRETIVA DE CONTROLE @each @each $carro in chevette, opala, kadett { .detalhes-#{$carro} { background-image: url('/images/#{$carro}.png'); } } .detalhes-chevette{ background-image: url("/image/chevette.png");} .detalhes-opala{ background-image: url("/image/opala.png");} .detalhes-kadett{ background-image: url("/image/kadett.png");}
  61. 61. DIRETIVA DE CONTROLE @each div{ $i: 2px; @each $lado in top, right, left, bottom border-#{$lado}-width: $i; $i:$i+2px } } div { border-top-width: 2px; border-right-width: 4px; border-left-width: 6px; border-bottom-width: 8px; } {
  62. 62. OPERAÇÕES COM CORES red + blue //=>#FF00FF #234 * 3 //=>#6699CC #DDD - #FF0 //=>#0000DD #FFF / 10 //=> #191919
  63. 63. LET’S CODE!
  64. 64. HERANÇA - TENTATIVA 1 CSS .profile{ border: solid 2px #222; overflow: hidden; color: #D22; display: inline-block; background-color: #FFF; } .corporative-profile{ border: solid 2px #222; overflow: hidden; color: #D22; display: inline-block; background-color: #DD2; }
  65. 65. HERANÇA - TENTATIVA 1 Problemas desta abordagem: Não é DRY Manutenibilidade
  66. 66. HERANÇA - TENTATIVA 2 CSS .profile, .corporative-profile { border: solid 2px #222; overflow: hidden; color: #D22; display: inline-block; background-color: #FFF; } .corporative-profile { background-color: #DD2; }
  67. 67. HERANÇA - TENTATIVA 2 Problemas desta abordagem: Manutenibilidade: para caçar de quem um determinado seletor herda Manutenibilidade - parte 2: Os seletores filhos poluem o seletor da regra base: .profile,.corporate-profile,.student-profile, .consultant-profile,etc.
  68. 68. HERANÇA - TENTATIVA 3 CSS + HTML .profile{ border: solid 2px #222; overflow: hidden; color: #D22; display: inline-block; background-color: #FFF; } .corporative-profile{ background-color: #DD2; } <div class=“profile corporative-profile”>…</div>
  69. 69. HERANÇA - TENTATIVA 3 Problemas desta abordagem: Não há clara relação de extensão no código CSS Uma certa transferência de lógica de estilização para o HTML Dificulta múltiplos níveis de herança
  70. 70. HERANÇA - THE SASS WAY!!! SCSS .profile{ border: solid 2px #222; overflow: hidden; color: #D22; display: inline-block; background-color: #FFF; } .corporative-profile{ @extend .profile; background-color: #DD2; }
  71. 71. HERANÇA CSS Gerado .profile, .corporative-profile { border: solid 2px #222; overflow: hidden; color: #D22; display: inline-block; background-color: #FFF; } .corporative-profile { background-color: #DD2; } WTF? Um deja vu!?!?
  72. 72. HERANÇA - DEJA VU... • Sim, o código gerado é igual ao da tentativa 2. • O único e grande problema da técnica adotada era manutenibilidade • Porém... você não precisa e nem deve manter o seu CSS gerado • Preocupe-se apenas em manter um SCSS limpo, manutenível, modularizado e fazer uso inteligente e sensato dos seus seletores. Deixe a compilação com o Sass e descanse.
  73. 73. HERANÇA MÚLTIPLA SCSS .detalhes{ border: dashed 3px #000; } .tile{ background-color: #2D2; } .ficha{ @extend .detalhes; @extend .tile; color: #FFF; }
  74. 74. HERANÇA MÚLTIPLA Ou assim... .ficha{ @extend .detalhes, .tile; color: #FFF; }
  75. 75. HERANÇA - ALÉM DE CLASSES SCSS h1{ h2{ font-weight: normal; font-family: OpenSans Regular; font-size: 30px; } @extend h1, #titulo; font-size: 20px; } #titulo{ text-transform: uppercase; color: #222; }
  76. 76. HERANÇA - ALÉM DE CLASSES CSS Gerado h1, h2 { font-weight: normal; font-family: OpenSans Regular; font-size: 30px; } #titulo, h2 { text-transform: uppercase; color: #222; } h2 { font-size: 20px; }
  77. 77. HERANÇA - SELETORES ANINHADOS SCSS button{ .dangerous-button{ &.general-button{ @extend .general-button; border-radius: 3px; background-color: #D22; background-color: #22D; } } } .general-button{ color: #FFF; }
  78. 78. HERANÇA - HERDANDO DO “NADA” SCSS button{ @extend .essa-classe-nao-existe; } << Kaboom!
  79. 79. HERANÇA - A FLAG !OPTIONAL SCSS button{ @extend .essa-classe-nao-existe !optional; }
  80. 80. HERANÇA - SELETORES ABSTRATOS SCSS %teste{ color: blue; } .teste2{ @extend %teste; font-weight: normal; } .teste3{ @extend %teste; font-weight: bold; } VS. .teste{ color: blue; } .teste2{ @extend .teste; font-weight: normal; } .teste3{ @extend .teste; font-weight: bold; }
  81. 81. HERANÇA - SELETORES ABSTRATOS CSS Gerado .teste2, .teste3 { color: blue; } .teste2 { font-weight: normal; } .teste3 { font-weight: bold; } VS. .teste, .teste2, .teste3{ color: blue; } .teste2 { font-weight: normal; } .teste3 { font-weight: bold; }
  82. 82. MIXINS SCSS @mixin absolute-full-size{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .content{ @include absolute-full-size; }
  83. 83. MIXINS CSS Gerado .content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
  84. 84. MIXINS - PARÂMETROS SCSS @mixin absolute-full-size($spacement){ position: absolute; top: $spacement; bottom: $spacement; left: $spacement; right: $spacement; } .content{ @include absolute-full-size(10px); }
  85. 85. MIXINS - PARÂMETROS COM VALOR DEFAULT SCSS @mixin absolute-full-size($spacement: 0){ position: absolute; top: $spacement; bottom: $spacement; left: $spacement; right: $spacement; } .content{ @include absolute-full-size(10px); }
  86. 86. MIXINS - PARÂMETROS NOMEADOS SCSS @mixin tile-dimensions($horizontal-slots: 1, $vertical-slots: 1){ width: $horizontal-slots * 120px; height: $vertical-slots * 120px; } .news-widget { @include tile-dimensions($horizontal-slots: 3, $vertical-slots: 2); } .news-widget { @include tile-dimensions($vertical-slots: 2, $horizontal-slots: 3); }
  87. 87. MIXINS - DIRETIVA @content SCSS @mixin tile-center-icon{ .icon-center{ @content; } } .config-tile{ @include tile-center-icon{ @include fa-cogs; //Font-awesome icon… } }
  88. 88. MIXINS - QUANDO USAR? SCSS @mixin absolute-full-size{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .content{ @include absolute-fullsize; } .absolute-full-size{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .content{ @extend .absolute-fullsize; } VS.
  89. 89. MIXINS VS. EXTENDS Mixins podem receber parâmetros Mixins devem ser usados para compartilhar estilos similares entre regras Classes extendidas sempre se comportarão da mesma forma Extends devem ser usados para compartilhar estilos iguais entre regras Mixins consiste em reaproveitamento de regras Mixins consiste em reaproveitamento de regras e valores Mixins não suportam referências cíclicas (mixin A inclui mixin B que inclui A) Duas regras podem se estender mutuamente sem problema algum (apesar de não indicado) Mixins precisam ser declarados antes de serem chamados Classes extendidas podem estar em qualquer lugar do código
  90. 90. MIXINS Exemplo de mixins úteis.
  91. 91. FUNCTIONS @function calcular($val: 5px) { @return $val * 2; } margin-right: calcular(10px);
  92. 92. FUNCTIONS @function tamanho-tile($slots: 1) { $tamanho: $tamanho-padrao * $slots; @if $espacamento-padrao > 0{ $tamanho: $tamanho + ($espacamento-padrao * $slots – 1); } @return $tamanho; } width: tamanho-tile(3); height: tamanho-tile(2);
  93. 93. FUNCTIONS VS. MIXINS Functions retornam um único valor Mixins não possuem retorno Functions não podem conter propriedades CSS e obviamente nem regras. Elas apenas efetuam alguma espécie de processamento e retornam um resultado. Mixins podem conter não apenas lógica (através das diretivas de controle), como propriedades CSS, ou até regras inteiras. As quais podem ser rederizadas nos pontos onde o mixin é chamado. A declaração e a chamada de uma function exige parênteses. Independente de ela não possuir argumentos. Mixins sem argumentos podem ser declarados e invocados sem parênteses
  94. 94. LET’S CODE!
  95. 95. FUNÇÕES NATIVAS - lighten Ilumina uma cor //Ilumina a cor preta em 10% lighten(#000, 10)//=>#1A1A1A A função lighten intensifica os três canais RGB igualmente
  96. 96. FUNÇÕES NATIVAS - darken Escurece uma cor //Escurece a cor azul em 20% darken(blue, 20)//=>#000099 A função darken reduz os três canais RGB igualmente
  97. 97. FUNÇÕES NATIVAS - grayscale Converte uma cor para a sua equivalente em escala de cinza grayscale(red)//=>#808080
  98. 98. FUNÇÕES NATIVAS - mix Mistura duas cores de acordo com um peso //Mistura as cores preto e branco mix(black, white)//=>#7F7F7F //Resulta em uma mistura com 10% de //preto e 90% de branco mix(black, white, 90)//=>#191919 Quanto mais alto o valor do peso, mais a cor passada como segundo parâmetro irá predominar na mistura.
  99. 99. FUNÇÕES NATIVAS - transparentize e opacify Torna uma cor transparente de acordo com um determinado percentual //Um azul 30% transparente, ou 70% opaco transparentize(blue, 0.3) A sua contrapartida é a função opacify $cor: transparentize(blue, 1) //Um azul 30% opaco, ou 70% transparente opacify($cor, 0.3)
  100. 100. FUNÇÕES NATIVAS - scale-color Cria uma nova cor com base em outra existente, ajustando cada canal //Aumenta os canais R e G em 10% e reduz o canal B em 20% scale-color(blue, $red: 10%, $green: 10%, $blue: -20%)//=>#1919CC http://goo.gl/F4BeyX
  101. 101. FUNÇÕES NATIVAS - if TERNÁRIO Função que age de forma semelhante ao if ternário em outras linguagens //Se $dark-layout for true, $cor //será #000 $cor: if($dark-layout, #000, #FFF); $cor2: if(10 > 5 and 4 <= 7, #000, #FFF);
  102. 102. FUNÇÕES NATIVAS - unquote Converte uma string quoted (com aspas) em uma string sem aspas $borda: “solid 1px #000”; a { border: unquote($borda); } // a { border: solid 1px #000; } A sua contrapartida é a função quote $carro: ferrari; a { content: quote($carro); } // a { content: “ferrari”; }
  103. 103. FUNÇÕES NATIVAS - nth Obtém um item de uma lista de acordo com sua posição $cor: nth(5px 5px 10px #FBD, 4);//#FBD Listas em Sass são 1-based
  104. 104. FUNÇÕES NATIVAS - length Retorna o tamanho de uma lista $margens: 10px 5px 15px 0; if(length($margens) > 0)... //length retorna 4
  105. 105. FUNÇÕES NATIVAS - index Retorna a posição de um item em uma lista $margens: 10px 5px 15px 0; index($margens, 5px) //index retorna 2
  106. 106. FUNÇÕES NATIVAS - unit Retorna a unidade de um valor numérico unit(10px)//=> “px” unit(120deg)//=> “deg” unit(800ms)//=> “ms”
  107. 107. FUNÇÕES NATIVAS - unitless Testa se um valor numérico possui unidade @mixin tamanho-texto($tamanho){ @if(unitless($tamanho)){ $tamanho: "#{$tamanho}px"; } font-size: unquote($tamanho); } h1{ @include tamanho-texto(30); }
  108. 108. COMPASS config.rb Retém todas as configurações do compass # sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder sass_path = File.dirname(__FILE__) output_path = File.expand_path(File.join(sass_path, '../CSS')) # css_path: the directory you want your CSS files to be. css_path = output_path # output_style = :expanded or :nested or :compact or :compressed output_style = :expanded http://goo.gl/JMm6Zh
  109. 109. ALT TAB... http://goo.gl/YmQSez
  110. 110. COMPASS STATISTICS Retorna estatísticas sobre um projeto compass $ compass stats
  111. 111. SEGUINDO EM FRENTE... Bourbon - http://bourbon.io Compass Recipes - http://compass-recipes.moox.fr Todas as funções do Sass - http://goo.gl/jdDkiE
  112. 112. DICAS ADICIONAIS... BEM – Block, Element, Modifier - http://goo.gl/QpBJFo Color Me - http://richbray.me/cms/usage/ Sassy Buttons - http://jaredhardy.com/sassy-buttons/ Normalize - http://goo.gl/kqpTv2

×