Quick Dive Into CSS Preprocessors

Learn about CSS Preprocessors and why you should start using them now!

Transcript

1. A QUICK DIVE INTO CSS PREPROCESSORS Glory Praise Emmanuel @emmaglorypraise
2. WHAT IS CSS? CSS is a rule-based language that allows you to specify groups of styles that should be applied to particular elements or groups of elements on your web page. CSS handles the look and feel part of a web page. 01
3. WHAT IS A CSS PREPROCESSOR? According to MDN Web Docs, A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. CSS preprocessors extends the default functionality of CSS and enable you to use logic in your CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. 02
4. WHY SHOULD I USE ONE? They make the CSS structure more readable and easier to maintain. Reduces development time. A way of adding functionalities to CSS Flexibility Unlimited reusability(Obey the DRY rule). 03
5. COOL FEATURES OF CSS PREPROCESSORS 04 Variables Nesting Mixins Loops Mathematical Operations If/Else Statement
6. MISCONCEPTIONS ABOUT CSS PREPROCESSORS 05 Adds complexity to the development process You lose control over the final code It's hard to install Too hard to debug I need to know Ruby or node
7. DIFFERENT TYPES OF CSS PREPROCESSORS There are many CSS preprocessors to choose from, These includes: 06
8. WHICH IS THE BEST? Things to consider before you choose one Ensure it fits your workflow Compatibility with existing code Available features Community Which feels better to you??? Note: They all have about the same functionalities 07
9. WHAT DO I NEED TO KNOW TO GET STARTED? GOOD KNOWLEDGE OF CSS CODE EDITOR COMMAND LINE 08
10. THE END! QUESTIONS? Glory Praise Emmanuel Frontend Developer Technical Writer @emmaglorypraise