Sass+Compass OU: Por que CSS
puro nunca mais?!?
Olá!
twitter.com/alcidesqueiroz
github.com/alcidesqueiroz
is.gd/aqanso
is.gd/sideshowjs
alcidesqueiroz@gmail.com
HTML
(Conteúdo + Estilo)
www.cnn.com/US/OJ/
HTML
(Conteúdo)
CSS
(Estilo)
CSS 3
• Animations e Transitions
• Gradientes
• Box Sizing
• Border Images
• Media queries
• Backgrounds múltiplos
• CSS C...
Pré-processadores
No turning back!
HTML
(Conteúdo)
CSS
(Estilo)
Sass
Let’s play together!
sassmeister.com
Problema #1
header{
width: 100%;
background-color: #555;
}
header h1{
color: #FFF;
}
header > ul li{
color: #DDD;
}
header...
This is not DRY!
Seletores Aninhados
header{
width: 100%;
background-color: #555;
h1{
color: #FFF;
}
> ul li{
color: #DDD;
}
nav a{
color: #AAF;
&:hover{
color...
Problema #2
aside{
background-color: #00B060;
}
em{
color: #FF4500;
}
Problema #2
ul img{
/*...*/
opacity: 0.7;
/*...*/
}
.modal-mask{
/*...*/
opacity: 0.7;
/*...*/
}
Variáveis
$base-color: #00B060;
$first-standout-color: #FF4500;
aside{
background-color: $base-color;
}
em{
color: $first-...
Variáveis
$default-opacity: 0.7;
ul img{
/*...*/
opacity: $default-opacity;
/*...*/
}
.modal-mask{
/*...*/
opacity: $defau...
Variáveis
$dotted-border: dotted 1px #DDD;
$fastest-transition-duration: 150ms;
$default-border-radius: 3px;
$site-body-fo...
E quanto às variáveis
do CSS?!?!
Variáveis nativas do CSS
html {
var-base-color: #333;
}
body {
background-color: var(base-color);
}
Problema #3
.profile{
border-width: 0;
border-left: solid 1px #AAF;
border-right: dashed 4px #000;
}
Propriedades Aninhadas
.profile{
border: {
width: 0;
left: solid 1px #AAF;
right: dashed 4px #000;
}
}
Problema #4
.profile{
border: solid 2px #222;
overflow: hidden;
color: #D22;
display: inline-block;
background-color: #FFF...
O que tem de errado?
• Código repetitivo
• Manutenibilidade
• CSS maior => maior load-time
Problema #4 V2
.profile,
.corporative-profile {
border: solid 2px #222;
overflow: hidden;
color: #D22;
display: inline-blo...
O que tem de errado?
• Manutenibilidade: para caçar de quem um
determinado seletor herda
• Manutenibilidade - parte 2: Os ...
Problema #4 V3 (CSS+HTML)
.profile{
border: solid 2px #222;
overflow: hidden;
color: #D22;
display: inline-block;
backgrou...
O que tem de errado?
• Não há clara relação de extensão no código CSS
• Uma certa transferência de lógica de estilização
p...
Herança
.profile{
border: solid 2px #222;
overflow: hidden;
color: #D22;
display: inline-block;
background-color: #FFF;
}
...
Herança Múltipla
.detalhes{
border: dashed 3px #000;
}
.tile{
background-color: #2D2;
}
.ficha{
@extend .detalhes;
@extend...
Herança Múltipla
.detalhes{
border: dashed 3px #000;
}
.tile{
background-color: #2D2;
}
.ficha{
@extend .detalhes, .tile;
...
Herança - Placeholder
Selectors
%teste{
color: blue;
}
.teste2{
@extend %teste;
font-weight: normal;
}
.teste3{
@extend %t...
Problema #5
body {
font-size: 14px;
font-size: 1.4rem;
}
h1 {
font-size: 24px;
font-size: 2.4rem;
}
h2 {
font-size: 18px;
...
Problema #5
::-webkit-input-placeholder {
color: #AAD;
}
::-moz-placeholder {
color: #AAD;
}
:-ms-input-placeholder {
colo...
Mixins
@mixin rem-font-size($sizeValue) {
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
}
body{
@include...
Mixins
@mixin placeholder-color ($color){
@include placeholder{
color: $color;
}
}
@mixin placeholder($selector: ''){
#{$s...
Mixins
@include placeholder-color(#AAF);
Mixins – outros exemplos
@mixin prefixify($property, $value){
-webkit-#{$property}: $value;
-moz-#{$property}: $value;
-o-...
Mixins – outros exemplos
@mixin absolute-full-size($spacement: 0){
position: absolute;
top: $spacement;
bottom: $spacement...
Mixins – outros exemplos
@mixin icon-font-size($size){
&:before{
font-size: $size;
}
}
Mixins – outros exemplos
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@c...
Cálculos
article[role='main']{
width: 600px / 960px * 100%; //62.5%
}
aside[role="complimentary"] {
width: 300px / 960px *...
Functions
$content-width: 960px;
@function proportion($of, $relatedTo: $content-width){
@return $of / $relatedTo * 100%;
}...
Functions
$tile-side: 80px;
$tile-spacement: 5px;
@function tile-dimension($tiles-qty: 1){
@return $tiles-qty * $tile-side...
Problema #6
www.riobranco.ac.gov.br/
@imports Pré-processados
@import 'normalize-3.0.1';
@import 'compass-dependencies';
@import 'variables/all';
@import 'mixi...
Exemplo real
//theme-modern-ui-classic.scss
@import 'theme-common-before';
@import 'themes/modern-ui-classic';
@import 'th...
//_modern-ui-classic.scss
//Theme: Classic
//Base colors
$base-color: #2A75AE !default;
$neutral-color: #899CAB !default;
...
//_theme-imports.scss
@import '../variables/all';
@import '../compass-dependencies';
@import '../mixins';
@import '../font...
E no fim das contas…
<link rel="stylesheet" href="stylesheets/main.css">
Manipulando cores
$base-color: #374676;
footer a{
color: lighten($base-color, 50); //#475b99
background: darken($base-colo...
Manipulando cores
$base-color: #374676;
$base-color-light: lighten($base-color, 50);
$base-color-dark: darken($base-color,...
Manipulando cores
color: red + blue; //magenta
color: $base-color * 0.5; //#1b233b
color: $base-color * 2; //#6e8cec
color...
Manipulando cores
color: grayscale($base-color);//#575757
//10% preto, 90% branco
color: mix(black, white, 90); //#191919
...
@if, @else, @else if
$inverse-color: true;
.introduction{
background-color: $base-color;
@if $inverse-color{
color: #FFF;
...
@if, @else, @else if
@if $width == 'auto' {
//...
} @else if $width == 1 {
//...
} @else {
display: inline-block;
width: $...
@for
@for $i from 1 through 4 {
.nivel-#{$i} {
font-size: 20px + (12px / $i);
}
}
//.nivel-1 { font-size: 32px; }
//.nivel...
@while
$i: 1;
@while $i <= 5 {
.nivel-#{$i} { text-indent: 1cm * $i; }
$i: $i + 1;
}
.nivel-1 { text-indent: 1cm; }
.nivel...
@each
@each $carro in chevette, opala, kadett {
.detalhes-#{$carro} {
background-image: url('/images/#{$carro}.png');
}
}
...
Inline comments for the win!
/*Por que isso?*/
//Por que não isso?
E o Compass?!?
Que tal substituir isso?
-webkit-transition: width 300ms ease;
-moz-transition: width 300ms ease;
-o-transition: width 300...
Por isso?
@include transition(width 300ms ease);
Ou que tal fazer isso:
background-image: inline-image('smile.gif');
E obter isso:
h1 {
background-image: url('data:image/gif;base
64,R0lGODlhDwAPAKIHACcFAP/xAP/lAP/YA//JAv//AA
AAAP///yH5BAEA...
Compass is freaking awesome!
• Modular e Configurável
• CSS3 (Esqueça vendor-prefixes)
• CSS Reset
• Sprite Generator
• Ri...
Rails, .NET, PHP, etc.
E a curva de
aprendizado?
OOCSS, ACSS,
SMACSS, BEM?!?
No problem!
Sass is CSS!
#somosTodosMacacosDeCodigo
#somosTodosDevs
twitter.com/alcidesqueiroz
github.com/alcidesqueiroz
is.gd/aqanso
is.gd/sideshowjs
alcidesqueiroz@gmail.com
Perguntas?
Sass+Compass, OU: Por que CSS puro nunca mais?!?
Sass+Compass, OU: Por que CSS puro nunca mais?!?
Sass+Compass, OU: Por que CSS puro nunca mais?!?
Sass+Compass, OU: Por que CSS puro nunca mais?!?
Upcoming SlideShare
Loading in …5
×

Sass+Compass, OU: Por que CSS puro nunca mais?!?

1,267 views

Published on

Slides de minha palestra sobre Sass+Compass, onde abordo as vantagens do uso dessa dupla em vez de CSS puro.

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

No Downloads
Views
Total views
1,267
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Sass+Compass, OU: Por que CSS puro nunca mais?!?

  1. 1. Sass+Compass OU: Por que CSS puro nunca mais?!?
  2. 2. Olá!
  3. 3. twitter.com/alcidesqueiroz github.com/alcidesqueiroz is.gd/aqanso is.gd/sideshowjs alcidesqueiroz@gmail.com
  4. 4. HTML (Conteúdo + Estilo)
  5. 5. www.cnn.com/US/OJ/
  6. 6. HTML (Conteúdo) CSS (Estilo)
  7. 7. CSS 3 • Animations e Transitions • Gradientes • Box Sizing • Border Images • Media queries • Backgrounds múltiplos • CSS Columns • 3D Transforms • Box-shadow entre outros recursos...
  8. 8. Pré-processadores
  9. 9. No turning back!
  10. 10. HTML (Conteúdo) CSS (Estilo) Sass
  11. 11. Let’s play together! sassmeister.com
  12. 12. Problema #1 header{ width: 100%; background-color: #555; } header h1{ color: #FFF; } header > ul li{ color: #DDD; } header nav a{ color: #AAF; } header nav a:hover{ color: #FFF; }
  13. 13. This is not DRY!
  14. 14. Seletores Aninhados
  15. 15. header{ width: 100%; background-color: #555; h1{ color: #FFF; } > ul li{ color: #DDD; } nav a{ color: #AAF; &:hover{ color: #FFF; } } }
  16. 16. Problema #2 aside{ background-color: #00B060; } em{ color: #FF4500; }
  17. 17. Problema #2 ul img{ /*...*/ opacity: 0.7; /*...*/ } .modal-mask{ /*...*/ opacity: 0.7; /*...*/ }
  18. 18. Variáveis $base-color: #00B060; $first-standout-color: #FF4500; aside{ background-color: $base-color; } em{ color: $first-standout-color; }
  19. 19. Variáveis $default-opacity: 0.7; ul img{ /*...*/ opacity: $default-opacity; /*...*/ } .modal-mask{ /*...*/ opacity: $default-opacity; /*...*/ }
  20. 20. Variáveis $dotted-border: dotted 1px #DDD; $fastest-transition-duration: 150ms; $default-border-radius: 3px; $site-body-font-size: 1.4; $title-font-family: 'Paytone One'; $default-label-separator: ':';
  21. 21. E quanto às variáveis do CSS?!?!
  22. 22. Variáveis nativas do CSS html { var-base-color: #333; } body { background-color: var(base-color); }
  23. 23. Problema #3 .profile{ border-width: 0; border-left: solid 1px #AAF; border-right: dashed 4px #000; }
  24. 24. Propriedades Aninhadas .profile{ border: { width: 0; left: solid 1px #AAF; right: dashed 4px #000; } }
  25. 25. Problema #4 .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; }
  26. 26. O que tem de errado? • Código repetitivo • Manutenibilidade • CSS maior => maior load-time
  27. 27. Problema #4 V2 .profile, .corporative-profile { border: solid 2px #222; overflow: hidden; color: #D22; display: inline-block; background-color: #FFF; } .corporative-profile { background-color: #DD2; }
  28. 28. O que tem de errado? • 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.
  29. 29. Problema #4 V3 (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>
  30. 30. O que tem de errado? • 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
  31. 31. Herança .profile{ border: solid 2px #222; overflow: hidden; color: #D22; display: inline-block; background-color: #FFF; } .corporative-profile{ @extend .profile; background-color: #DD2; }
  32. 32. Herança Múltipla .detalhes{ border: dashed 3px #000; } .tile{ background-color: #2D2; } .ficha{ @extend .detalhes; @extend .tile; color: #FFF; }
  33. 33. Herança Múltipla .detalhes{ border: dashed 3px #000; } .tile{ background-color: #2D2; } .ficha{ @extend .detalhes, .tile; color: #FFF; }
  34. 34. Herança - Placeholder Selectors %teste{ color: blue; } .teste2{ @extend %teste; font-weight: normal; } .teste3{ @extend %teste; font-weight: bold; }
  35. 35. Problema #5 body { font-size: 14px; font-size: 1.4rem; } h1 { font-size: 24px; font-size: 2.4rem; } h2 { font-size: 18px; font-size: 1.8rem; }
  36. 36. Problema #5 ::-webkit-input-placeholder { color: #AAD; } ::-moz-placeholder { color: #AAD; } :-ms-input-placeholder { color: #AAD; } input:-moz-placeholder { color: #AAD; }
  37. 37. Mixins @mixin rem-font-size($sizeValue) { font-size: ($sizeValue * 10) + px; font-size: $sizeValue + rem; } body{ @include rem-font-size(1.4); } h1{ @include rem-font-size(2.4); } h2{ @include rem-font-size(1.8); }
  38. 38. Mixins @mixin placeholder-color ($color){ @include placeholder{ color: $color; } } @mixin placeholder($selector: ''){ #{$selector}::-webkit-input-placeholder { @content; } #{$selector}::-moz-placeholder { @content; } #{$selector}:-ms-input-placeholder { @content; } @if $selector == ""{ $selector: 'input'; } #{$selector}:-moz-placeholder { @content; } }
  39. 39. Mixins @include placeholder-color(#AAF);
  40. 40. Mixins – outros exemplos @mixin prefixify($property, $value){ -webkit-#{$property}: $value; -moz-#{$property}: $value; -o-#{$property}: $value; #{$property}: $value; }
  41. 41. Mixins – outros exemplos @mixin absolute-full-size($spacement: 0){ position: absolute; top: $spacement; bottom: $spacement; left: $spacement; right: $spacement; }
  42. 42. Mixins – outros exemplos @mixin icon-font-size($size){ &:before{ font-size: $size; } }
  43. 43. Mixins – outros exemplos @mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @-ms-keyframes #{$name} { @content; } @keyframes #{$name} { @content; } }
  44. 44. Cálculos article[role='main']{ width: 600px / 960px * 100%; //62.5% } aside[role="complimentary"] { width: 300px / 960px * 100%;//31.25% }
  45. 45. Functions $content-width: 960px; @function proportion($of, $relatedTo: $content-width){ @return $of / $relatedTo * 100%; } aside[role="complimentary"] { width: proportion(300px);//31,25% }
  46. 46. Functions $tile-side: 80px; $tile-spacement: 5px; @function tile-dimension($tiles-qty: 1){ @return $tiles-qty * $tile-side + ($tiles-qty - 1) * $tile-spacement; } @mixin tile($horizontal: 1, $vertical: 1){ width: tile-dimension($horizontal); height: tile-dimension($vertical); }
  47. 47. Problema #6
  48. 48. www.riobranco.ac.gov.br/
  49. 49. @imports Pré-processados @import 'normalize-3.0.1'; @import 'compass-dependencies'; @import 'variables/all'; @import 'mixins/all'; @import 'font-face'; @import 'icon-fonts/all'; @import 'layout';
  50. 50. Exemplo real //theme-modern-ui-classic.scss @import 'theme-common-before'; @import 'themes/modern-ui-classic'; @import 'theme-common-after';
  51. 51. //_modern-ui-classic.scss //Theme: Classic //Base colors $base-color: #2A75AE !default; $neutral-color: #899CAB !default; //Secondary colors $first-standout-color: #DA4435 !default; $second-standout-color: #38CE8F !default; //Theme Common Imports @import 'theme-imports.scss';
  52. 52. //_theme-imports.scss @import '../variables/all'; @import '../compass-dependencies'; @import '../mixins'; @import '../font-face'; @import '../icon-fonts/all'; @import '../components/all'; @import '../layout'; @import '../button-icons';
  53. 53. E no fim das contas… <link rel="stylesheet" href="stylesheets/main.css">
  54. 54. Manipulando cores $base-color: #374676; footer a{ color: lighten($base-color, 50); //#475b99 background: darken($base-color, 20); //#171d30 }
  55. 55. Manipulando cores $base-color: #374676; $base-color-light: lighten($base-color, 50); $base-color-dark: darken($base-color, 20); footer a{ color: $base-color-light; background: $base-color-dark; }
  56. 56. Manipulando cores color: red + blue; //magenta color: $base-color * 0.5; //#1b233b color: $base-color * 2; //#6e8cec color: $base-color / 10; //#05070b color: $base-color - #333; //#041343
  57. 57. Manipulando cores color: grayscale($base-color);//#575757 //10% preto, 90% branco color: mix(black, white, 90); //#191919 color: transparentize(blue, 0.3); //#6e8cec //Aumenta os canais R e G em 10% e reduz o canal B em 20% color: scale-color(blue, $red: 10%, $green: 10%, $blue: -20%)//=>#1919CC
  58. 58. @if, @else, @else if $inverse-color: true; .introduction{ background-color: $base-color; @if $inverse-color{ color: #FFF; } }
  59. 59. @if, @else, @else if @if $width == 'auto' { //... } @else if $width == 1 { //... } @else { display: inline-block; width: $width; }
  60. 60. @for @for $i from 1 through 4 { .nivel-#{$i} { font-size: 20px + (12px / $i); } } //.nivel-1 { font-size: 32px; } //.nivel-2 { font-size: 26px; } //.nivel-3 { font-size: 24px; } //.nivel-4 { font-size: 23px; }
  61. 61. @while $i: 1; @while $i <= 5 { .nivel-#{$i} { text-indent: 1cm * $i; } $i: $i + 1; } .nivel-1 { text-indent: 1cm; } .nivel-2 { text-indent: 2cm; } .nivel-3 { text-indent: 3cm; } .nivel-4 { text-indent: 4cm; } .nivel-5 { text-indent: 5cm; }
  62. 62. @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");}
  63. 63. Inline comments for the win! /*Por que isso?*/ //Por que não isso?
  64. 64. E o Compass?!?
  65. 65. Que tal substituir isso? -webkit-transition: width 300ms ease; -moz-transition: width 300ms ease; -o-transition: width 300ms ease; transition: width 300ms ease;
  66. 66. Por isso? @include transition(width 300ms ease);
  67. 67. Ou que tal fazer isso: background-image: inline-image('smile.gif');
  68. 68. E obter isso: h1 { background-image: url('data:image/gif;base 64,R0lGODlhDwAPAKIHACcFAP/xAP/lAP/YA//JAv//AA AAAP///yH5BAEAAAcALAAAAAAPAA8AAANOeKrWvfC0Eoo gD5paSxkEthheWQ6gwXRT0aSS2TZCupl4jZG4KVy0Cq8k ANgIA8HQUoQZkMrfz1BTSaBKAIAKYyBR4JB19AyJxxFHZ pEAADs='); }
  69. 69. Compass is freaking awesome! • Modular e Configurável • CSS3 (Esqueça vendor-prefixes) • CSS Reset • Sprite Generator • Ritmo vertical • Clearfix • compass stats • e muito +
  70. 70. Rails, .NET, PHP, etc.
  71. 71. E a curva de aprendizado?
  72. 72. OOCSS, ACSS, SMACSS, BEM?!? No problem!
  73. 73. Sass is CSS!
  74. 74. #somosTodosMacacosDeCodigo #somosTodosDevs
  75. 75. twitter.com/alcidesqueiroz github.com/alcidesqueiroz is.gd/aqanso is.gd/sideshowjs alcidesqueiroz@gmail.com
  76. 76. Perguntas?

×