LESS versus CSS

Introduction

Dealing with a large volume of plain CSS can be annoying when you face weird styling issues. When working with complex web applications, keep your CSS code as clean as possible. That’s why you need the LESS preprocessor to simplify your work and save time. However, you should also have CSS knowledge and an understanding of its basic architecture before you start to work with any of the preprocessors.

In this blog post, I identify the differences between LESS and CSS and the benefits of LESS over CSS.

What is a CSS Preprocessor?

A CSS preprocessor is a scripting language that generates a CSS syntax equivalent from another type of code, making it readable to web browsers. The styles applied through basic CSS will always be static throughout the application; whereas preprocessors allow you to write conditional code snippets to dynamically apply styles when required.

Also, the preprocessor allows you to maintain a standard code structure, presenting your stylesheets in a more readable way, so you can keep track of the styles of larger web applications.

CSS

If you are a new front-end developer, you must first know how to write basic CSS to better understand the workings of a preprocessor, as the preprocessor itself will compile and generate CSS in its final stage.

A beginner chooses CSS to customize the appearance of HTML elements because of its simplicity and basic style syntax. CSS allows you to easily control various parts of web pages—like headers, footers, content—in a way that’s easily understood.

You can either define static CSS styles inline by setting them as attributes of an element, or you can keep them in a separate CSS file and refer to them specifically when they need to be applied to HTML elements.

LESS

LESS, also known as Leaner Style Sheets, is a dynamic CSS preprocessor that compiles and generates CSS during runtime on the server or client side. LESS has advanced features—like variable substitutions, mixins, operations, combining functions—that help design a layout in a smarter way, supporting minimal yet flexible code usage.

You can even reuse the defined styles throughout the code. Moreover, it is broadly compatible with different browsers.

Why LESS over CSS?

There are many benefits of LESS that make it comparatively better than CSS. I’ll walk you through some of its important features: variables, mixins, operations, nesting, and functions.

Variables

Similar to how you define variables in other programming languages, you can set a variable in LESS and access it throughout your program. All variables should be prefixed with the @ symbol. They can store any type of value, such as selectors, property names, colors, dimensions, URLs, font names, etc.

Here, I’ve defined a variable as @bg-color and reused it on two HTML elements to set the background color. You can even define such variables in a common location and reuse them in your entire application wherever you want.

LESS Code

@bg-color:  #3FFD45;

div {
   background-color:  @bg-color;
}
p {
   background-color:  @bg-color;
}

Compiled Equivalent CSS Code

div {
  background-color: #3FFD45;
}
p {
  background-color: #3FFD45;
}

You can learn more about variable usage in LESS from the Variables section at LESSCSS.org.

Mixins

A mixin is like a variable, but the only difference is that it represents an entire class. You can group a set of properties into a specific class name and call them in necessary places to avoid repeated code definitions.

It also acts as a function and accepts arguments. This works by assigning those argument values to the group of properties defined within the rule set.

On the following code, I defined the mixins with a group of properties for ID and class selectors (parametric mixins) and made a call to those mixins from another rule set.

LESS Code

#divContent{
   color: #F3455A;
   background-color: #3FFD45;
}
.responsive-div(@height: 20px; @width: 40px) {
   height: @height;
   width: @width;
  #divContent;
}
.outer-div {
   .responsive-div(50px; 80px);
}
.inner-div {
   .responsive-div();
}

Compiled Equivalent CSS Code

#divContent {
  color: #F3455A;
  background-color: #3FFD45;
}
.outer-div {
  height: 50px;
  width: 80px;
  color: #F3455A;
  background-color: #3FFD45;
}
.inner-div {
  height: 20px;
  width: 40px;
  color: #F3455A;
  background-color: #3FFD45;
}

For more information about mixins in LESS, refer to the Mixins section from LESSCSS.org.

Operations

You can also perform basic arithmetic operations in LESS—such as addition, subtraction, division, and multiplication—on numeric values, colors, and variables.

In the following example, I initially define the static width and height variables, and then I assign the height and width values for the .inner-div element to half of their original value. I also set a different color by using an add operation.

LESS Code

@base-color: #3FFD45;
@width: 50px;
@height:50px; 

.inner-div {
   width: @width / 2;
   height: @height / 2;
   color: @base-color + #2EED54;
} 

Compiled Equivalent CSS Code

.inner-div {
  width: 25px;
  height: 25px;
  background-color: #6dff99;
}

Nesting

To make your code clearer when dealing with a larger volume of CSS, use the LESS nesting feature. You can define the stylesheet in a hierarchical structure by nesting a selector within another selector.

In the following example, I define two div elements with different height values but the same background color.

LESS Code

div{
  height: 500px;
  background-color: #3ffd45;
  .inner{
      height: 300px;
      color: #000000;
  }
} 

Compiled Equivalent CSS Code

div {
  height: 500px;
  background-color: #3ffd45;
}
div .inner {
  height: 300px;
  background-color: #3ffd45;
  color: #000000;
}

To know more about parent selectors in LESS, refer to the Parent Selectors section at LESSCSS.org.

Functions

There are also predefined functions available in LESS, allowing you to map JavaScript code to manipulate values, transform colors, and much more.

In the following example, I define a div element and customize it using math color operations and color definition function concepts.

LESS Code

@base-color: #8765EF;
@padding: 3.5px;

div{
color: darken(@base-color, 30%);
padding-left: round(@padding);
padding-right: round(@padding);
padding-top: ceil(@padding) * 2;
padding-bottom: ceil(@padding) * 2;
background-color: rgb(45, 100, 87);
}

Compiled Equivalent CSS Code

div {
  color: #3712a9;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: #2d6457;
}

By using these predefined functions, you can easily derive colors from a base color and maintain the same color family throughout the web page. Since it’s similar to JavaScript, this method makes defining logical functionality within the styling section easy.

To know more about functions in LESS, refer to the Functions section at LESSCSS.org.

Conclusion

There are many other preprocessors on the market, like SASS and Stylus; however, one should master the basics of CSS before using preprocessors. CSS and LESS are not completely different, but LESS does offer additional features that make your projects easier. More than that, the compiled version of LESS is actual CSS. Feel free to share your feedback as comments to this blog.

Syncfusion offers about 65 lightweight, modular, responsive components to make web application development as easy as possible. Check out our components for different platforms from the following list:

• ASP.NET Core
• ASP.NET MVC
• Angular
• Blazor
• React
• Vue
• JavaScript

If you need assistance, feel free to contact us through our support forum, feedback portal, or Direct-Trac support system.