Finding your way with Sass+Compass

  • Published on

  • View

  • Download

Embed Size (px)


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.


  • 1. nding 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 dont 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.Conrm installation $ compass version 7. STEP BY STEP5. Set up a project! $ compass create ...or... $ compass install compass --syntax sass live demo time! 8. PROBLEMS? is your friend 9. TWO SYNTAXESSCSS SASS.selector {.selectorcolor: green;color: greenborder:1px solid $black; border:1px solid $black@include inline-block; +inline-blockli { li display: block;display: blockfont: 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. LETS TRY ITshowing is better than telling, right? 12. WE JUST COVERED Compiling Sass les withcompass watch and compass compileUsing @imports and underscores to control our contentMucking with cong.rb 13. VARIABLES & MIXINSand 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: #971219doing this in _variables.sass is a good idea 15. VARIABLES IN ACTION! .redtext color: $red article font:family: $sanssize: $base color: $dark background-color: $seethru h1font: #{$base * 2}/#{$base * 2.2} $display@extend .redtext&.titletext-transform: uppercase.#{$where}-railwidth: 200px 16. MIXINS=notextoverflow: hiddenwhite-space: nowraptext-indent: 105%text-align: left=float( $dir: left )float: $dir@if $dir == leftmargin: 0 10px 5px 0@elsemargin: 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-blockdisplay: -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)) 21. SPRITES FTW 22. THE PROCESS1.Create a sub-directory in /images/2.Save your sprite pngs 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-logowidth: 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 THATS HANDYh1font-size: 40px@media screen and (max-width: $break-small)font-size: 30pxa.headingbackground-image: image-url(filename.jpg)&:hover+scale(1.1).no-csstransforms &:hovertext-decoration: underline$fullwidth: 960px.railwidth: percentage(220px/$fullwidth)margin: percentage(10px/$fullwidth) 26. FOR MORE... http://compass-style.org 27. CONNECTBen Twitter: @drywall