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.

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