A brief introduction to Sass that I created for the Ventura County WebMob Meetup group on November 11, 2015. There was a live demo after slide 8 to demonstrate how Sass worked, so the presentation is better live.

1. aumnia.com
your automated mobile and interactive application partner
twitter.com/aumnia
facebook.com/aumnia
aumnia.com/blog
Sass: An Introduction
Gregg Borodaty – Aumnia, Inc.
November 11, 2015

2. aumnia.comThe Agenda
1. Sass – what is it?
2. Sass in practice
3. A couple of key features
4. How to get started
5. Resources

3. aumnia.com
Syntactically Awesome StyleSheets
http://sass-lang.com/

4. aumnia.comWhat is a CSS Preprocessor?
“A scripting language that extends CSS and
gets compiled into regular CSS syntax”

5. aumnia.comHow popular is Sass?
According to an information survey of developers conducted at http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results

6. aumnia.comBut wait, I’m already a CSS expert…
Sass will make you a CSS ninja!
It will help you to
•Generate cleaner, more readable code,
•Organize and modularize your CSS,
•Create pieces for reuse across projects (and sharing),
•Import cool libraries, and
•Achieve cross-browser compatibility (with some help
from its friends)

7. aumnia.comSass in practice
Sass source code Generated CSS

8. aumnia.comKey features (to get you going)
• Nesting
• Variables
• [Advanced] Mathematical Calculations
• Color variations
Let’s see if live examples will work….

9. aumnia.comGetting Started
Three ways:
1.Use an application – CodeKit, Scout, etc.
2.Go command line
See http://sass-lang.com/install for more info on above options
3.Step up your game and use a task runner
a) These are tools like Gulp or Grunt
b) They do all kinds of great stuff in addition to
turning your Sass into CSS

10. aumnia.comResources
For Sass:
http://sass-lang.com/
https://css-tricks.com/sass-style-guide/
For Bootstrap:
http://getbootstrap.com/
https://github.com/twbs/bootstrap-sass
For Grunt:
https://24ways.org/2013/grunt-is-not-weird-and-hard/

11. aumnia.com
For more information about Aumnia:
http://www.aumnia.com
For more information about me:
http://greggborodaty.com
https://www.linkedin.com/in/gregoryborodaty
Thank you!