Finding your way with Sass+Compass

Uploaded 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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    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

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. finding your waywith sass+compass
  • 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. WHAT IS COMPASS?Compass is an open-sourcelibrary of Sass mixins.Compass is a CSS authoringframework.Compass is what makes Sassreally, really useful.
  • 4. WHAT SASS DOESIntroduces new things to CSS: • nested rules • variables • mixins • inheritance • and much more!
  • 5. GETTING GOINGin your development environment* * you don’t need sass on prod!
  • 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. STEP BY STEP5. Set up a project! $ compass create <foldername> ...or... $ compass install compass --syntax sass live demo time!
  • 8. PROBLEMS? is your friend
  • 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. THE PROCESS1.Write your Sass2.Compile your Sass into CSS3.Include your CSS on prod4.Bask in glory
  • 11. LET’S TRY ITshowing is better than telling, right?
  • 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. VARIABLES & MIXINS and some math, just for fun!
  • 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. 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. 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. ENTER COMPASS mixin magic and more
  • 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. 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. FANCY CSS3 = EASY!+single-transition(all, 0.3s, ease)+rotate(20deg)+scale(1.2)+background-image(linear-gradient(top, $red, $red - #222))
  • 22. THE PROCESS1.Create a sub-directory in /images/2.Save your sprite png’s in there3.Tell Compass to create classes4.Celebrate
  • 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. OTHER STUFF random other tricks
  • 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. FOR MORE... http://compass-style.org
  • 27. CONNECT Ben Twitter: @drywall