How to Use CSS PreProcessors in WordPress – An Infographic

There are a variety of CSS preprocessors available in the market. Among them, the most popular ones are SASS, SCSS, and LESS. All these applications are similar in syntaxes and dramatically increases the pace at which you write your CSS. Let’s go through an infographic which takes you to a tour through various aspects of CSS preprocessors.

Now that you have gone through the infographic, let’s take a closer look.

Features

Following are the features of a CSS preprocessor:

EXTEND

.block { margin: 10px 5px; }
 p    { @extend .block;
 border: 1px solid #eee; }

NESTING

$link-color: #999;
$link-hover: #229ed3;
a    { color: $link-color;
&:hover { color: $link-hover; } }

FUNCTIONS

@function pda($n1, $n2)
 { @return $n1 + $n2; }
 .my-module { padding: pda(10px, 5px); }
 .my-module { padding: 15px; }

VARIABLES

$font-size: 16px;
 P { font-size: $font-size; }

OPERATIONS

saturate($color, $amount)
desaturate($color, $amount)
lighten($color, $amount)
darken($color, $amount)
adjust-hue($color, $amount)

MIXINS

@mixin bordered($width)
 { border: $width solid #ddd; }
 h1 { @include bordered(5px); }

Reasons To Use A CSS PreProcessor

1. Freedom to use CSS3 easily.
2. Very easy setup and maintenance.
3. Quick organization and scaling of CSS.
4. Save time by writing lesser and reusable codes.
5. CSS optimization for productive use.

Top CSS PreProcessors

Following are the leading applications used as CSS preprocessors:

1. SASS ____ 38.67%
2. SCSS ____ 28.67%
3. LESS ____ 22.67%
4. COMPASS ____ 8%
5. STYLUS ____ 4%

What is SASS?

SASS is a pure extension of CSS3 with two syntaxes namely .scss and .sass. The former syntax is the most common, and it also supports the older syntax.

Some popular features of SASS are:

Variables – Variables are defined and used throughout a file. Once made a change in one place, it can be seen updated wherever it is used.

Mixins – Mixins lets you reuse the whole chunks of CSS properties and selectors.

Nesting – You can dodge repetition by nesting selectors within one another.

Selector Inheritance – Tells one selector to inherit all the styles of another without replicating the CSS properties.

Following are some frameworks that include SASS and SCSS:

• Foundation
• Gravity
• Frameless

What is LESS?

LESS, at the same time, is a dynamic stylesheet language. You can frame CSS codes inside a .less file and compile the output in a .css file. The LESS processor uses JavaScript.

Following are some of the features of LESS:

Variables – Variables are defined and used throughout a file. Once made a change in one place, it can be seen updated wherever it is used like SASS.

Mixins – Mixins lets you reuse the whole chunks of CSS properties and selectors. You can also make use of Parametric Mixins to accept arguments.

Nested Rules – They give you the sense to use nesting rather than combining with cascading.

Namespaces – They let you group your variables/mixins.

These most popular front-end frameworks use LESS:

• Bootstrap
• Frameless

How To Use CSS PreProcessor With WordPress

Method 1: Using Command Lines

1. Install SASS and COMPASS
2. Copy SASS files into your theme folder.
3. Compile and convert style.scss to style.css

Method 2: Compile using Editors:

• Codekit
• Compass.app
• Koala
• Scout-App

Wrapping Up: Using CSS Preprocessors with WordPress

Using CSS Preprocessors in WordPress is definitely a developing trend in the field of web designing. They can make an enormous speed up in the time you pay for writing CSS styles for your websites.

Preprocessors can also aid in structuring CSS like other functions in languages like PHP and JavaScript. If you aren’t making use of CSS preprocessors in developing your WordPress till now, you should surely count on it.