Using CSS through CSS Preprocessor

Any website at the basic layer is pure HTML – tags and styling. When internet started a few decades ago, HTML was only text. Gradually, it was possible to add different backgrounds, colors, font size and styles to the different sections of the website. This led to creation of CSS, through which it was possible to keep the website contents and styles separately. Today CSS has gone beyond from just able to manage styles to create animations and complex classes for responsive layout.

Today a CSS often consist of thousand lines of coding, where major part of coding is overlapping. In order to ease the CSS development and ensure that code (same styling rules and attributes) are not repeated in the CSS, CSS Preprocessors came into existence.

CSS Preprocessors are also referred as ‘dynamic style sheet languages’. As the name itself says, it is similar to any server side programming language, where some code written in a specific syntax is converted into pure and true CSS, which we would be rather writing it manually.

Because CSS Preprocessors aren’t CSS itself so there are no limitations of CSS and we can have lots of functionality which will eventually give output as css that can work on browsers as we expected.

Why CSS Preprocessors?

• The most important advantage of using CSS Preprocessor is that it is more flexible to generate CSS by using programming abstraction and logic.
• CSS Preprocessor make it possible to use DRY (Don’t Repeat Yourself) principle in CSS, wherein code is only written once and same code is reused wherever required. This avoid time consuming task of rewriting same code again at different places and modifications / changes can be managed very easily.
• CSS Preprocessor results into well structured and organized CSS, also it is very easy to setup and get started.

Features of CSS Preprocessors:

Variables:

Like any other programming language, variable in CSS Preprocessors can hold values like hex code of color, width in pixel or percentage etc. and this variable can be used at multiple instances to specify the value for any styling attribute. It should be obvious that changing the value of a variable once is much more maintainable than changing it at many instances spread over a css file.

Nesting:

CSS Preprocessors will result into CSS that is clean, neat and tidy. Nesting keeps the style sheet ordered and neat by grouping the corresponding CSS in a block.

Mixins:

Mixins can hold as many CSS declarations as per the need and the entire block can be reused whenever required. This reduces the repetition of code and makes it more efficient by reusing the whole chunk anywhere.

Operations:

CSS Preprocessors allows performing operations like addition, multiplication, division and subtraction of values in order to specify measurement, color etc. This is very useful as in responsive design we play with size and measurement to target all devices and screens.

Overview of few CSS Preprocessors (frameworks):

LESS:

• Written in JavaScript, LESS extends CSS with dynamic behaviors like variables, mixins, operations and functions.
• Frameworks like Bootstrap are using LESS to take advantage of its dynamic features.

Sass:

• Written in Ruby, Sass also extends CSS by adding nested rules, variables, mixins, functions and much more.
• Many popular frameworks like Foundation 3 are built with Sass.
• One of the best parts of using Sass is that we can use it with Compass, a framework of functions and add-ons built on top of Sass that streamlines our process, creates image sprites dynamically, writes cleaner code, and has great output for CSS3 features – together they are a powerful combination.
• Sass has two syntaxes: SCSS, which stands for “Sassy CSS,” and the older indented syntax known simply as “Sass.”
• The SCSS syntax was introduced as the “new main syntax” for Sass in version 3. It uses the curly brackets and colons like regular CSS — it’s actually a super set of CSS — and contains all of its same features along with those of Sass.

For futuristic web development it is required to use new industry standards. Hope you have enjoyed the article, Happy Cssing. Incase you need any help you can email us on info@letsnurture.com