What is “Less” CSS Preprocessor? When, Why and How to Use “Less”?
To understand the functioning of a preprocessor, you must know how to write basic CSS codes in the first place. So, let’s start by taking a brief look at CSS first, then the role of a preprocessor, and finally, about the “ Less” CSS preprocessor.
As HTML takes care of the structure of the page, CSS takes care of the design aspects of the HTML elements. So, you can style every element of HTML, including the body content (text and images), headers, and footers.
You can write inline CSS codes to the HTML elements then and there itself. Below is a simple illustration of how to do it.
<h1 style=”text-align:center;”>TechAffinity</h1> <p style=”text-align:center;”>Top IT Services Company in Tampa</p> <p style=”text-align:center;”>#BeFutureReady</p>
However, you can also choose to maintain a separate style sheet to design your HTML elements using CSS selectors.
What is a CSS Preprocessor?
CSS preprocessors have in-built unique syntax using which one can generate CSS. With abundant CSS preprocessors available in the market, a wide variety of features are bundled like mixin, nesting selector, inheritance selector, etc. With these features, it is easy to maintain the CSS structure, which helps in reading and understanding the codes of a larger web application.
The main difference between a plain CSS code and a CSS Preprocessor is that in plain CSS, your codes are static, and in preprocessors, you can write conditional codes to dynamically apply styles.
Also Read: Advantages of CSS Preprocessors What is “Less” CSS?
“Less” is an acronym for Leaner Style Sheet. It is a dynamic preprocessor style sheet language. When compiled, “Less” generates CSS codes and can be run either on client-side (modern browsers only) or server-side (with Node.js and Rhino). “Less” adds certain features and functionalities to CSS, such as variables, mixins, operations, and functions. These features let you develop an effective design layout that is both minimal and flexible. Moreover, the “Less” CSS preprocessor codes are compatible across a range of web browsers.
Often, writing lines and lines of plain CSS can be exhausting as you face vague styling issues. Hence, while working on a larger project, try to keep your CSS code as little and clean as possible. For that, you would be requiring the “Less” CSS preprocessor, and you would be saving a lot of your time. Just like frameworks, it is better to know and understand the CSS language before getting your hands on any preprocessor.
So, what are the differences between “Less” CSS & Plain CSS? Why Should you use the “Less” CSS Preprocessor? Below are some of the features available exclusively on the “Less” CSS preprocessor.
1. Variables
Just like any other programming language such as JavaScript, Java, Python, etc., you can declare variables in “Less” CSS preprocessor and can use it wherever you want. It is mandatory to include “@” as a prefix to declare variables. Let’s declare a variable as @brand-color and use it on two HTML elements to set the background color.
“Less” Code
You can declare variables in a common location and use them throughout your web app development project. Declaring a variable like brand-color will help you easily remember it and apply the brand color on elements wherever required.
@brand-color: #EF592B;
@font-color: #000000;
div {
background-color: @brand-color;
}
h3 {
color: @font-color;
Compiled Equivalent CSS Code
}
div {
background-color: #EF592B;
}
h3 {
color: #000000;
2. Mixins
Mixins are similar to variables with one extra advantage. You can define an entire class name and set various properties such as font color, font size, padding, margin, etc. You can call these class names to all the necessary pages without repeating the same code over and over again.
In other words, with Mixins, you can include a host of properties from one rule-set into another rule-set. Also, you can use these properties in other rule-sets by including the class name wherever you desire to.
“Less” Code
The properties of the “.dimensions” class will now appear in both “.outer-wrapper” and “.inner-wrapper.” (Note that you can also use “#ids” as mixins.)
#divAbout {
color: #EF592B;
background-color: #000000;
}
.dimensions(@height: 50px; @width: 30px) {
height: @height;
width: @width;
#divAbout;
}
.outer-wrapper {
.dimensions(25px; 65px);
}
.inner-wrapper {
.dimensions();
Compiled Equivalent CSS Code
}
#divAbout {
color: #EF592B;
background-color: #000000;
}
.outer-wrapper {
height: 25px;
width: 65px;
color: #EF592B;
background-color: #000000;
}
.inner-wrapper {
height: 50px;
width: 30px;
color: #EF592B;
background-color: #000000;
}
3. Operations
With “Less” CSS preprocessor, you are allowed to do certain arithmetic operations within the codes to extract desired values using multiplication, division, addition, and subtraction. These arithmetic operations are not limited only to numbers, but also on colors and variables.
“Less” Code
You can define the static color, height, and width, and then assign the height and width values for the “.inner-wrapper” element to half of their original value. Then, you can set a different color by using an add operation.
@prime-color: #00ff00;
@width: 40px;
@height:40px;
.inner-wrapper {
width: @width / 2;
height: @height / 2;
color: @prime-color + #0000ff;
Compiled Equivalent CSS Code
}
.inner-wrapper {
width: 20px;
height: 20px;
color: #00ffff;
}
4. Functions “Less” Code
The “Less” CSS preprocessor offers a bunch of functions that allow you to tweak colors, do the math, and manipulate strings. Using them on your stylesheet is quite simple. Below is an illustration where the prime color and padding are defined. With the help of functions, you can lighten the color and amplify the padding value.
@prime-color: #0000ff;
@padding: 4px;
div {
color: lighten(@prime-color, 10%);
padding-right: round(@padding);
padding-left: round(@padding);
padding-top: ceil(@padding) * 1.25;
padding-bottom: ceil(@padding) * 1.25;
background-color: rgb(239, 89, 43);
Compiled Equivalent CSS Code
}
div {
color: #3333ff;
padding-right: 4px;
padding-left: 4px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #ef592b;
}
Leveraging these methods, you can mix a prime color with other colors to get the desired color output, which can be used throughout your web projects. As it is quite similar to JavaScript, it helps in simplifying the implementation of logical functionality within the stylesheet.
As the experts at TechAffinity’s Front-end Development team have hands-on experience in various CSS preprocessors, the pace of web app development is relatively high. Feel free to drop your queries at media@techaffinity.com or get in touch by scheduling a meeting.
Originally published at https://techaffinity.com on November 7, 2019.
