Sass & Compass:
 Never Write 
Regular CSS Again

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.

98e7524451cd8ec1bf8f644d2c2f01c9?s=128

Trevor Davis

July 19, 2012
Tweet

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