What is a LESS?
LESS is an abbreviated
Learner Style styles, is a opensource pre-processor language for CSS,
Preprocessor is writing a code using super set of css features, compile this code to native CSS and browser understand css styles
CSS usually used to describe how UI page display to end user using using different styles,layouts and themes etc…
CSS is very useful for simple applications, when application is large, reusing the styles and UI resources is a nightmare with CSS.
We can use LESS which contains superset of CSS with basic programming languages features variables, mixins and functions.
It provides reusable code in css and modularity and helpful to organize the code in larger projects.
It provides templates and variables, functions can be declared once and reused in multiple places across multiple modules and applications.
Prerequisites to learn
You must know
CSS with basic programming languages
What are Advantages LESS over CSS
- Opensource and support all version of CSS
- Provides Arithmetic operators
- Basic programming languages with reusable CSS snippets
- Separation of various UI styles to make it clean and simple
- Helps UX and UI designers to code the reusable assets
- Number of lines of code will be reduced when compared with CSS
- Maintenance is easy as group of similar styles are placed in a single file
- It supports modular design
- Clear separation of code by features or files
- Easy to write extended themes and layouts
It is very difficult to learn Syntax and features for developers initially During development stage, LESS or any preprocessor tools need extra step to compile to css. Browsers did not understand the LESS syntax It is very difficult to debug to fix any css issues. Learn curve exists as need to learn syntax and programming language concepts. Generate css and sourcemap files which sourcemaps are extra files Needs development tools to edit and code LESS code
variables : Declare a variable with value once, reuse it in multiple placess
IS LESS the same as CSS?
CSS is style sheet for browsers, where as LESS is superset of CSS with extended programming features like variables,mixins,operators and functions. Both are different, browsers understands CSS code and LESS code does not understand . So LESS code need to compile to generate CSS at runtime during development.
LESS provides extendable and maintainable compared with CSS. It helps developers to reuse the code across multiple files and helps to design themes and layout better across applications.
File extension for CSS LESS files
File extension is
less extension files contain css code with programmable feature syntax.
The files created with .less extension are read and parse by compilers only.
How do you open write LESS files? LESS files are opened in any normal text editor like textpad or notepad++. if you want validation and syntax format and auto generation of code, You need have advanced editor. Visual Studio code, Intelli IDEA and Eclipse has a plugins to work with LESS files