CSS Preprocessors

We all are well aware about the maintenance of (CSS) Cascading Style Sheets for complex systems or for larger projects is quite challenging. Re-usability generally lags through CSS. Thus, a new spec is being introduced to this regard. Different approaches are being used different Developers to write better & customized CSS for their projects.

We can see this from few of the examples.

  • Writing definitions based on the modules of multiple files and making them import to one main file

This approach facilitates in limiting the problems occurs with components but that not at all solves the problems related to repetitions and with maintainability.

 

For instance: @import ‘./common/grid/app-grid.less';

@import ‘./less/variable.less':

@import ‘./less/setup.less':

@import ‘./less/reports.less':

  • Object-oriented CSS Early implementation

 

This approach focuses on two or more classes that were applied to an element that increases the re-usability but unfortunately decreases the maintainability.

 

For instance: .parentheader, .subheader, {

padding:10px :

background-color:blue:

margin:10:

border : 1px solid black:

}

As the technology upgrades, new and new specs are introduced to CSS as well as to html. Many of the vendors are releasing the libraries by following the basic rules and with their special owned prefixes. Because of its vendor specific properties, the styles vary many of the times across multiple browsers. Therefore, we can analyze the advantage to merge multiple vendors in order to obtain a single result among all browsers.

CSS Preprocessors: What is it?

It is a kind of scripting language that leads to CSS extension via operators, variables, functions, interpolations, mixins and also other such usable assets that are being compiled to regular CSS syntax.

 Features

 

  1. Variables: Variables pursues a special feature to store the strings that can be used as and when required. They usually form a reference to style sheet and to the specific string. It is variable by its name only rather they pursue the quality of constant value that remains stable over the course of the style sheets. Majorly variables are used to store elements like colors, width, size & font etc.

           For instance: /* main-header*/

@white: #FFFFFF

@header-background: #34B2E6

@header-color: @white

@notification-background: #fd6965

@header-height: 76px

 

  1. Nesting: Nesting is being highly appreciated through CSS preprocessors. As per DRY (don’t repeat yourself) principle, it is highly advisable that nesting should be used with preprocessors. Nesting is used to promote the code in a neat and clean manner. Nesting assures that your code seems neat & tidy all the time.

For Instance : ul {

font-size: 12px;

top: 13px;

left: 5px;

height: 150px;

overflow-x: hiddent;

li {

a{

color: black;

input {

margin-top: 0px;

}

}

}

}

 

  1. Mixins: These are desfined often as being declarations of CSS that generally have been added to the reusable sets & often contain parameters. These mixin sets can be mixed or included into other rules. Basically mixins preferred to be used to prefix vendor parts styling and therefore they seems good for vendor styling prefix for a larger chunks. Mixin is recognized after CSS selector & later on these styles within the mixin being defined, applied to the selector.

 

For Instance :

body {

color: #333;

background-color: #fff;

}

@mixin .contrastAdjust {

}

.contrastAdjust p {

color: #fff;

}

.sale {

background-color: red;

include: .contrastAdjust;

}

.help {

background-color: blue;

include: .contrastAdjust;

}

 

  1. Extends: These are generally used to share a generic definitions along with the selectors instead of copying in it. The extended selectors there being grouped in to compile CSS and represent in chainable form.

For Instance:      .foo{

Color: red;

}

.bar {

&:extend(.foo);

}

  1. Operations: These are used to multiply, add, subtract & divide the values that are specific. Both Sass & LESS perform the mathematical command in a well way. Sass is preferable because it performs the functionalities px & % in a smarter way.

 

  1. Functions: It is treated as an essential part of CSS Preprocessors. Majorly used functions are unit conversion, math functions, list functions & string functions etc.

 

  1. If/Else Statements: Control expressions & directives helps in building similar style of definitions to match as per the variables & conditions.

 

To request a quote click here