Less CSS | Install | Operations | Functions | Mixins | Variables

What is Less CSS?

Less stands for Leaner Style Sheets. It is a dynamic pre-processor style sheet language. It enables customizable, manageable and reusable style sheet for website. Less is cross-browser compatible. It extends the functionality of CSS.

Less is a backwards-compatible language extension for CSS. It only makes a few convenient additions to the CSS language that is the reasons it can be learned so quickly.

Any web browser can understand CSS Pre-processor. It is a scripting language that extends CSS. It can get compiled into regular CSS syntax. It provides several functionalities such as variables, functions, mixins and operations that allow you to build dynamic CSS.

LESS was designed by Alexis Sellier in 2009. LESS is an open-source. The first version of LESS was written in Ruby; in the later versions, the use of Ruby was replaced by JavaScript.

LESS-CSS-MSA-Technosoft

 

Install Less

Less is written in JavaScript. It needs either Node.js or a web browser to run. We can use less in two ways:

  • Use with Node.js: ( Install Less npm)

Install node.js in your system first. Then, install Less on the server via NPM.

Step1: Install NodeJs in your system. For reference go through our NodeJS tutorial.

Step2: Open terminal and start installation of Less via NPM.

Step3: Type the following command

npm install -g less

Step4: This will give you access to the lessc command from any open terminal, enabling you to compile your .less files into vanilla CSS like this:

lessc styles.less styles.css

  • Use with the browser:

We can also use less in our web browser.

<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.2/less.min.js" ></script>

We have written all our stylesheet rules with LESS in styles.less. With the above line, our code will be transformed to plain CSS in styles.css. All that is left is to link this css file our HTML.

Less Features

Learner Style Sheet is an extension to CSS with more extra features. Dynamic features like variables, mixins, operations and functions are included in it. It uses .less extension. It makes code cleaner, optimized, reusable and reduce the overall time to create code base.

Let us have a brief look on each of these extended feature one by one:

Less Variables

Variables in Less are defined with symbol @. Variable assignment is done with a colon (:).the values of the variables are inserted into the output CSS document during translation. Variables make your code easier to maintain by giving you a way to control those values from a single location:

// Variables
@link-color: #428bca; // sea blue
@link-color-hover: darken(@link-color, 10%);
// Usage
a,
.link {
 color: @link-color;
}
a:hover {
 color: @link-color-hover;
}
.widget {
 color: #fff;
 background: @link-color;
}

In the above example, we have used variables to control values in CSS. We can also use Selectors, Property name, URL or @import statements to do the same.

Using Selector

// Variables
@my-selector: banner;
// Usage
.@{my-selector} {
 font-weight: bold;
 line-height: 40px;
 margin: 0 auto;
}

Using Property

@property: color;
.widget {
 @{property}: #0ee;
 background-@{property}: #999;
}

Using URL

// Variables
@images: "../img";
// Usage
body {
 color: #444;
 background: url("@{images}/white-sand.png");
}

Using @import

// Variables
@themes: "../../src/themes";
// Usage
@import "@{themes}/tidal-wave.less";

Mixins

Mixins allow embedding all the properties of a class into another class by including the class name as one of its properties, thus behaving as a sort of constant or variable. They can also behave like functions, and take arguments. CSS does not support Mixins. Mixins allow for more efficient and clean code repetitions, as well as easier alteration of code. Mixins can contain more than just properties, they can contain selectors too. It allows us to mix-in properties from existing styles. Here, we are allowed to mix-in class selectors and id selectors.

When we call mixins, the parenthesis are optional.

.a, #b {
 color: red;
}

.mixin-class {
 .a();
}

.mixin-id {
 #b();
}

The CSS code snippet for the same:

.a, #b {
 color: red;
}

.mixin-class {
 color: red;
}

.mixin-id {
 color: red;
}

Less Operations

LESS supports some arithmetical operations such as plus (+), minus (-), multiplication (*) and division (/). They can operate on any number, color or variable. It saves a lot of time.

@fontSize: 10px;
.myclass {
 font-size: @fontSize * 2;
 color:green;
}

Less Functions

Learner Style Sheet support functions as well. Functions map one-to-one with JavaScript code, allowing manipulation of values.

@red: #842210;
#footer {
 border-color: desaturate(@red, 10%);
}

In CSS the code snippet will be:

#footer {
 border-color: #7d2717;
}

Learner Style Sheet has several built-in functions as well. LESS maps JavaScript code with manipulation of values and uses predefined functions to manipulate HTML elements aspects in the style sheet.

We have discussed Built-in functions of Less in our next post. It includes:

  • Misc Functions
  • String Functions
  • List Functions
  • Type Functions
  • Color Definition Functions
  • Color Operation Functions
  • Color Blending Functions
  • ColorĀ  Channel Functions

Hope this article was helpful. We would love to hear from you. Must share your views in comments below.

Keep visiting Tech Blog to stay updated with all our latest technology blog posts.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.