Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Quick Dive Into CSS Preprocessors

Quick Dive Into CSS Preprocessors

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

738a5b16d0ce1046be8d0a5e10573fd7?s=128

Glory Praise Emmanuel

February 13, 2021
Tweet

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