What is preprocessor in css

CSS Preprocessors Explained

CSS Preprocessors are increasingly becoming a mainstay in the workflow of front end web developers. CSS is an incredibly complicated and nuanced language, and in an effort to make it’s usage easier, developers often turn to using preprocessors such as SASS or LESS.

CSS Preprocessors compile the code which is written using a special compiler. They then use that to create a CSS file, which can then be referenced by the main HTML document.

When using any CSS Preprocessor, you will be able to program in normal CSS just as you would if the preprocessor were not in place. The good thing is you also have more options available to you. Some, such as SASS, has specific style standards which are meant make the writing of the document even easier, such as the freedom to omit braces if you want.

Of course, CSS Preprocessors also offer other features as well. Many of the features offered are incredibly similar across preprocessors, with only slight variances in syntax. Thus, you can choose pretty much any one you wish, and you will be able to achieve the same things. Some of the more useful features are:

Variables

One of the most commonly used item in any programming language is the variable, something which CSS notably lacks. By having variables at your disposal, you may define a value once, and reuse if throughout the entire program. An example of this in SASS would be:

By declaring the SASS yourcolor variable once, it is now possible to reuse this same exact color throughout the entire document without ever having to retype the definition.

Loops

Another common item in languages are loops, something else CSS lacks. Loops can be used to repeat the same instructions multiple times without having to be reentered multiple times. An example with SASS would be:

This loop saves us from having the to write the same code multiple times to change the margin size.

If/Else Statements

Yet another feature which CSS lacks are If/Else statements. These will run a set of instructions only if a given condition is true. An example of this in SASS would be:

Here, the background color will change color depending on the width of the page’s body.

These are but a few of the major functions of CSS Preprocessors. As you can see, CSS Preprocessors are incredibly useful and versitile tools. Many web developers use them, and it is highly recommended to learn at least one of them.

More Information:

Источник

What are CSS preprocessors?

CSS preprocessors are added their functionality those not in pure CSS. This is a program those lets you generate CSS from the preprocessor’s unique syntax. Most CSS preprocessor will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on.

These features make the CSS structure Easier and more readable to maintain. Whenever using it, you must Be installed first a CSS compiler on your web.

When you use it to compile on the development environment, and then upload compiled CSS file to the webserver. CSS Preprocessor becoming a mainstay in the workflow of front-end web developers. CSS is a complicated and subtle language, and to make its usage easier developers are turning to use preprocessors such as SASS or SCSS. It has specific style standards which make the writing easier for the document. Like SASS as the freedom to forget braces if you want.

They provided offer other features as well, Many of the features are provided by the incredible preprocessor. The only a slight variance in syntax. That, you can choose as you wish, and you will be able to achieve the same things.

Why do we use CSS Preprocessors?

A CSS Preprocessor is a highly valuable tool for full-stack developers and frontend developers who work on huge projects. It makes code more readable and easy to distribute.

Some most popular CSS preprocessors:

SASS:

The SASS full form is Syntactically Awesome Style Sheets, SASS is stylesheet language. when SASS compiled to CSS. SASS allows using their variable, nested rules, mixins, functions, etc. these all are fully compatible with CSS syntax. SASS makes it easy to share the design of projects and it keeps well-organized large size stylesheets.

LESS:

The LESS full form is Leaner Style Sheets.LESS is a backward-compatible language extension for CSS.using a javascript tool to convert LESS style to CSS style.

CSS Preprocessor in Action:

Variables :

Variables are commonly used in any programming language, which especially lacking in CSS. By having variables at your disposal, you may define a var once, and reuse its value across the entire program… if you made a variable for any CSS value it will be reusable in the entire program. You want to change some value in an entire program then you only change in variable and you got the changes.

you declared a variable once and now it’s possible to use the hall program without you don’t retype the definition.

Mixins :

Mixins are prewritten set of CSS rules and plug it inside of any CSS element’s styling. This is excellent for cutting down on repeated code.

Loops :

The Loops allow you to repeat the same tasks multiple times without having to re-enroll each time.

colors = 'red' 'green' 'blue' 'yellow' for color in colors background: unquote(color)

loops are saved time and code to write the same code multiple times to change some value of CSS properties.

If/Else Statements :

This will run a set of orders only if a given condition is true.

Here, the background image will be changed on the width of the page’s body.

Nesting :

Devs are frustrating when they are can’t visualize nested CSS Elements, that are provided by the preprocessor.

Color Functions:

Preprocessors have broad in-built functionality for altering color dynamically.

saturate($color, $amount) desaturate($color, $amount) lighten($color, $amount) darken($color, $amount) adjust-hue($color, $amount) opacify($color, $amount) transparentize($color, $amount) mix($color1, $color2, [$amount]) grayscale($color) complement($color)

Imports :

This functionality is very useful when you work on a large project and import multiple CSS files.

@import "style/style.scss"; @import "style.css";

Math :

Arithmetic operations are allowed in the CSS Preprocessor without the use of the calc() function.

Extends :

You make a list of CSS rules and you want to style another element, just use extend keyword and fully style their elements.

Источник

What is a CSS Preprocessors & Why Use Them

A CSS preprocessor is a scripting language that extends CSS and is compiled into regular CSS syntax. A browser can only understand CSS, which at times may not be enough to write clean and reusable rules. Using only CSS, the designer/developer is not able to reuse a collection of rules in multiple selectors which had unclear pieces of data across a stylesheet. To overcome most of these limitations, the concept of a preprocessor was created. It offered an advanced way of writing CSS that extends the basic functionalities. This advanced code is later compiled as normal CSS code that the browser will understand.

What is the difference between popular preprocessors?

Sass vs LESS vs Stylus

There are three main preprocessors – Sass, LESS and Stylus. Each CSS preprocessor has its own unique way of accomplishing the same task, even though about 80% of Sass, LESS and Stylus are the same. The other 20% is made up of minor differences in the advanced usage. All three preprocessors allow you to create variables, media queries, mixins, nesting, loops & conditionals and importing. All three let you abstract key design elements, use logic and write less code, which makes them all able to give you an advantage over basic CSS.

The differences (the 20%)

Sass

Sass was built on Ruby and has frameworks like Gumby and Foundation. Sass also has great mixin libraries such as Compass and Bourbon. A few differences Sass has versus LESS and Stylus are @extend, @media and @content. @extend lets you share a set of CSS properties from one selector to another. @media lets you use media queries right inside of the nesting allowing you to target specific screen sizes. With @content, it is possible to pass a block of styles to the mixin for placement within the styles included by the mixin. The styles will appear at the location of any @content directives found within the mixin.

SCSS

SCSS is like Sass, but is closer to regular CSS. SCSS is fully CSS compliant, meaning you can import regular CSS into a SCSS file, and it will work immediately. This is nice if you’re borrowing something from CSS, and it’s clean and well written, and it’s not in your best interest to take the time to re-write everything.

LESS

Less runs inside Node Javascript, in the browser. The main difference between LESS and other CSS preprocessors is that LESS allows real-time compilation via less.js in the browser. With Sass or Stylus, when creating a mixin you create a group of CSS declarations, but in LESS you embed the mixin into the property of a class.

Stylus

Built on node.js, Stylus really strips down all of the extra characters that clog up your CSS. Stylus allows freedom in terms of syntax – you can omit braces, semicolons and even colons. Stylus incorporates powerful in-language functions and conditionals.

5 Reasons to use a CSS Preprocessor

It will make your code easier to maintain You will be able to create variables, mixins and functions that are declared at the beginning of the document which will make simple changes, like a color, easier to maintain. For example, you declare a variable for your primary color and secondary color:

$primary_color: #346699; $secondary_color: #769bc0;

font-family: Tahoma, Geneva, sans-serif; font-weight: bold; font-size:20px; text-transform: uppercase; color: blue;

font-family: Tahoma, Geneva, sans-serif; font-weight: bold; font-size:16px; text-transform: uppercase; color: blue;

font-family: Tahoma, Geneva, sans-serif; font-weight: bold; font-size:20px; text-transform: uppercase; color: blue;

Источник