Installing and using LESS.(PART- 2)

Here we are about to understand the installation of the LESS. This lesson also includes the details about the different features of LESS. These all the details are divided into 3 different parts.

Now, In a moment we are about to start with part-2

Operations


This is about what you would expect: using fixed numbers or variables to perform mathematical operations in your styles.

@base_margin: 10px;
@double_margin: @base_margin * 2;

@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;


For the record, I am aware that I could have also divided by four to get the @quarter_page variable, but I wanted to illustrate that the parentheses rule from the “order of operations” also applies. Parentheses are also required if you’re going to perform operations within compound properties; for example,

border: (@width / 2) solid #000.
Sass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units. Sass can work with unrecognized units of measurement and print them out. This feature was apparently introduced in an attempt to future-proof the library against changes made by the W3C.

/* Sass */
2in + 3cm + 2pc = 3.514in

/* LESS */
2in + 3cm + 2pc = Error



Color Functions

Suppose you use a standard blue throughout your styles, and you want to use this color for a gradated “Submit” button in a form. You may be using photoshop or any other tool to find the lighter or darker shades of you theme.but  you can also use the color function in LESS.

@blue: #369;

.submit {
padding: 5px 10px;
border: 1px solid @blue;
background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/
background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}

The lighten function literally lightens the color by a percentage value. In this case, it will lighten the base blue by 10%. This method enables us to change the color of gradated elements and any other elements with that color simply by changing the base color itself. This will be immensely helpful in themes. Plus, if you used a parametric function, like the ones listed above, you could alleviate some of that browser-prefix tedium with something as simple as


 .linear-gradient(lighten(@blue), @blue, 100%);.


 Either way, you get an effect that’s rather nice:

Namespaces


As many of you are fammilier with the purpose of Namespaces, this adds up another level organization in you CSS.Grouping the commnly used style and then pick from them. For instance, We have have created a group of styles called defaults, we could pull from this group when we come across an element that needs it.

#defaults {
.nav_list () {
list-style: none;
margin: 0; padding: 0;
}
.button () { … }
.quote () { … }
}
Later, in our code, if we come across a ul element within a nav element, we would know that we’ll need our default style. So, we can simply call it, and it will be applied.

nav ul {
#defaults > .nav_list;
}


String Interpolation

String values can also be used in variables and called within styles via @{name}.
@base_url = 'https://www.sns26.blogspot.in.com';
background-image: url("@{base_url}/images/background.png");

Some more feature details are packed in other part please use the link down below.

If you want to go further links of the other two parts are
Installing and using LESS.(PART- 1)
Installing and using LESS.(PART- 3)

Other links related to LESS are here
Introduction
Difference between LESS and CSS

If you like this  please share and like the blog  and subscribe to the blog also.

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