Why do we need CSS preprocessor?

CSS Preprocessor

CSS Prprocessing by Definition:

1. Preprocessor is any program that process the input data to produce output that can be used as an input for another program.
2. CSS Preprocessor is a processor which gets some instructions or raw code and compiles it into a .css file.
When we first step into web development and design, we work with CSS and develop smaller sites and micro sites. As we gain experience and start working in larger application and work in a team, we may come across the word ‘CSS Preprocessing’.
When we build bigger application, it is always important to follow ‘Do Not Repeat Yourself’ (DRY) principle and keep our code maintainable and organized. When we hand code CSS, we may have to put in lot of effort and time to achieve the quality results whereas using a preprocessor will automate the processes and scripting tasks.

Reasons for using CSS Preprocessor

Scalability and architecture

When we work in large application we can separate the code based on modules. It gives better clarity and updating the application and changing some code after some time will not be a difficult task.
As upgrading the application is easier, downgrading the application is also easier because we will have a clarified idea of which code is applicable for which functionality and removing unnecessary modules will not go wrong.
Another scenario where using CSS Preprocessor is we can reuse the modules even across various projects and separating based on modules will comparatively take only less effort and time.
It helps to answers so many questions like what if the brand is changed. What if we need to work for another responsive breakpoint? If we want to add print functionality later on or If we want to add accessibility features later on it will be easy as we go.

Variables

CSS Preprocessors makes things simpler by supplying variables. Values are assigned to variables and used as reference throughout the application and subjected to manipulation for writing mixins and directives.

Nesting

CSS preprocessor respects code inheritance and object oriented and facilitates reuse. All selectors which shares CSS properties can be nested together.

.article-wrap{
            padding:20px;
          .article-heading{
            margin-top:20px;
          }
        }
      

You may also read Text overflow in CSS

Dynamic Values

In a CSS Preprocessor, we can store values as variables. We can get dynamic values like, lighter or darker or hue, saturation of the color. It processes all dynamic calculations such as arithmetic calculations and serves as fault tolerant mechanisms.

@Import directive

@import will help us to import the code written somewhere and called elsewhere within the project instead of repeating at all places.

Control directive

Control Directives like @if, @else, @elseif are parts of CSS Preprocessors which helps us in scenarios of calculations and looping. Plain CSS acts as a markup language whereas CSS Preprocessor projects itself to be a programming language by serving syntactically and logically.

Complex Browser Support

Making our code browser compatible will become easy as most of the CSS Preprocessor supplies vendor prefix tool. Stylus, a CSS Preprocessor has a library called NIB for achieving browser compatibility. Apart from being a vendor prefix tool, it analyzes and modifies syntax. So, we can do the coding and the tool makes it browser compliant.

Keep in mind when using CSS Preprocessor:

a) As the actual code is written somewhere and implemented throughout, in case of bug or rewriting a logic one has to locate where the actual code is written and that may be tricky in case of large application.
b) In case of seasoned developer working in a project, should understand that a preprocessor is being used and when that preprocessing is actually taking place.
c) What kind of task processor is used whether it is Grunt or Gulp or just saving the code will compile instead of running the task everytime.
d) When working in a large scale application, we may also occasionally feel that the application is over engineered.

Types of CSS Preprocessor:

Sass – Syntactically Awesome Style Sheet
http://sass-lang.com/


Less -
http://lesscss.org/


Stylus-
http://stylus-lang.com/


CSS Crush-
http://the-echoplex.net/csscrush/
Myth –
https://github.com/segmentio/myth/blob/master/Readme.md

___________

Follow our FB page @CreativeTechnocrayts

Subscribe to Creative Technocrayts and be a part of growing community.

Willing to colloborate with developers for projects. Glad to work with you!