Sass & Compass: The future of stylesheets now.

At The Future of Web Design I presented Sass and Compass. These were my slides yo.

LInks here: https://gist.github.com/1344243

Transcript

2. Brandon Mathis
4. CSS 2.1 CSS 3
5. what they see › Speed › Works on my phone › Woah, 3D animation! › New Fonts › Browser competition
6. what we see what they see
7. what we see › Way more complexity, same old tools. › Selectors, properties and values. That's it? › No variables? › No math?
8. CSS is a declarative language made of selectors, properties, values and schemes for priority and inheritance, defining how styles apply.
10. .msg { padding: 24px; } .msg h3 { padding: 24px; margin: -24px -24px 0; } It looks like we're in trouble… Zounds! OK • Repetition causes maintenance challenges • Relationships are not clear • Reasons are trapped in the mind of the designer Problems
11. Dear W3C, We rely on advanced text editors, calculators, color pickers and widgets to make writing CSS bearable. Throw us a frickin' bone.
13. Sass extends CSS3 with variables, math, mixins & more. But at its core, Sass is a layer of empathy between the designer and the stylesheets.
14. gem install sass >>> Change detected to: /Users/imathis/ project/sass/screen.scss overwrite ./screen.css sass --watch screen.scss >>> Sass is watching for changes. Press Ctrl-C to stop. Setup Bash
15. article { margin-bottom: 2em; .entry-content { border-top: 1px solid #eee; } } SCSS - Sassy CSS (.scss)
16. article margin-bottom: 2em .entry-content border-top: 1px solid #eee Indented Sass (.sass)
17. Nesting SIMPLE & BRILLIANT
18. Nesting Rules article { border-top: 1px dashed #eee; header { margin-bottom: 1.5em; } } article { border-top: 1px dashed #eee; } article header { margin-bottom: 1.5em; } SCSS CSS
19. article { header, section { margin-bottom: 1.5em; } } Nesting Rules SCSS article header, article section { margin-bottom: 1.5em; } CSS
20. article > h2 { border-top:1px dashed #eee } article ~ article { padding-top: 1.5em } article + footer { margin-top: 0 } article * { color: #000 } article { > h2 { border-top: 1px dashed #eee } ~ article { padding-top: 1.5em } + footer { margin-top: 0 } * { color: #000 } } Nest Symbol Selectors SCSS CSS
21. a { color: blue; display: inline-block; line-height: 1.8em; } a:hover { color: red } a { color: blue; &:hover { color: red } display: inline-block; line-height: 1.8em; } & references a rule’s parent selectors. The Parent Selector SCSS CSS
22. article h1 { font-size: 2.4em } .blog-index article h1 { font-size: 2em } article { h1 { font-size: 2.4em } .blog-index & { h1 { font-size: 2em } } } & can add context to a selector. The Parent Selector SCSS CSS
23. button { background: linear-gradient(#444, #222); } .no-cssgradients button { background: #333 } button { background: linear-gradient(#444,#222); .no-cssgradients & { background: #333 } } The Parent Selector & loves working with Modernizr. SCSS CSS
24. #content { margin: 0 1.5em; } @media screen and (min-width: 1280px) { #content { margin: 0 1.5em; } } #content { margin: 0 1.5em; @media screen and (min-width: 1280px) { margin: 0 2.5em } } @media rules bubble up with context. @media bubbling SCSS CSS
25. Variables A LANGUAGE’S BREAD & BUTTER
26. Using Variables ›Colors, numbers, or text. ›Understands units ›$variable: value;
27. $link-color: blue; $link-hover: red; a { color: $link-color; &:hover { color: $link-hover; } } a { color: blue; } a:hover { color: red; } SCSS CSS
28. $msg-pad: 24px; .msg { padding:$msg-pad; h3 { padding:$msg-pad; margin:(-$msg-pad) (-$msg-pad) 0; }} It looks like we're in trouble… Zounds! OK • No unnecessary repetition, low maintenance • The variable makes relationships clear • The designer's reasoning is evident With Sass…
29. @extend THE BOMB DIGGITY OF STYLESHEET ABSTRACTION
30. <a class="button button-delete" href="..."> Delete </a> HTML .button { background: blue; color: white; padding:0.2em 0.8em; border-radius:0.4em; } .button-delete { background: red; } CSS
31. .button { background: blue; color: white; padding:0.2em 0.8em; border-radius:0.4em; } .button-delete { @extend .button; background: red; } SCSS Using @extend
32. .button, .button-delete { background: blue; color: white; padding:0.2em 0.8em; border-radius:0.4em; } .button-delete { background: red; } CSS .msg .button, .msg .button-delete { font-size: 1.8em; }
33. Mixins NOW WE’RE COOKIN’
34. @mixin hover-link { text-decoration: none; &:hover { text-decoration: underline; } } SCSS nav a { text-decoration: none; } nav a:hover { text-decoration: underline; } CSS nav a { @include hover-link; }
35. @mixin border-radius($amount) { border-radius: $amount; -webkit-border-radius: $amount; -moz-border-radius: $amount; } .msg { @include border-radius(5px); } SCSS .msg { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } CSS
36. Defaults and named arguments @mixin link-color($text:blue, $hover:red) { color: $text; &:hover { color: $hover; } } SCSS a { color: blue; } a:hover { green; } CSS a { @include link-colors($hover: green); }
37. THE RIGHT WAY Importing
38. _grid.scss _typor.scss _core.scss screen.scss screen.css Combine Sass with @import. /* screen.scss */ @import "core"; SCSS @import "typography", "grid";
39. You can also nest an @import. @media screen and (min-width: 320px) { @import 'phone'; } #account { @import 'pages/account'; } SCSS
40. Math ǔ Ǖǖ FINALLY
41. Math Operators Math operators (+, -, *, /, %) work with numbers SCSS 1em + 1em; // 2em 1em - 1em; // 0em 1in + 72pt; // 2in 6px * 4; // 24px 18 % 5; // 3
42. Division a special case SCSS font : 18px / 1.45em; // 18px/1.45em font : (20px / 5); // 4px font : 20px / 5 + 1; // 5px font : $base / 5; // 4px $size : 20px / 5; // 4px
43. SCSS $container : 960px; $main : 680px; $gutter : 30px; #sidebar { width: $container - $main - $gutter; } CSS #sidebar { width: 250px;}
44. Number Functions percentage(13/25) // 52% round(2.4) // 2 ceil(2.2) // 3 floor(2.6) // 2 abs(-24) // 24 SCSS
45. Loops Conditions & IS IT GETTING HOT IN HERE?
46. ›Logic Operators < > <= >= == != ›@if, @else, @else if ›and, or Conditionals
47. 1 < 20 // true 10 <= 20 // true 4 > 1 // true 4 >= 1 // true SCSS Relational operators (<, >, <=, >=) evaluate numbers 1 + 1 == 2 // true small != big // true #000 == black // true SCSS Comparison operators (==, !=) evaluate all data types
48. red == #f00 red == #ff0000 red == rgb(255, 0, 0) red == rgba(255, 0, 0, 1.0) red == hsl(0deg, 100%, 100%) red == hsla(0deg, 100%, 100%, 1) SCSS
49. Conditional theming $theme: ocean; div { @if $theme == dusty { background: #c6bba9; color: $color; } @else if $theme == ocean { background: blue; color: white; } } SCSS
50. The if function SCSS $main-bg: #000; .main { color: if($main-bg == black, #fff, #000); }
51. The @for loop SCSS @for $level from 0 to 5 { .tag-#{$level + 1} { font-size: .7em + ($level * .5em); } } CSS .tag-1 { font-size: 0.7em; } .tag-2 { font-size: 1.2em; } .tag-3 { font-size: 1.7em; } .tag-4 { font-size: 2.2em; } .tag-5 { font-size: 2.7em; }
52. The @while loop SCSS $level: 0; @while $level < 5 { .tag-#{$level + 1} { font-size: .7em + ($level * .5em); } $level: $level + 1; } CSS .tag-1 { font-size: 0.7em; } .tag-2 { font-size: 1.2em; } .tag-3 { font-size: 1.7em; } .tag-4 { font-size: 2.2em; } .tag-5 { font-size: 2.7em; }
53. The @each loop SCSS $animals: puma, crab, emu, duck; @each $animal in $animals { .#{$animal}-icon { background: url('/images/#{$animal}.png'); } } CSS .puma-icon { background: url('/images/puma.png'); } .crab-icon { background: url('/images/crab.png'); } .emu-icon { background: url('/images/emu.png'); } .duck-icon { background: url('/images/duck'); }
54. Color SORRY COLOR PICKER, I’VE MET SOMEONE …
55. The RGBA function a { color: rgba(blue, .75) } p { background: rgba(#ffa, .25) } SCSS a { color: rgba(255, 255, 170, 0.25) } p { background: rgba(255, 255, 170, 0.25) } CSS
56. Inspecting Colors $color: red; hue($color); // 0deg saturation($color); // 100% lightness($color); // 50% red($color); // 100 green($color); // 0 blue($color); // 0 alpha($color); // 100 SCSS
57. $darkbg: lightness($bg) < lightness(gray); button { color: if($darkbg, #fff, #000); } SCSS TEXT TEXT vs
58. Manipulating Colors mix(red, yellow, 30%) mix(red, yellow) invert(blue) complement(#6cf620) grayscale(yellow)
59. HSLA Manipulations adjust-hue(#77a7f9,90) adjust-hue(#77a7f9,-90) saturate(#9b8a60,50%) desaturate(#d9a621,50%) darken(#6cf620,30%) lighten(#2e7805,50%)
60. HSLA Manipulations fade-out(#fab, .5) fade-in(rgba(#fab,.5),.5)
61. lighten($bg, 8%); darken($bg, 8%); $bg: #ccc;
62. change-color change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]); SCSS set any property of a color
63. change-color change-color(#ba5637, $hue:60); change-color(#8e9cb3, $saturation:100); #19f65d #4288ff change-color(#6cf620, $green: 60, $blue: 100); #6C3C64
64. adjust-color adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]); SCSS Incrementally manipulate any property of a color
65. adjust-color(#d3fa7b, $hue:60, $lightness: -20%); adjust-color(#5f8fe3, $green:100, $alpha: -0.25); #19f65d rgba(95, 255, 227, 0.75);
66. scale-color scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]); SCSS fluidly scale any percentage based property of a color
67. scale-color(#adf609, $lightness:50%); adjust-color(#adf609, $lightness:50%); #d6fa84 white lightness 0% 50% 100% scale-color adjust-color
68. Custom Functions PUT A CHERRY ON TOP
69. @function pxem($px, $context: 16px) { @return ($px / $context) * 1em; } article h2 { font-size: pxem(45px); } SCSS article h2 { font-size: 2.813em; } CSS
70. @function text-contrast($bg, $light:#fff, $dark:#000){ $darkbg:lightness($bg) < lightness(gray); @return if($darkbg, $light, $dark); } SCSS button { @include easy-button(blue); } @mixin easy-button($bg){ color: text-contrast($bg); background: linear-gradient( lighten($bg, 8), darken($bg, 8)); }
72. ›Mixin library ›Sass functions ›Environmental awareness ›Extensions What we get?
73. Setup gem install compass compass create my_project Bash
74. Configuration http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" fonts_dir = "fonts" javascripts_dir = "javascripts" output_style = :compressed Ruby
75. Helper functions adjust-lightness, scale-lightness adjust-saturation, scale-saturation image-url image-height image-width inline-image font-url inline-font-files pi sin cos tan more... SCSS
76. SCSS CSS header { background: url('/images/hbg.png?1351…'); } h1 { width: image-width('logo.png'); height: image-height('logo.png'); header { background: image-url('hbg.png'); background: inline-image('logo.png') } } header h1 { width: 220px; height: 100px; background: url('data:image/png;base64... }
77. Compass mixins Element styles Links, Lists, Float, Tables, Text General utilities Browser Hacks, Clear!xes, Resets Design patterns Tag Cloud, Sticky footer, Vertical rhythm CSS3 appearance, background, gradients, background-clip background-origin, background-size, border-radius box, box-shadow,box-sizing, CSS3 PIE, columns, font-face, opacity, transform, transition, more...
78. Example with CSS3 Mixins .msg { @include background(linear-gradient(#fff, #eee)); @include border-radius(5px); } SCSS .msg { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #eeeeee)); background: -webkit-linear-gradient(#ffffff, #eeeeee); background: -moz-linear-gradient(#ffffff, #eeeeee); background: -ms-linear-gradient(#ffffff, #eeeeee); background: linear-gradient(#ffffff, #eeeeee); -moz-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } CSS
79. Pros: Cons: › Speed › Server load › Creating sprite maps › Writing the CSS › Maintenance Using Sprites
80. Compass magic sprites › Generates the sprite map › Generates the CSS › Easy to con!gure classes, spacing, etc › Add a new image? updates automatically
81. .social-sprite, .social-amazon, .social-app-store, .social-apple, .social-blogger, .social- delicious, .social-deviantart, .social-digg, .social-dribbble, .social-facebook, .social-flickr, .social- forrst, .social-google, .social-html5, .social-lastfm, .social-linkedin, .social-microsoft, .social- myspace, .social-paypal, .social-rss, .social-skype, .social-stumbleupon, .social-tumblr, .social- twitter, .social-twitter2, .social-vimeo, .social-wordpress, .social-yahoo, .social-youtube { background: url('../images/social-sfdebe26bed.png') no-repeat; } .social-amazon { background-position: 0 0; height: 32px; width: 32px; } .social-app-store { background-position: 0 -32px; height: 32px; width: 32px; } .social-apple { background-position: 0 -64px; height: 32px; width: 32px; } .social-blogger { background-position: 0 -96px; height: 32px; width: 32px; } .social-delicious { background-position: 0 -128px; height: 32px; width: 32px; } .social-deviantart { background-position: 0 -160px; height: 32px; width: 32px; } .social-digg { background-position: 0 -192px; height: 32px; width: 32px; } .social-dribbble { background-position: 0 -224px; height: 32px; width: 32px; } .social-facebook { background-position: 0 -256px; height: 32px; width: 32px; } .social-flickr { background-position: 0 -288px; height: 32px; width: 32px; } .social-forrst { background-position: 0 -320px; height: 32px; width: 32px; } .social-google { background-position: 0 -352px; height: 32px; width: 32px; } .social-html5 { background-position: 0 -384px; height: 32px; width: 32px; } .social-lastfm { background-position: 0 -416px; height: 32px; width: 32px; } .social-linkedin { background-position: 0 -448px; height: 32px; width: 32px; } .social-microsoft { background-position: 0 -480px; height: 32px; width: 32px; } .social-myspace { background-position: 0 -512px; height: 32px; width: 32px; } .social-paypal { background-position: 0 -544px; height: 32px; width: 32px; } .social-rss { background-position: 0 -576px; height: 32px; width: 32px; } .social-skype { background-position: 0 -608px; height: 32px; width: 32px; } .social-stumbleupon { background-position: 0 -640px; height: 32px; width: 32px; } .social-tumblr { background-position: 0 -672px; height: 32px; width: 32px; } .social-twitter { background-position: 0 -704px; height: 32px; width: 32px; } .social-twitter2 { background-position: 0 -736px; height: 32px; width: 32px; } .social-vimeo { background-position: 0 -768px; height: 32px; width: 32px; } .social-wordpress { background-position: 0 -800px; height: 32px; width: 32px; } .social-yahoo { background-position: 0 -832px; height: 32px; width: 32px; } .social-youtube { background-position: 0 -864px; height: 32px; width: 32px; } @import "social/*.png"; @include all-social-sprites($dimensions:true);
82. ›Easy to write and share ›Sass, Images, HTML, JS, Fonts, etc ›Zip or Ruby gems Extensions
83. › Fancy Buttons, Sassy Buttons - easy CSS3 buttons › Animate - CSS3 animation library › RGBApng - Generate alpha pngs from Sass › Compass Magick - Render CSS3 Gradients to png › Many more... Plugins & Extensions
84. umdf.org/compass
85. COLOR SHCEME CRACK THE ColorHacker
86. SCSS $key: #d3643b; $color-2: scale-color( adjust-hue($key, 26.673deg), $saturation: -74.296%, $lightness: 82%); $color-3: scale-color( adjust-hue($key, 69.2deg), $saturation: -52%, $lightness: 64.167%); @debug(hack-colors(#d3643b #edebe6 #d6e1c7)); Reverse engineering color
87. button { @include background(linear-gradient( $color-2 0%, $color-3 50%, $key 50%, $color-4 100%)); border: 1px solid $color-5; } Pick gradients button { background:linear-gradient(#588EE7 0%, #1A55B5 50%, #003895 50%, #0D4AAD 100%); border: 1px solid #001F53; } $button: #003895 #588EE7 #1A55B5 #0D4AAD #001F53; @debug(color-hack($button));
88. adjust-hue($key, 32deg); adjust-hue($key,-32deg); $scheme: #d3643b #edebe6 #d6e1c7 #94c7b6 #403b33; Tweak color schemes
89. j.mp/color-hacker `gem install color-hacker`
90. YOU’RE ALL LOVELY PEOPLE Thank You
91. twitter + github Brandon Mathis @imathis
92. Talk links: j.mp/imathis-fowd-links