aumnia.com

your automated mobile and interactive application partnertwitter.com/aumnia

facebook.com/aumnia

aumnia.com/blog

Sass: An Introduction

Gregg Borodaty – Aumnia, Inc.November 11, 2015

aumnia.comThe Agenda

1. Sass – what is it?2. Sass in practice3. A couple of key features4. How to get started5. Resources

aumnia.comSyntactically Awesome StyleSheets

http://sass-lang.com/

aumnia.comWhat is a CSS Preprocessor?

“A scripting language that extends CSS and gets compiled into regular CSS syntax”

aumnia.comHow popular is Sass?

According to an information survey of developers conducted at http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results

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)

aumnia.comSass in practice

Sass source code Generated CSS

aumnia.comKey features (to get you going)

• Nesting• Variables• [Advanced] Mathematical Calculations• Color variations

Let’s see if live examples will work….

aumnia.comGetting Started

Three ways:1.Use an application – CodeKit, Scout, etc.2.Go command lineSee http://sass-lang.com/install for more info on above options

3.Step up your game and use a task runnera) These are tools like Gulp or Gruntb) They do all kinds of great stuff in addition to

turning your Sass into CSS

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/

aumnia.comFor more information about Aumnia: http://www.aumnia.com

For more information about me:http://greggborodaty.comhttps://www.linkedin.com/in/gregoryborodaty

Thank you!