CSS-LESS-SASS

How do you develop maintainable stylesheets and take advantage of modern web technologies in large scale projects? Let's take an in-depth look at modules made available through CSS3, and create a comparison between CSS, SASS, and LESS, so that you can decide which technology will best help your team overcome its challenges.

Please welcome Braden Roseborough , UI Engineer at Lynda.com With a passion for simplifying complex problems and teaching people about technology, Braden leads a team of engineers who manage A/B testing, and helps optimize the lynda.com interface asset pipeline. In previous roles, he was instrumental in developing visualizations for Apple’s internal scheduling system, as well as an online video-based fundraising program.
Braden spends his spare time jumping out of airplanes. He also works on software and hardware projects that support skydivers. His current side projects include developing a helmet mounted altimeter, and a wind speed indicator that calculates whether or not it is safe to jump.

Lynda.com, one of the most successful companies in online education today teaches technology, design, and business skills to millions of individual, corporate, academic, and government subscribers through a comprehensive library of instructional videos taught by industry experts.

Transcript

1. CSS - LESS - SASS Braden Roseborough
2. "An engineer is a professional practitioner of engineering, concerned with applying scientific knowledge, mathematics, and ingenuity to develop solutions for technical problems." (wikipedia:Engineer)
3. "An engineer is a professional practitioner of engineering, concerned with applying scientific knowledge, mathematics, and ingenuity to develop solutions for technical problems." (wikipedia:Engineer)
4. CSS - LESS - SASS Braden Roseborough
5. Role Based Names Modularized Code Performance Maintainability
6. Role Based Names
7. Modularized Code
8. Performance
10. Performance
11. Maintainability
14. JS
16. Strengths and Weaknesses
17. Learning Curve
18. #selector { property: value; }
19. #selector { property: value; }
20. #selector { property: value; }
21. #selector { property: value; }
22. #selector { property: value; }
23. @
24. /* */
25. #selector { property: value; }
26. $ Variables
27. Nested Rules
28. Mixins
29. LESS SASS SCSS
30. Compilers
31. Compilers
32. Tools
33. $ Variables
34. $ Variables
35. Nested Rules
36. nav {...} nav ul {...} nav ul li {...} nav ul li a{...}
37. nav { ... ul { ... li { ... a {...} }}}
39. Mixins
40. Mixins
41. $
42. Operators
43. Operators
45. Sass: http://sass-lang.com Less: http://lesscss.org CodeKit: http://incident57.com/codekit/ Grunt: http://gruntjs.com Compass: http://compass-style.org
46. http://css-tricks.com/semantic-class-names/
48. Braden Roseborough broseborough@lynda.com Subject: HTML5LA