Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Sass

Introduction to Sass

An introduction to the CSS preprocessor Sass for the St. Petersburg Front-End Design Meetup. Presented on March 12, 2015 at The Iron Yard.

Tim Knight

March 12, 2015

More Decks by Tim Knight

Other Decks in Technology


  1. Who am I? Designer • Engineer • Rubyist • UX

    Designer Started in the Web in 1995 First Startup in 1997 (at 17, and exited at 23) Currently, Director of User Experience for GravityFree
  2. Disclaimer I'm not covering it "all" Yes there are other

    preprocessors And even more opinions about which one is the best
  3. So What is Sass? A CSS Preprocessor Originally created in

    Ruby Let's you use things like Nesting, Variables, Partials, Mixins, and Functions Is it Sass, SASS, or SCSS? Sass: Syntactically Awesome Stylesheets SCSS: Sassy CSS We'll be working with the default SCSS syntax
  4. Using Ruby For Mac Users g e m i n

    s t a l l s a s s For Windows users, first install Ruby at , then: http://rubyinstaller.org/ g e m i n s t a l l s a s s Start the watcher from Terminal/Command Prompt: s a s s - - w a t c h a s s e t s / s a s s : a s s e t s / c s s
  5. Using Grunt (Node) n p m i n s t

    a l l - - s a v e - d e v g r u n t - s a s s
  6. Win & Mac GUI Options Scout (Free): Koala (Free): Prepros

    ($29): CodeKit ($32): http://mhs.github.io/scout-app/ http://koala-app.com/ https://prepros.io/ http://incident57.com/codekit/
  7. Why Sass? Helps DRY up your code? Better Code Organization

    Simplify Repeating Code Mathematical Features And so much more
  8. What Does DRY Mean? Don't Repeat Yourself . s i

    d e b a r { w i d t h : 2 5 % ; } . s i d e b a r h 2 { f o n t - s i z e : 2 e m ; } . s i d e b a r i m g { b o r d e r : 2 p x s o l i d # c c c ; } . s i d e b a r { w i d t h : 2 5 % ; h 2 { f o n t - s i z e : 2 e m ; } i m g { b o r d e r : 2 p x s o l i d # c c c ; } }
  9. Code Nesting Helps you organize your code Opportunities to Namespace

    So. The Inception Principle? What about parent references?
  10. Code Comments Supports traditional /* */ comments that will render

    in your stylesheet Supports // comments that will not be included in your compiled sheets Traditional comments style can include variables
  11. Partials Helps in code organization Does not create separate files

    and needs to be imported into your stylesheet Start with an underscore "_"
  12. Lists A special type of a variable with multiple values

    You can loop (iterate) through each value in a list to generate different CSS
  13. Placeholders / @ e x t e n d A

    special kind of class that isn't added into the CSS code unless specifically used Creates a single CSS instance with all the selectors Starts with a "%" To be used responsibly
  14. Control Flow You can check if something is equal (=

    = ) or is not equal (! = ) to something else You can check if something is < , > , < = , > = If-Then-Else
  15. Mixins Abstracts complexity Like a partial, but lets you provide

    attributes that can change the output you get back Sound crazy? Not to worry...
  16. Calculations Understands unit-based math. 5 0 p x + 3

    0 p x - , + , / , * , % Adjust colors programmatically
  17. So What is Compass? Often linked or mistaken as being

    a preprocessor itself A collection of Sass mixins and functions to assist in simplifying your code Has it's own configuration options Installed separately as a RubyGem and can influence the performance of your compile times because of its size
  18. What About Bourbon? A leaner group of usable mixins and

    functions, so there is less performance overhead Installed directly into a project and can be easily edited for your needs