Why you Should use “Less” CSS Preprocessor? What is the Difference Between “Less” & Plain CSS?
Author : John Prabhu 7th Nov 2019
To understand the functioning of a PreProcessorPreprocessorA preprocessor is a program that processes its input data to produce output that is used as input to another program. , you must know how to write basicCSSCSSCascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. 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 “LessLessLess is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets and run on the client-side or server-side. ” CSS PreprocessorCSS PreprocessorCSS preprocessors are those which have in-built unique syntax using which one can generate CSS. With abundant CSS preprocessors, 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..
As HTMLHTMLHypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. 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 CSSInline CSSInline CSS refers to CSS found in an HTML file. It is found in the head of a document between style tags.codes to the HTML elements then and there itself. Below is a simple illustration of how to do it.
<body style=”background-color:#ef592b;”>
<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>
</body>
However, you can also choose to maintain a separate style sheet to design your HTML elements using CSS selectorsCSS selectorsCSS selectors are used to selecting the content you want to style. Selectors are the part of CSS ruleset. CSS selectors select HTML elements according to its id, class, type, attribute, etc. There are several different types of selectors in CSS..
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-sideClient-sideClient-side refers to operations that are performed by the client in a client–server relationship in a computer network. (modern browsers only) or server-side (with Node.jsNode.jsNode.js is a cross-platform runtime environment used to develop server-side and networking applications. It is an open source platform and the applications are developed using JavaScript. It can run within the Node.js runtime on Microsoft Windows, Linux, and OS X. and RhinoRhinoRhino or Rhino3D is a 3D CAD modeling software package that enables you to accurately model your designs ready for rendering, animation, drafting, engineering, analysis, and manufacturing. Rhino is a free-form NURBS surface modeler.). “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 FrameworksFrameworkA framework is a collection of programs that you can use to develop your own application. It is built on top of a programming language. The framework is a set of pre-written code libraries designed to be used by developers. A programming language is a specified method of communication between the programmer and the computer., 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 JavaScriptJavaScriptJavaScript, often abbreviated as JS, is a high-level, interpreted scripting language that conforms to the ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions., JavaJavaJava is one of the majorly used general-purpose programming language designed to have no or limited implementation dependencies. Java requires a software platform for its compiled programs to be executed. Oracle and Android SDK are a few examples of the software platforms on which Java executes its programs., PythonPythonWith dynamic semantics, Python is an object-oriented, interpreted, high-level programming language. Python reduces the maintenance cost of the program as it has simple and easy to learn syntax that emphasizes readability. Thanks to its high-level built-in data structures for making it attractive for Rapid Application Development, as well as for using it as a scripting language. Python supports a wide range of libraries and a few of them are numpy, pandas, matpotlib, scipy, etc., 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.
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.
“Less” Code
@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.
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.)
“Less” Code
#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.
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.
“Less” Code
@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
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.
“Less” Code
@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.