Css Preprocessor

What is Preprocessor ?

Preprocessor is a program that processes its input data to produce output that is used as input to another program

What is Css Preprocessor ?

CSS preprocessors take code written in the preprocessed language and then convert that code into the same old css we’ve been writing for years.

Three Most Popular Css Preprocessors
1) Sass
2) LESS and
3) Stylus

Why Programmers Preferred Css Pre Processor ?

In CSS have many Limitations.It’s really as simple as that. CSS is great, but it doesn’t always let us do everything we’d like.

But in preprocessed language can give you more functionality than css as long as it eventually makes sure everything is output as css and works in a browser like we expect.

For example many developers want more abstraction than css gives us by default.

One goal of css has been to keep it simple so anyone can quickly pick up the language and learn.

However that focus also limits what css can do and developers don’t much like limitations.

We want variables and if the language won’t gives it to us, we’ll find a way to give it to ourselves.

Preprocessors offer more than variables of course. They can offer whatever they want as long as the resulting css file they produce works as ordinary css.

Video Reference for Css Preprocessor

What is Less.js?

Less.js is a CSS pre-processor, it means that you will be able to write your in style using the Less pre-processor languages in a *.less file, then Less.js will compile it into pure CSS. CSS pre-processor comes with a lot of powerful features such as: variables, mixins, nested rules, operations, imports and a lot more.

Features for Less.js

1)Nested syntax
2)Ability to define variables
3)Ability to define mixins
4)Mathematical functions
5)Operational functions (such as “lighten” and “darken”)
6)Joining of multiple files

LESS looks just like CSS, except for a bunch of extra features. The compiler is what turns that LESS code into standard CSS that a Web browser can read and process.

For more reference check from official site - http://lesscss.org/

Video for What is Less.js?

https://www.youtube.com/watch?v=iTjG4jS_n08

Shake Effect using CSS

HTML Code

CSS Code

.shake {
display: block;
position: fixed;
color: rgb(255, 255, 255);
font-family: proxima-nova, Arial, sans-serif;
font-size: 16px;
cursor: pointer;
padding: 10px;
z-index: 100000001;
bottom: -12px;
right: 50px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 16px 0 rgba(0, 0, 0, .15);
box-shadow: 0 3px 16px 0 rgba(0, 0, 0, .15);
margin-bottom: 26px;
animation: shake 2s cubic-bezier(.36, .07, .19, .97) both;
background:url(https://queryhomebase.appspot.com/images/tech-logo.png) no-repeat;
width:100px;
height:18px;
background-size:contain;
}
.shake:hover {
animation: none;
}
@-webkit-keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}

Sample Implementation

https://codepen.io/anon/pen/vPoPER

Pulse Animation using CSS

HTML Code

CSS Code

.pulse {
margin:100px;
display: block;
width: 22px;
height: 22px;
border-radius: 50%;
background: #cca92c;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 2s infinite;
}
.pulse:hover {
animation: none;
}

@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
box-shadow: 0 0 0 10px rgba(204,169,44, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
box-shadow: 0 0 0 0 rgba(204,169,44, 0);
}
}

Codepan Link

https://codepen.io/anon/pen/xBvKww

Hope it helps

Css Preprocessor

Your comment on this post:

Related Articles

What is Less.js?

Features for Less.js

Video for What is Less.js?