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.

2722012beb9afcad75df5c9f2229fd8c?s=128

Tim Knight

March 12, 2015
Tweet

Transcript

  1. Introduction to Sass With / Tim Knight @timknight

  2. 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
  3. Disclaimer I'm not covering it "all" Yes there are other

    preprocessors And even more opinions about which one is the best
  4. 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
  5. Installation Options

  6. 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
  7. 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
  8. For WordPress Checkout WP-SCSS at https://wordpress.org/plugins/wp-scss/

  9. 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/
  10. Why Sass? Helps DRY up your code? Better Code Organization

    Simplify Repeating Code Mathematical Features And so much more
  11. 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 ; } }
  12. Code Nesting Helps you organize your code Opportunities to Namespace

    So. The Inception Principle? What about parent references?
  13. Demo

  14. Using Variables Removes further duplication Helps build consistency Makes your

    life easier More expressive - $lime over #bada55
  15. Demo

  16. 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
  17. Demo

  18. Partials Helps in code organization Does not create separate files

    and needs to be imported into your stylesheet Start with an underscore "_"
  19. Demo

  20. Lists A special type of a variable with multiple values

    You can loop (iterate) through each value in a list to generate different CSS
  21. Demo

  22. 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
  23. Demo

  24. 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
  25. Demo

  26. Mixins Abstracts complexity Like a partial, but lets you provide

    attributes that can change the output you get back Sound crazy? Not to worry...
  27. Demo

  28. Calculations Understands unit-based math. 5 0 p x + 3

    0 p x - , + , / , * , % Adjust colors programmatically
  29. Demo

  30. Before We Finish So what the hell is Compass?

  31. 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
  32. 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
  33. Questions?

  34. Thank You! Slides are available at: https://speakerdeck.com/timknight/introduction-to-sass