How to use Pattern Matching with Mixin in Less

Pattern matching with mixins is where mixin is defined several times, with slightly different values, and the mixin that is finally used when the file is compiled is decided by the arguments being used. It looks confusing a bit let’s try to make it understandable. A good example of usefulness of pattern matching with mixins…

How to use Color Functions in Less

What Color functions do in Less? Less provides different range of Color functions to use, these functions provide functionality to increase or decrease lightness or saturation of colors, increase or decrease fade in, fade out of colors, and to increase or decrease a color by specified number of degrees. Additionally Less provides the fancy functionality…

How to use Variables in Less

In Less we can use a variable following by an “@” symbol, for example if we have to use a font-family in our css and that family would be required again and again. We generally have font-family like shown below: h1 { font-family: 'open sans', sans-serif; } Using a property once or twice is perfect…

How to use Nesting in Less

What is the meaning of nesting in Less programming Nesting in Less programming means “clustering of statements inside other statements and so it forms a group of related code.” Simply when we add a code snippet and add another code inside that code snippet is simply nesting. We always write CSS code like shown below:…

How to use Parametric Mixins in Less

In previous lesson we learned about standard mixins in Less, while today we’ll be continuing our series on mixins but keeping our focus towards parametric mixins. Parametric mixins are same like standard mixins, only difference is that parametric mixins take parameters like functions in javascript or any other programming language. After providing parameters to our…

How to use Math Functions in Less

Below given are some math functions which Less provide to use Today we’ll be discussing some of the math functions which Less provides to operate on numerical values. The functions which Less provides to work with are given below: 1: Round Function 2: Floor Function 3: Ceil Function 4: Percentage Function What these math functions…

How to use Operations in Less

Operations in Less Less provides all simple mathematical operations which we usually use in our daily routines like addition, subtraction, multiplication and division etc. Operations are very useful when we do use our variables with care, then it saves a lot of time and we do feel as we are working in our simple mathematics.…

How to use Pseudo Classes in Less

If you worked for a while in CSS you may have used pseudo classes, and here is the general structure of pseudo class usage in CSS shown below: li { float: left; padding: 5px; background: black; } li:hover { background: orange; } It’s very basic example of pseudo class usage in CSS, the purpose is…

How to use Mixins in Less

Today we’ll be exploring another very important and powerful feature of Less, mixins. Mixins at very basic level provides us the functionality to mix the values of one class in to another class without any special syntax, which makes it really handy and time saving, avoiding duplication and making our css files more organized. Let’s…

How to use Basic Features in Less

Variables Variables are fundamental in any language, and we discussed completely about variables in variables importance in less chapter. You may go and grasp the ideas if you been not there earlier. Nesting Nesting is the most important feature of less once it comes to grouping of code. As we already discussed Nesting and it’s…
Menu