Css to-scss
1 like1,165 views
Rob Walker, CTO of Papertrail.io, discusses the benefits of switching from CSS to SCSS, emphasizing its ease of learning, powerful features like nesting, variables, partials, and mixins that simplify styling. He provides guidance on making the transition, including installing SCSS and converting existing CSS files. Additionally, he encourages exploring SCSS resources and frameworks to enhance development.
Css to-scss
- 1. CSS to SCSS Making the Switch
- 2. Rob Walker CTO of Papertrail.io Made the switch in September 2013, and have never looked back rob@papertrail.io @_rob_walker_
- 3. Coming up • Why you should use SCSS • Working with SCSS • Making the switch • Next steps • Questions
- 4. Resources • Examples from this talk at - https://github.com/papertrailrob/frontendne-scss • http://sass-lang.com
- 5. Why should you use SCSS • Easy to learn, and you can start today • Makes CSS more powerful • Will make your life easier
- 6. Working with SCSS • Nesting • Variables • Partials • Mixins
- 7. Nesting • Your HTML is in a nested hierarchy. Your CSS can be to. • Write less • Read more easily
- 8. Example
- 9. Variables • Define once, use everywhere • Control a whole layout or style from a few variables • Use the variables in calculations, colour modifiers and loads of other operators
- 10. Example
- 11. Partials and Import • Split SCSS into manageable chunks. • Organise your files • Import open source libraries
- 12. Example
- 13. Mixins • Reusable snippets of SCSS • Prevent repetition • Use open source mixins to make life easier
- 14. Example
- 15. How to make the switch • Install SCSS - sass-lang.com/install • Convert CSS to SCSS - Just rename .css to .scss • Generate SCSS - scss styles.scss:styles.css • Play and learn (and read the docs)
- 16. Example
- 17. Next steps • Try SCSS out yourself • Read the guide at sass-lang.com/guide • Check out the Frameworks (Compass, Bourbon, Susy)
- 18. Questions