1. Britt BodinNatalie Thomson

2. AGENDA I. The Problems with CSS II. Introducing Preprocessors III. How They Work IV. It’s Magic. V. Advantages & Disadvantages VI. SASS vs. LESS VII. Frameworks VIII. Subscription Cost, Service Fees

3. THE PROBLEMS WITH CSS ♡ Repetitive & redundant ♡ Time-consuming ♡Cascading Changes= tons of busywork ♡ Organization: ♡Vertical placement limitations ♡Limited organizational tools

4. THE PROBLEMS WITH CSS

5. INTRODUCING PREPROCESSORS ♡ Nested syntax ♡ Ability to define variables ♡ Ability to define mixins Combining the simplicity of CSS with the power of computation ♡ Mathematical functions ♡ Operational functions ♡ Joining of multiple files

6. HOW THEY WORK Creation Compilation Integration MPD: Magic Pixie Dust

7. ADVANTAGES ♡ Better organization ♡ Better syntax ♡ Cleaner code ♡ Less time-consuming ♡ Easier maintenance ♡ Reduces repetition ♡ Responsive* ♡Fewer HTTP requests ♡Designer’s Best Friend ♡Color Scheming ♡Semantic Tools ♡Mathematical Precision ♡Variable-level control enable rapid, significant changes

8. DISADVANTAGES ♡Generated CSS ♡Possibly bloated, reader-unfriendly source code… if the reader can’t/won’t use a preprocessor. ♡Debugging is harder ♡Source Maps ♡Barriers to entry ♡Programming code ♡Anti-conformism ♡Terrorists? Can be slow to compile, sometimes. Maybe.

9. PREPARE TO BE AMAZED Do try this at home

10. SASS vs LESS BOTH SASS LESS ♡Based in JavaScript ♡JavaScript Evaluation ♡Client-side operation ♡Less efficient logic ♡Fewer frameworks ♡Guarded mixins ♡Loops only allowed for numeric values ♡Easier to install? ♡Extensions for faster & easier web development ♡Nesting ♡Logic ♡ Mixins & Selector Inheritance ♡ Nesting ♡Error notifications ♡Documentation ♡Based in Ruby ♡Pure CSS. No compatibility issues ♡Compass ♡Better Nesting ♡Strange scope issues ♡Very PHP-ish

11. FRAMEWORKS ♡Compass ♡Bourbon ♡Foundation ♡Bootstrap* ♡Bootstrap 4 ♡Bootstrap ♡Ink ♡UIKit ♡Semantic UI ♡Responsive Boilerplate http://usablica.github.io/front-end-frameworks/compare.html

12. CAN I DO THIS AT HOME? ♡ Visual Studio ♡Web Essentials (2010-2013)Web Essentials ♡Compiler (2015)Compiler ♡SASSSASS ♡LESSLESS ♡StylusStylus

13. SOURCES ♡ http://1stwebdesigner.com/learn-sass-tutorial/http://1stwebdesigner.com/learn-sass-tutorial/ ♡http://www.zingdesign.com/less-vs-sass-its-time-to-switch-to-sass/http://www.zingdesign.com/less-vs-sass-its-time-to-switch-to-sass/ ♡http://www.zingdesign.com/the-sass-and-compass-tutorial-for- absolute-beginners/http://www.zingdesign.com/the-sass-and-compass-tutorial-for- absolute-beginners/ ♡https://gist.github.com/chriseppstein/674726https://gist.github.com/chriseppstein/674726 ♡http://learn.onemonth.com/sass-vs-lesshttp://learn.onemonth.com/sass-vs-less ♡http://blog.blakesimpson.co.uk/read/37-less-sass-the-advantages-of- css-preprocessing-explainedhttp://blog.blakesimpson.co.uk/read/37-less-sass-the-advantages-of- css-preprocessing-explained ♡http://www.webinsation.com/benefits-of-using-sass-over-traditional- css/http://www.webinsation.com/benefits-of-using-sass-over-traditional- css/ ♡http://chriseppstein.github.io/blog/2009/02/15/a-sassy-response-to- css-framework-disadvantages/http://chriseppstein.github.io/blog/2009/02/15/a-sassy-response-to- css-framework-disadvantages/ ♡http://www.brighthub.com/internet/web- development/articles/25619.aspxhttp://www.brighthub.com/internet/web- development/articles/25619.aspx ♡http://alistapart.com/article/why-sasshttp://alistapart.com/article/why-sass ♡http://www.hongkiat.com/blog/sass-vs-less/http://www.hongkiat.com/blog/sass-vs-less/ ♡http://www.sitepoint.com/6-current-options-css-preprocessors/http://www.sitepoint.com/6-current-options-css-preprocessors/ ♡http://sass-lang.com/http://sass-lang.com/ ♡http://marksheet.io/sass-scss-less.htmlhttp://marksheet.io/sass-scss-less.html ♡https://www.keycdn.com/blog/sass-vs-less/https://www.keycdn.com/blog/sass-vs-less/ ♡http://adamsilver.io/articles/the-disadvantages-of-css-preprocessors/http://adamsilver.io/articles/the-disadvantages-of-css-preprocessors/ ♡https://blog.logentries.com/2014/10/which-css-preprocessor-should- you-choose/https://blog.logentries.com/2014/10/which-css-preprocessor-should- you-choose/ ♡https://www.urbaninsight.com/2012/04/12/ten-reasons-you-should- be-using-css-preprocessorhttps://www.urbaninsight.com/2012/04/12/ten-reasons-you-should- be-using-css-preprocessor ♡https://blog.udemy.com/less-vs-sass/https://blog.udemy.com/less-vs-sass/ ♡https://csspre.com/compare/https://csspre.com/compare/