How to Use CSS Preprocessors with WordPress in 2018 (Infographic)

0
397
Header image for CSS Preprocessors with WordPress

CSS Preprocessors

Quick Overview of what is covered:

Digging the Features

  • Extend
  • Mixins
  • Functions
  • Nesting
  • Variables
  • Operations

5 Reasons to Use CSS Preprocessors

  • Use CSS3 with ease
  • Easy to set-up and maintain
  • Organize & scale CSS quickly
  • Write reusable and less codes
  • Optimize CSS for production use

Top CSS Preprocessors

  • Sass 38.67%
  • Scss 28.67%
  • Less 22.67%
  • Compass 8%
  • Stylus 4%

How to Use CSS Preprocessors with WordPress

Step 1: Install Sass and Compass

  • Method 1: Using Command lines
    $ npm install -g sass
    $ gem install compass
  • Method 2: Compile using Editors
    1. Codekit
    2. Koala
    3. Scout-App
    4. Compass.app

Step 2: Copy SASS files into your theme folder

Step 3: Compile and convert style.scss to style.css
$ compass watch

The infographic is brought to you by Prevent Direct Access Gold Team.