Difference between Less and CSS ?

Many of you may be familiar with the concepts of CSS. In CSS we can not write loops ,logic or many other programming constructs such if-else etc.Thus we can say css is a static language.

On the other hand LESS or (SCSS) are CSS pre-processors. You can think of it as CSS with programming constructs, which help you in making your code modular and reusable.
One possible use case is you can develop a theme system with LESS, its very easy by using variables for colors etc and changing the variable values to create a new theme for your webpage.

Take a look at this example taken from Getting started | Less.js.


@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
color: saturate(@base, 5%);
border-color: lighten(@base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}


Compiles to


.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}



Also as a web engineer, LESS is a blessing in disguise.

1. It makes you more effective and efficient.
2. Code can be divided into modules and can easily be modified.
3. You can reuse many of the redundant parts of the code ex. you can write a function for giving rounded edges to elements, etc.

Do give it a try, you will definitely like LESS.
If any queries please write down in the comments if you get your answers please like and share.


Location: Frankfurt, Germany

Comments

Post a Comment

Popular posts from this blog

How to use lamda expression for updating using LINQ

This is small example showing how we use lamda expression in the programming section , Generally we use lamda expression when working wiht LINQ , or the classs of list type where need to get the data based on any where clause. public Boolean Update(string id) { int flag = 0; string str = DateTime.Now.Day + "-" + DateTime.Now.Month + "-" + DateTime.Now.Year; foreach (var c in obj.Task_Details.Where(x => x.task_no == id)) { c.task_date = str; flag = 1; c.status = "Complete"; } obj.SaveChanges(); if (flag == 1) { return true; } else { return false; } }
Read more

using session for login and logout in asp.net

firstly open the "Global.aspx". then create a function there  protected void Application_Start() { //we give the name of the session  here and declare it null ..username is the name of the session //we can change it according to our needs Sesssion["username"]=""; } now we can create the function where we are login as function boolean login( string username, string password) {   // firstly we match the login details from the database. if(username == logincredintialfromdb && password ==logincredintialfromdb ) { // the values are matched here so are assiging the value to the session variable Session["username"]= username ; return true; } else { return false; } }
Read more

How to post data in MVC using form collection for Beginners.

Here we can simply put the data into the form tag and give each component an name .We are creating a login form using the MVC Architecture. <form method="post" action="Name_of_the_function> <input type="text" name=username id=username> <input type="password" name =pass id=pass> <input id=submit type="submit"> on controller [httppost] public ActionResult Name_of_the_function(formcollection form) { string str=form["username"]; string str1= form["pass"]; }
Read more