What is LESS?
LESS (Leaner CSS) is a dynamic stylesheet language because it provides many features and functionalities like variables, mixins, functions and operations which extend the capability of CSS. LESS is a pre-processor of CSS but it does not replace CSS, it simply adds more functionality. LESS enables stylesheets more maintainable, reusable, optimized, customizable and extendable for creating website. Using LESS, developers can define specific style or set of pre-determined styles and can reuse it whenever required.
History
LESS is an open source, its first version was written in Ruby, later Ruby was deprecated and replaced by JavaScript. LESS was designed by Alexis Sellier in 2009 and developed by both Alexis Sellier and Dmitry Fadeyev. It is a scripting language implemented in JavaScript with filename extensions ".less" and cross browser friendly.
Features
- JavaScript based: LESS is implemented and based on JavaScript.
- Clean code can be written in more detailed, organized and readable manner.
- Merging property: It has unique merging property that merge multiple values of a single property like CSS Box shadow, transform and transition.
- Nested rules: Using LESS, you can nest selectors inside other selectors which makes your code cleaner and precise.
- Operations: LESS offers arithmetical operations like plus (+), minus (-), multiplication (*) and division (/) which can be used for any number, color or variable, it saves a lot of time.
- Pre-determined styles once defined can be re-used whenever required.
- Mixins: Mixins allows to include a number of properties of one class into another class and also includes class name and its properties.
- Variables: Variables in LESS start with a symbol @, it can be combination of dashes, underscores, letters and numbers. First name your variables with a colon: and define the variable.
- Scope: It specifies the place of available variable and mixins. It searches variables and mixins for local scope, if they are not found then the compiler will look in the parent scope.
- Functions: LESS offers many variety of functions to change colors like round function. Percentage function, floor function and ceil function. It uses JavaScript code to manipulate the values and HTML elements in the stylesheet.
- Comments: Comments make your code clean and easy to understand. Comments can be used in both block style and inline.
- Escaping: It allows to use any arbitrary string as property or variable value.
Preconditions for Using LESS
Using LESS require complete knowledge of:
- Internet browsing.
- Word processing using text editor.
- HTML or XHTML and JavaScript.
- Navigation through different directories.
- Creating directories and files.
Advantages and Benefits
- LESS is write less or do more.
- Nesting provides cleaner and well organized code for making your CSS more organized.
- Styles once defined (pre-defined) can be reused wherever needed throughout the code.
- Operations like arithmetical calculations (plus, minus, multiplications, divisions) makes code faster and save lot of time.
- Variables allow storing of value which can be reused.
- Mixins allow assembling of multiple code in combination which can be reused.
- It breaks your code into multiple files by using comments.
- Use of functions, mixins, operations and variables offer better code maintenance.
- It makes your CSS DRY (Don’t repeat yourself) which saves lot of time.
- Setting up preprocessor for a project is quite easy and simple.
- Using LESS makes your website cleaner, shiner and prettier.
- Easy to maintain code with libraries and code snippets.
Disadvantages
- Tight coupling is when a group of classes is not independent or dependent on one another, more efforts should be taken to reuse or test dependent classes.
- Learning LESS takes too much time if you are beginner or not familiar with it.
- For using LESS, one should have a complete knowledge of CSS, HTML or JavaScript (LESS based on JavaScript).
- Debugging becomes difficult, due to compilation of irrelevant CSS line numbers.
- Development slow down at the time of compilation because it takes so much time.
- Maintenance is also very difficult. For Example: if you want blue color or if it changes to something else which is not blue then, you have to search and replace.
- While using LESS, developer need extra plugins like GUI or CLI which require proper setup, upgrade and maintenance which again increase chances of issues at the time of compilation (If tools are available then needs regular upgrading or if not available then developer has to choose another remaining options).
- System requirement for LESS, operation system must be cross platform.
Conclusion
CSS preprocessors have number of advantages or also have some cool features like nesting, variables, mixins, functions for color manipulations and logical operators. It saves lot of time, cost and it offers awesome way of generating stylesheets. It has many drawbacks as well like, if the stylesheet is full of mixins, functions, variables and loops then it will be hard to maintain. But for some drawbacks you should not discard the use of LESS, if you trying it more often, it will become easier and interesting.
