Sass & Compass: Never Write Regular CSS Again

It's time to find out about the hype behind SASS and Compass. Don't write plain old boring CSS when you can be using mixins, variables, and automatically-generated sprites.

Transcript

1. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. SASS & COMPASS: NEVER WRITE REGULAR CSS AGAIN by Trevor Davis at RefreshDC on July , 
2. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. @trevor_davis HI! I’M I work as a Front-End Developer at Viget. TREVOR DAVIS
3. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. I. What are Sass & Compass II. How to install III. How to get started IV. Sass Syntax V. Compass Features WHAT WE WILL COVER
4. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. A QUICK MESSAGE ABOUT OTHER CSS “GENERATORS”
5. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. I WAS INITIALLY VERY OPPOSED TO SASS
6. arrestedstills.tumblr.com CREDITS I’VE MADE A HUGE MISTAKE.
7. WHAT ARE SASS & COMPASS
8. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Ruby gems ‎ Sass is a CSS preprocessor ‎ Compass is a framework that uses Sass ‎ Generates regular CSS files WHAT ARE SASS & COMPASS
9. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. HOW DO THEY WORK
10. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ "Watch" for changes to a file or folder ‎ If anything changes, regenerates new CSS file(s) HOW DO THEY WORK
11. HOW TO INSTALL
12. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ As long as your system has Ruby installed, very simple: gem install sass gem install compass HOW TO INSTALL
13. HOW TO GET STARTED
14. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Almost no reason to not use Sass on every project that requires CSS. ‎ Almost no reason to use Sass and not Compass. Compass adds additional functionality without any downside. ‎ Rails project vs non-rails project HOW TO GET STARTED
15. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. STANDALONE PROJECTS
16. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ compass create <myproject> ‎ Creates all the files and folders you need ‎ config.rb ‎ sass ‎ stylesheets STANDALONE PROJECTS
17. # config.rb http_path = "/" css_dir = "stylesheets/" sass_dir = "compile/sass" images_dir = "images/" © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
18. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Create a sass or scss file in your sass_dir. ‎ compass watch on the command line ‎ Add CSS to this file, and it will auto generate a CSS file in your css_dir STANDALONE PROJECTS
19. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. LIVERELOAD
20. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. CODEKIT
21. SASS SYNTAX
22. Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
23. The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.
24. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. NESTING
25. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ I used to hate nesting, but I have learned to really love it. ‎ It's not something you HAVE to use. ‎ Be careful that you don't go too far because the code can get sloppy and hard to read. NESTING
26. .nav  background: #000; li  float: left;  a  color: #fff;   © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
27. .nav { background: #000; } .nav li { float: left; } .nav a { color: #fff; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
28. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. WITH GREAT POWER COMES GREAT RESPONSIBILITY.
29. .nav { ul { li { a { span { color: #fff } } } } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
30. .nav ul li a span { color: white; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
31. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. PARENT REFERENCES
32. a { color: red; &:hover { color: blue; text-decoration: underline; } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
33. a { color: red; } a:hover { color: blue; text-decoration: underline; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
34. img { display: block; .lte7 & { -ms-interpolation-mode: bicubic; } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
35. img { display: block; } .lte7 img { -ms-interpolation-mode: bicubic; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
36. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. VARIABLES
37. $linkColor: #ce4dd6; a { color: $linkColor; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
38. a { color: #ce4dd6; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
39. $side: top; .bordered-#{$side} { border-#{$side}: 1px solid green; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
40. .bordered-top { border-top: 1px solid green; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
41. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. OPERATIONS
42. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ The standard math operations (+, -, *, /, and %) are supported for numbers, even those with units. ‎ For colors, there are all sorts of useful functions for changing the lightness, hue, saturation, and more. OPERATIONS
43. $col: 100px; .main { width: $col * 6; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
44. .main { width: 600px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
45. .box { background: rgba(#000, 0.5); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
46. .box { background: rgba(0, 0, 0, 0.5); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
47. a { color: #000; &:hover { color: lighten(#000, 30%); } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
48. a { color: #000; } a:hover { color: #4d4d4d; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
49. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. MIXINS
50. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Functions ‎ Reuse styles without having to duplicate. ‎ Make your code DRY. MIXINS
51. @mixin box-highlight() { background: green; border: 1px solid red; padding: 20px; width: 100%; } .call-out { @include box-highlight(); color: yellow; } .special-box { @include box-highlight(); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
52. .call-out { background: green; border: 1px solid red; padding: 20px; width: 100%; color: yellow; } .special-box { background: green; border: 1px solid red; padding: 20px; width: 100%; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
53. @mixin section($background: #000, $color: #fff, $radius: 10px) { background: $background; border-radius: $radius; color: $color; padding: 20px; } .section-1 { @include section(); } .section-2 { @include section(#cecece, #000, 5px); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
54. .section-1 { background: black; border-radius: 10px; color: white; padding: 20px; } .section-2 { background: #cecece; border-radius: 5px; color: black; padding: 20px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
55. @mixin shadowed() { overflow: hidden; position: relative; h2 { font-size: 36px; } &:before { box-shadow: 0 0 10px rgba(#000, 0.5); content: ""; height: 20px; left: 10px; position: absolute; right: 10px; top: -20px; } } .section { @include shadowed(); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
56. .section { overflow: hidden; position: relative; } .section h2 { font-size: 36px; } .section:before { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); content: ""; height: 20px; left: 10px; position: absolute; right: 10px; top: -20px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
57. @mixin respond-to($media) { @if $media == small-and-under { @media only screen and (max-width: 479px) { @content; } } @else if $media == medium { @media only screen and (min-width: 480px) and (max-width: 767px) { @content; } } @else if $media == full { @media only screen and (min-width: 1000px) { @content; } } } .some-thing { width: 800px; @include respond-to(medium) { width: 100%; } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
58. .some-thing { width: 800px; } @media only screen and (min-width: 480px) and (max-width: 767px) { .some-thing { width: 100%; } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
59. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. EXTEND
60. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Kinda like mixins, but also kinda not. ‎ Replacement for mixins with no parameters. ‎ Extend only works for single elements ‎ Not possible: @extend .nav a EXTEND
61. .box-highlight { background: green; border: 1px solid red; padding: 20px; width: 100%; } .highlight { @extend .box-highlight; color: yellow; } .another-highlight { @extend .box-highlight; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
62. .box-highlight, .highlight, .another-highlight { background: green; border: 1px solid red; padding: 20px; width: 100%; } .highlight { color: yellow; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
63. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. “SILENT” EXTENDS
64. %font-georgia { color: #666; font-family: Georgia; font-style: italic; } .heading { @extend %font-georgia; } .footnote { @extend %font-georgia; font-style: normal; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
65. .heading, .footnote { color: #666; font-family: Georgia; font-style: italic; } .footnote { font-style: normal; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
66. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. LOOPS
67. $col: 100px; $gutter: 20px; @for $i from 1 through 5 { .span-#{$i} { width: ($i * $col) + ($gutter * ($i - 1)); } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
68. .span-1 { width: 100px; } .span-2 { width: 220px; } .span-3 { width: 340px; } .span-4 { width: 460px; } .span-5 { width: 580px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
69. @each $service in twitter, facebook, linkedin, flickr { .#{$service} { background-image: url(/images/icons/#{$service}.png); } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
70. .twitter { background-image: url(/images/icons/twitter.png); } .facebook { background-image: url(/images/icons/facebook.png); } .linkedin { background-image: url(/images/icons/linkedin.png); } .flickr { background-image: url(/images/icons/flickr.png); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
71. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. IMPORT
72. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Break your css into multiple files ‎ Sass combines into a single file ‎ No extra HTTP requests IMPORT
73. # _forms.scss input { background: #dedede; border: 1px solid #000; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
74. # _buttons.scss button { background: #000; color: #fff; padding: 5px 10px; text-transform: uppercase; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
75. # all.scss @import "forms"; @import "buttons"; © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
76. # all.css input { background: #dedede; border: 1px solid #000; } button { background: #000; color: #fff; padding: 5px 10px; text-transform: uppercase; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
77. COMPASS FEATURES
78. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Compass gives you a whole bunch of prebuilt mixins to use. ‎ Import all of the CSS3 mixins ‎ @import "compass/css3"; ‎ Then you can use those mixins just like you would any other mixin. COMPASS FEATURES
79. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. BUILT-IN MIXINS
80. .rounded-box { @include border-radius(10px); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
81. .rounded-box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
82. .gradient { @include background-image(linear-gradient(#fff, #ccc)); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
83. .gradient { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffff ), color-stop(100%, #cccccc)); background-image: -webkit-linear-gradient(#ffffff, #cccccc); background-image: -moz-linear-gradient(#ffffff, #cccccc); background-image: -o-linear-gradient(#ffffff, #cccccc); background-image: -ms-linear-gradient(#ffffff, #cccccc); background-image: linear-gradient(#ffffff, #cccccc); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
84. .rotate-me { @include rotate(30deg); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
85. .rotate-me { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
86. .three-columns { @include column-count(3); @include column-rule(1px dotted #000); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
87. .three-columns { -webkit-column-count: 3; -moz-column-count: 3; -o-column-count: 3; column-count: 3; -webkit-column-rule: 1px dotted black; -moz-column-rule: 1px dotted black; -o-column-rule: 1px dotted black; column-rule: 1px dotted black; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
88. .transition-me { background: red; @include transition(background 0.5s ease-in-out); &:hover { background: green; } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
89. .transition-me { background: red; -webkit-transition: background 0.5s ease-in-out; -moz-transition: background 0.5s ease-in-out; -ms-transition: background 0.5s ease-in-out; -o-transition: background 0.5s ease-in-out; transition: background 0.5s ease-in-out; } .transition-me:hover { background: green; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
90. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ box-shadow ‎ font-face ‎ background-size ‎ and many more! ‎ compass-style.org/reference/compass/css3/ MANY MORE MIXINS
91. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. SPRITING
92. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. ‎ Compass can automatically combine images, create sprites, and update your CSS. ‎ It's pretty amazing. SPRITING
93. $icons-spacing: 20px; @import "icons/*.png"; .twitter @include icons-sprite(twitter); } .facebook @include icons-sprite(facebook); } .linkedin @include icons-sprite(linkedin); } .flickr @include icons-sprite(flickr); } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
94. $icons-spacing: 20px; @import "icons/*.png"; @each $service in twitter, facebook, linkedin, flickr { .#{$service} { @include icons-sprite(#{$service}); } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
95. .icons-sprite, .twitter, .facebook, .linkedin, .flickr { background: url('/images/icons-s589c2b097f.png') no-repeat; } .twitter { background-position: 0 -75px; } .facebook { background-position: 0 -223px; } .linkedin { background-position: 0 0; } .flickr { background-position: 0 -149px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
96. $icons-spacing: 20px; @import "icons/*.png"; @each $service in twitter, facebook, linkedin, flickr { .#{$service} { @include icons-sprite(#{$service}, $offset-x: 10px, $offset-y: 10px); } } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
97. .twitter { background-position: 10px -65px; } .facebook { background-position: 10px -213px; } .linkedin { background-position: 10px 10px; } .flickr { background-position: 10px -139px; } © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission.
98. DEMO TIME CREDITS arrestedstills.tumblr.com
99. © Viget Labs, LLC • This presentation is CONFIDENTIAL and should not be shared without permission. Sass: sass-lang.com Compass: compass-style.org Github Repo: git.io/5piz6Q LiveReload: livereload.com Codekit: incident57.com/codekit web: trevordavis.net twitter: @trevor_davis Thanks! Let’s Connect Resources