Adsense_TOP

Friday, 9 September 2016

Installing and using LESS.(PART- 3)

Hello readers, I am back here witht the lasst part of installation of the LESS.
This lesson also includes the details about the different features of LESS.

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



Escaping

Want to include the non valid css sytax or text that LESS doesn't recognize. LESS has a solution for that also.It may be some crazy Microsft Hack or may be some easter egg you want to place.You can use escaping To avoid throwing errors and breaking LESS.

.class {
filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";
}

/* Will actually be outputted like this: */
.class {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);
}


Importing

Importing is pretty standard, too. The standard @import: 'classes.less'; works just fine. If, however, you’re importing another LESS file, then the file extension is optional, so @import 'classes'; would work as well. If you want to import something without LESS processing it, you can use the .css extension (for example, @import: 'reset.css';).


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

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

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

Wednesday, 7 September 2016

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 video please share and like the blog  and subscribe to the blog also.

Installing and using LESS.(PART- 1)

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 # different parts.

Now, In a moment we are about to start with Part-1

Installation 

Including LESS in something that you’re building is about as easy as it gets:
Go get yourself a copy of less.js;
Create a file to put your styles in, such as style.less;
Add the following code to your HTML’s <head>;


<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>


Note the rel attribute of the link. You are required to append the /less to the end of the value in order for LESS to work. You are also required to include the script immediately after the link to the style sheet. If you’re using HTML5 syntax, and remember to add type="text/ and the type="text/javascript".


There’s also a server-side version of LESS. The easiest way to install LESS on the server is with Node Package Manager (NPM).

Variables

A screenshot illustrating the transition from 3 shades of blue

Transition from light_blue to blue to dark_blue

Variable, they are best friends.In the event that you’ll be using information repeatedly (in this case, a color), setting it to a variable makes sense. This way, you guarantee yourself consistency and probably less scrolling about looking for a hex value to copy and paste. You can even do some fun little adding and subtracting of hex values that you want to render. Take this example

@blue: #00c;
@light_blue: @blue + #333;
@dark_blue: @blue - #333;


If we apply these styles to three div's, we can see the gradated effect created by adding and subtracting the hex values to and from the original blue:

The only difference in variables between LESS and Sass is that, while LESS uses @, Sass uses $. There are some scope differences as well, which I’ll get to shortly.

Mixins

On occasion, we might create a style that’s intended to be used repeatedly throughout the style sheet. Nothing is stopping you from applying multiple classes to the elements in the HTML, but you could also do this without ever leaving your style sheet, using LESS. To illustrate this, I have pasted some sample code that one might use to style two elements on the page.

.border {
border-top: 1px dotted #333;
}

article.post {
background: #eee;
.border;
}

ul.menu {
background: #ccc;
.border;
}


A screenshot illustrating two elements that share a border style
Both the article and the unordered list share the border style.
This will give you something similar to what you would get if you had gone back to the HTML file and added the .bordered class to the two elements there — except you’ve done it without leaving the style sheet. And it works just as well:

With Sass, you declare @mixin prior to the style to identify it as a mixin. Later, you declare @include to call it.

@mixin border {
border-top: 1px dotted #333;
}

article.post {
background: #eee;
@include border;
}

ul.menu {
background: #ccc;
@include border;
}

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

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

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

Monday, 5 September 2016

Introduction to LESS.

Introduction To LESS

I am using CSS from more then 5 years. When i started using LESS,it was a better way to write the CSS in the form of Code including variable, functions, and other programming contracts.The color palette providing a fixed boundary which helps me to prevent going crazy with colors and deviating my specified styling. 


Some Features of Less are as Follows.


1. Mixins – Classes for classes.
2. Parametric mixins – Classes to which you can pass parameters, like functions.
3. Nested Rules – Classes within classes, which cut down on repetitive code.
4. Operations – Math within CSS.
5. Color functions – Edit your colors.
6. Namespaces – Groups of styles that can be called by references.
7. Scope – Make local changes to styles.
8. JavaScript evaluation – JavaScript expressions evaluated in CSS.

If you want to read about LESS more here(wikipedia) or here(lesscss.org)


Other Blogs by me on LESS are below feel free to provide you feedback.

Installing and using LESS.(PART- 1)
Installing and using LESS.(PART- 2)
Installing and using LESS.(PART- 3)
Difference between LESS and CSS

If you have any queries and need any help please comment below, If you like it please share it.

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.