Finding your way with Sass+Compass


Published on

Presentation for HTTQ in February 2013 by Ben Byrne on the CSS Preprocessor SASS, including getting it installed with ruby, sass and scss syntax, common Compass mixins, and sprites.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Finding your way with Sass+Compass

  1. 1. finding your waywith sass+compass
  2. 2. WHAT IS SASS?Sass is a CSS Pre-processoror meta-languageSass is a “competitor” to LESSand StylusSass is written in RubySass is pretty cool
  3. 3. WHAT IS COMPASS?Compass is an open-sourcelibrary of Sass mixins.Compass is a CSS authoringframework.Compass is what makes Sassreally, really useful.
  4. 4. WHAT SASS DOESIntroduces new things to CSS: • nested rules • variables • mixins • inheritance • and much more!
  5. 5. GETTING GOINGin your development environment* * you don’t need sass on prod!
  6. 6. STEP BY STEP1.Install ruby (I use rvm) $ curl -L | bash -s stable --ruby2.Install the compass “gem” $ gem update --system $ gem install compass3.Install compass-normalize (optional) $ gem install compass-normalize4.Confirm installation $ compass version
  7. 7. STEP BY STEP5. Set up a project! $ compass create <foldername> ...or... $ compass install compass --syntax sass live demo time!
  8. 8. PROBLEMS? is your friend
  9. 9. TWO SYNTAXESSCSS SASS.selector { .selector color: green; color: green border:1px solid $black; border:1px solid $black @include inline-block; +inline-block li { li display: block; display: block font: font: family: $sans; family: $sans size: 122%; size: 122% } @extend .navitem} .other-selector .other-selector {}
  10. 10. THE PROCESS1.Write your Sass2.Compile your Sass into CSS3.Include your CSS on prod4.Bask in glory
  11. 11. LET’S TRY ITshowing is better than telling, right?
  12. 12. WE JUST COVERED Compiling Sass files with compass watch and compass compileUsing @imports and underscores to control our content Mucking with config.rb
  13. 13. VARIABLES & MIXINS and some math, just for fun!
  14. 14. VARIABLES $sans: “Helvetica Neue”, Helvetica, Arial, sans-serif$display: “Lobster”, Impact, serif $tiny: Verdana, sans-serif $evil: Comic Sans, sans-serif $where: left $radius: 5px $base: 14px $dark: #222 $light: #fff$seethru: rgba($light, 0.2) $grey: $dark + #444 //or lighten($dark, 40%) $red: #971219 doing this in _variables.sass is a good idea
  15. 15. VARIABLES IN ACTION! .redtext color: $red article font: family: $sans size: $base color: $dark background-color: $seethru h1 font: #{$base * 2}/#{$base * 2.2} $display @extend .redtext &.title text-transform: uppercase .#{$where}-rail width: 200px
  16. 16. MIXINS=notext overflow: hidden white-space: nowrap text-indent: 105% text-align: left=float( $dir: left ) float: $dir @if $dir == left margin: 0 10px 5px 0 @else margin: 0 0 5px 10px.alignleft +float(right)
  17. 17. ENTER COMPASS mixin magic and more
  18. 18. CROSS-BROWSER STUFF+opacity(0.6)filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);opacity: 0.6;+inline-block display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline;
  19. 19. MOAR CROSS-BROWSER+opacity(0.6)+clearfix+legacy-pie-clearfix+text-shadow(1px 2px 8px rgba(black, 0.3))+box-shadow(inset 2px 4px 10px $red)+border-radius(8px)+box-sizing(border-box)
  20. 20. FANCY CSS3 = EASY!+single-transition(all, 0.3s, ease)+rotate(20deg)+scale(1.2)+background-image(linear-gradient(top, $red, $red - #222))
  21. 21. SPRITES FTW
  22. 22. THE PROCESS1.Create a sub-directory in /images/2.Save your sprite png’s in there3.Tell Compass to create classes4.Celebrate
  23. 23. EXAMPLE// gives us .mysprites-[filename]@import "mysprites/*.png"$mysprites-sprite-dimensions: true //sets dimensions+all-mysprites-sprites/* so if images/mysprites/logo.png is 200x100, then....mysprites-logo width: 200px; height: 100px; background: url(images/mysprites-3434034734.png) no-repeat; background-position: [whatever] [whatever];*/h1#logo @extend .mysprites-logo
  24. 24. OTHER STUFF random other tricks
  25. 25. WELL THAT’S HANDYh1 font-size: 40px @media screen and (max-width: $break-small) font-size: 30pxa.heading background-image: image-url(‘filename.jpg’) &:hover +scale(1.1) .no-csstransforms &:hover text-decoration: underline$fullwidth: 960px.rail width: percentage(220px/$fullwidth) margin: percentage(10px/$fullwidth)
  26. 26. FOR MORE... http://compass-style.org
  27. 27. CONNECT Ben Twitter: @drywall