Workshop Compass @ globo.com

Workshop sobre Sass/Compass apresentado na globo.com.

Transcript

1. sass +compass davi ferreira
2. sass + compass projeto base / links git clone git://github.com/daviferreira/html5 https://gist.github.com/1818034 http://speakerdeck.com/u/daviferreira/
3. sass + compass instalando gem install compass compass create <projeto> compass create . --sass-dir "sass" --css-dir "stylesheets" --javascripts-dir "javascripts" --images-dir "images" compass watch cp stylesheets/acme.css sass/acme.scss
4. sass + compass configurando project_type = :stand_alone css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts" http_path = "/" http_images_path = "/images" output_style = :compact config.rb
5. sass + compass sass ‣ torna a criação de css mais interessante ‣ scss vs. sass ‣ evita repetições ‣ possibilita a criação de funções e mixins ‣ sem impacto no produto final
6. sass + compass aninhamento #navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; a { font-weight: bold; } } } #navbar { width: 80%; height: 23px; } #navbar ul { list-style-type: none; } #navbar li { float: left; } #navbar li a { font-weight: bold; } .fakeshadow { border: { style: solid; left: { width: 4px; color: #888; } right: { width: 2px; color: #ccc; } } .fakeshadow { border-style: solid; border-left-width: 4px; border-left-color: #888; border-right-width: 2px; border-right-color: #ccc; }
7. sass + compass parents a { color: #4ca5fe; &:hover { color: #df0d32; } &:active { color: #999; } } a { color: #4ca5fe; } a:hover { color: #df0d32; } a:visited { color: #999; } p { line-height: 23px; li & { line-height: 18px; } article > & { line-height: 22px; } } p { line-height: 23px; } li p { line-height: 18px; } article > p { line-height: 22px; }
8. sass + compass @extend .error { border: 1px #f00; background: #fdd; } .error.intrusion { font-size: 1.3em; font-weight: bold; } .badError { @extend .error; border-width: 3px; } .error, .badError { border: 1px #f00; background: #fdd; } .error.intrusion, .badError.intrusion { font-size: 1.3em; font-weight: bold; } .badError { border-width: 3px; }
9. sass + compass exercício 1 ‣ aninhar o menu ‣ alterar declarações de links utilizando ‘&’
10. sass + compass exercício 1 solução a { color: #4ca5fe; text-decoration: none; &:hover { text-decoration: underline; } } #menu { border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; li { float: left; width: 80px; border-right: 1px dotted #ccc; text-align: center; padding: 10px; } }
11. sass + compass variáveis $main-color: #ce4dd6; $style: solid; #navbar { border-bottom: { color: $main-color; style: $style; } } a { color: $main-color; &:hover { border-bottom: $style 1px; } } #navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } a { color: #ce4dd6; } a:hover { border-bottom: solid 1px; }
12. sass + compass operações & funções #navbar { $navbar-width: 800px; $items: 5; $navbar-color: #ce4dd6; width: $navbar-width; border-bottom: 2px solid $navbar-color; li { float: left; width: $navbar-width/$items - 10px; background-color: lighten($navbar-color, 20%); &:hover { background-color: lighten($navbar-color, 10%); } } } #navbar { width: 800px; border-bottom: 2px solid #ce4dd6; } #navbar li { float: left; width: 150px; background-color: #e5a0e9; } #navbar li:hover { background-color: #d976e0; }
13. sass + compass cores a { color: rgba(blue, .75) } p { background: rgba(#ffa, .25) } hue($color) alpha($color) saturation($color) lightness($color) invert(blue) complement(#6cf620) mix(red, yellow) grayscale(red) darken(blue, 8%) lighten(blue, 8%)
14. sass + compass exercício 2 ‣ criar e utilizar uma variável para a cor de links (utilize o helper rgba) ‣ fazer com que o hover do link tenha ‘metade’ da sua cor original
15. sass + compass exercício 2 solução $cor_link: rgba(#4ca5fe, 1); a { color: $cor_link; text-decoration: none; &:hover { text-decoration: underline; color: $cor_link / 2; } }
16. sass + compass concatenação $side: top; $radius: 10px; .rounded-#{$side} { border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius; } .rounded-top { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; }
17. sass + compass condicionais p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } } p { border: 1px solid; } $programa: caldeirao; p { @if $programa == caldeirao { color: blue; } @else if $programa == faustao { color: red; } @else if $programa == maisvoce { color: green; } @else { color: black; } } $bg: #333; $darkbg: lightness($bg) < lightness(gray); button { color: if($darkbg, #fff, #000); } p { color: green; } button { color: #fff; }
18. sass + compass loops @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } @each $programa in caldeirao, faustao, maisvoce, jo { .#{$programa}-icon { background-image: url('/images/#{$programa}.png'); } } .caldeirao-icon { background-image: url('/images/caldeirao'); } .faustao-icon { background-image: url('/images/faustao.png'); } .maisvoce-icon { background-image: url('/images/maisvoce.png'); } .jo-icon { background-image: url('/images/jo.png'); } $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } .item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; }
19. sass + compass exercício 3 ‣ criar uma variável seção com o valor blog ‣ estabelecer a seguinte condição: se seção igual a blog, o background deve ser #fff, caso contrário o background é #000 ‣ definir um loop para criar os estilos sidebar-1, sidebar-2 e sidebar-3 - estes estilos devem possuir um font-size de 0.5px multiplicado por seu índice
20. sass + compass exercício 3 solução $secao: blog; body { font-family: 'Helvetica Neue', Helvetica, arial, sans-serif; font-size: 14px; @if $secao == blog { background-color: #fff; } @else { background-color: #000; } } $i: 1; @while $i <= 3 { .sidebar-#{$i} { font-size: 0.5px * $i; } $i: $i + 1 }
21. sass + compass mixins @mixin rounded-top { $side: top; $radius: 10px; border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius; } #navbar li { @include rounded-top; } #footer { @include rounded-top; } #navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } #footer { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; }
22. sass + compass argumentos @mixin rounded($side, $radius: 10px) { border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius; } #navbar li { @include rounded(top); } #footer { @include rounded(top, 5px); } #sidebar { @include rounded(left, 8px); } #navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } #footer { border-top-radius: 5px; -moz-border-radius-top: 5px; -webkit-border-top-radius: 5px; } #sidebar { border-left-radius: 8px; -moz-border-radius-left: 8px; -webkit-border-left-radius: 8px; }
23. sass + compass funções personalizadas @function calc-percent($target, $container) { return ($target / $container) * 100%; } .my-module { width: calc-percent(650px, 1000px); } .my-module { width: 65%; }
24. sass + compass exercício 4 ‣ converter o text-shadow do exercício de css para mixin com os seguintes parâmetros default: cor: #ccc offset x: 4px offset y: 4px blur: 3px
25. sass + compass exercício 4 solução @mixin text-shadow($x: 4px, $y: 4px, $blur: 3px, $color: #ccc) { -webkit-text-shadow: $x $y $blur $color; -moz-text-shadow: $x $y $blur $color; text-shadow: $x $y $blur $color; } h1, h2{ @include text-shadow(); }
26. sass + compass @import @mixin rounded($side, $radius: 10px) { border-#{$side}-radius: $radius; -moz-border-radius-#{$side}: $radius; -webkit-border-#{$side}-radius: $radius; } @import "rounded"; #navbar li { @include rounded(top); } #footer { @include rounded(top, 5px); } #sidebar { @include rounded(left, 8px); } #navbar li { border-top-radius: 10px; -moz-border-radius-top: 10px; -webkit-border-top-radius: 10px; } #footer { border-top-radius: 5px; -moz-border-radius-top: 5px; -webkit-border-top-radius: 5px; } #sidebar { border-left-radius: 8px; -moz-border-radius-left: 8px; -webkit-border-left-radius: 8px; }
27. sass + compass @media .sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } @media screen { .sidebar { @media (orientation: landscape) { width: 500px; } } } @media screen and (orientation: landscape) { .sidebar { width: 500px; } } .sidebar { width: 300px; } @media screen and (orientation: landscape) { width: 500px; } }
28. sass + compass exercício 5 ‣ converter a chamada de media query do exercício de css para sass, aninhando seus estilos e adicionando o parâmetro ‘screen’ ‣ separar e utilizar o import no mixin text- shadow do exercício anterior
29. sass + compass exercício 5 solução @mixin text-shadow($x: 4px, $y: 4px, $blur: 3px, $color: #ccc) { -webkit-text-shadow: $x $y $blur $color; -moz-text-shadow: $x $y $blur $color; text-shadow: $x $y $blur $color; } @media screen { @media (max-width:640px) { article { p { font-size: 18px; } img { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); } } } } @import "text-shadow"; h1, h2{ @include text-shadow(); } text-shadow.scss acme.scss
30. sass + compass compass ‣ É um framework baseado no Sass ‣ Incorpora helpers e utilitários para css3, sprites, entre outros
31. sass + compass helpers $logo = "logo.png"; h1 { width: image-width($logo); height: image-height($logo); background: image-url($logo); } .example { #{elements-of-type(block)} { border: 1px solid #777777; margin: 1em 3em; } #{elements-of-type(inline)} { color: #cc0000; } } .example address, .example article, .example aside, .example blockquote, .example center, .example dir, .example div, .example dd, .example details, .example dl, .example dt, .example fieldset, .example figcaption, .example figure, .example form, .example footer, .example frameset, .example h1, .example h2, .example h3, .example h4, .example h5, .example h6, .example hr, .example header, .example hgroup, .example isindex, .example menu, .example nav, .example noframes, .example noscript, .example ol, .example p, .example pre, .example section, .example summary, .example ul { border: 1px solid #777777; margin: 1em 3em; } .example a, .example abbr, .example acronym, .example audio, .example b, .example basefont, .example bdo, .example big, .example br, .example canvas, .example cite, .example code, .example command, .example datalist, .example dfn, .example em, .example embed, .example font, .example i, .example img, .example input, .example keygen, .example kbd, .example label, .example mark, .example meter, .example output, .example progress, .example q, .example rp, .example rt, .example ruby, .example s, .example samp, .example select, .example small, .example span, .example strike, .example strong, .example sub, .example sup, .example textarea, .example time, .example tt, .example u, .example var, .example video, .example wbr { color: #cc0000; }
32. sass + compass css3 @import "compass/css3/border-radius" $default-border-radius: 5px; .simple { @include border-radius(4px, 4px); } .compound { @include border-radius(2px 5px, 3px 6px); } .crazy { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px); } .simple { -webkit-border-radius: 4px 4px; -moz-border-radius: 4px / 4px; -o-border-radius: 4px / 4px; -ms-border-radius: 4px / 4px; -khtml-border-radius: 4px / 4px; border-radius: 4px / 4px; } .compound { -webkit-border-radius: 2px 3px; -moz-border-radius: 2px 5px / 3px 6px; -o-border-radius: 2px 5px / 3px 6px; -ms-border-radius: 2px 5px / 3px 6px; -khtml-border-radius: 2px 5px / 3px 6px; border-radius: 2px 5px / 3px 6px; } .crazy { -webkit-border-radius: 1px 2px; -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; -o-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; -ms-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; -khtml-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
33. sass + compass css3 .sombra { @include box-shadow(#333, 0px, 3px, 10px); } .transparente { @include opacity(0.8); // 80% } .degrade { @include background(image-url("bg.png"), linear-gradient(top left, #333, #0c0), radial-gradient(#c00, #fff 100px)); }
34. sass + compass sprites @import "icon/*.png"; @include all-icon-sprites; .icon-sprite, .icon-delete, .icon-edit, .icon-new, .icon-save { background: url('/images/icon-s34fe0604ab.png') no-repeat; } .icon-delete { background-position: 0 0; } .icon-edit { background-position: 0 -32px; } .icon-new { background-position: 0 -64px; } .icon-save { background-position: 0 -96px; } o nome do mixin é baseado no nome do diretório: all-<diretorio>-sprites
35. sass + compass sprites @import "selectors/*.png"; a { @include selectors-sprite(botao) } selectors/botao.png selectors/botao_hover.png selectors/botao_active.png selectors/botao_target.png .selectors-sprite, a { background: url('/selectors-sedfef809e2.png') no-repeat; } a { background-position: 0 0; } a:hover, a.botao_hover, a.botao-hover { background-position: 0 -20px; } a:target, a.botao_target, a.botao-target { background-position: 0 -30px; } a:active, a.botao_active, a.botao-active { background-position: 0 -10px; }
36. sass + compass sprites @import "icon/*.png"; .actions { .new { @include icon-sprite(new); } .edit { @include icon-sprite(edit); } .save { @include icon-sprite(save); } .delete { @include icon-sprite(delete); } } .icon-sprite, .actions .new, .actions .edit, .actions .save, .actions .delete { background: url('/images/icon-s34fe0604ab.png') no-repeat; } .actions .new { background-position: 0 -64px; } .actions .edit { background-position: 0 -32px; } .actions .save { background-position: 0 -96px; } .actions .delete { background-position: 0 0; }
37. sass + compass exercício 6 ‣ utilizar o helper text-shadow ao invés do mixin criado anteriormente, adicionando uma sombra com a cor de link definida em nossa variável e: 1px de offset x, 1px de offset y, 0 de blur ‣ criar, via compass, os sprites presentes na pasta images/icons
38. sass + compass exercício 6 solução @import "compass/css3"; h1, h2{ @include text-shadow($cor_link 1px 1px 0); } @import "icons/*.png"; @include all-icons-sprites;
39. sass + compass retrospectiva ‣ sass != compass ‣ css dinâmico com varáveis, mixins, funções, operações, condicionais e loops ‣ evita repetição de código, permite maior flexibilidade ‣ só depende dos desenvolvedores ‣ “muita coisa pronta”
40. sass + compass fim