Class materials

Slides

• Part 1
• Part 2

Workshop files

• For use with Ruby
  • Part 1: GitHub
  • Part 2: GitHub
• For use on CodePen: http://bit.ly/gdi-chi-sass

Resources

Sass Documentation

• Numeric operations
• Functions
• Interpolation

Sass Examples

• Cross-Browser CSS3 Gradients
• Cross-Browser Box-shadow (drop shadow) effects
• Inner Text Shadow effect
• Mixins: gradient
• Mixins: @font-face
• Mixins: transitions
• Mixins: box-shadow
• Mixins: opacity
• Mixins: buttons
• Mixins: image replacement
• Mixins: error messages
• Mixins: CSS shapes (triangles, arrows)

Extending Sass

• CodeKit: Compile Sass & more without command line
• Sass Sleuth: See Sass line numbers in your browser
• Live Reload: Compile Sass without refreshing your browser
• Compass

More to explore

• Haml: like Sass for HTML
• Rails: Rails is a software development framework written in Ruby. Sass & Haml are used in Rails apps. Try the Rails Girls tutorials to build your own app!
• LESS: a CSS preprocessor like Sass with different syntax

Misc

• Install Ruby
• Sass Meister
• Command line cheat sheet
• CSS3 reference

Discussion

Stuck? Need help? Have another resource? Leave a note here!