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. finding your way
with sass+compass
ben@cornershopcreative.com

2. WHAT IS SASS?
Sass is a CSS Pre-processor
or meta-language
Sass is a “competitor” to LESS
and Stylus
Sass is written in Ruby
Sass is pretty cool

3. WHAT IS COMPASS?
Compass is an open-source
library of Sass mixins.
Compass is a CSS authoring
framework.
Compass is what makes Sass
really, really useful.

4. WHAT SASS DOES
Introduces new things to CSS:
• nested rules
• variables
• mixins
• inheritance
• and much more!

5. GETTING GOING
in your development environment*
* you don’t need sass on prod!

6. STEP BY STEP
1.Install ruby (I use rvm)
$ curl -L https://get.rvm.io | bash -s stable --ruby
2.Install the compass “gem”
$ gem update --system
$ gem install compass
3.Install compass-normalize (optional)
$ gem install compass-normalize
4.Confirm installation
$ compass version

7. STEP BY STEP
5. Set up a project!
$ compass create <foldername> ...or...
$ compass install compass --syntax sass
live demo time!

8. PROBLEMS?
http://compass-style.org/install/ is your friend

9. TWO SYNTAXES
SCSS 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 PROCESS
1.Write your Sass
2.Compile your Sass into CSS
3.Include your CSS on prod
4.Bask in glory

11. LET’S TRY IT
showing is better than telling, right?

12. WE JUST COVERED
Compiling Sass files with
compass watch and
compass compile
Using @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))
http://compass-style.org/reference

21. SPRITES FTW

22. THE PROCESS
1.Create a sub-directory in /images/
2.Save your sprite png’s in there
3.Tell Compass to create classes
4.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 HANDY
h1
font-size: 40px
@media screen and (max-width: $break-small)
font-size: 30px
a.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://sass-lang.com
http://compass-style.org
http://www.kaelig.fr/bettersassdocs/
http://thesassway.com

27. CONNECT
Ben Byrne
ben@cornershopcreative.com
facebook.com/drywall
Twitter: @drywall