CSS Preprocessor LESS (original) (raw)

Last Updated : 09 Jan, 2025

**LESS (Leaner Style Sheets) is a CSS preprocessor that extends CSS with dynamic behavior, including variables, nesting, mixins, and mathematical operations, all while maintaining compatibility with standard CSS.

**Pre-Requisites:

• Basic knowledge of **HTML and **CSS

Key Features of LESS

• **Variables: Store reusable values like colors, fonts, and measurements using the @ symbol.
• **Mixins: Include reusable groups of CSS properties in other rulesets.
• **Nesting: Write CSS in a hierarchical structure reflecting the HTML.
• **Mathematical Operations: Perform arithmetic on CSS values.
• **Functions: Use built-in functions for math, color manipulation, and more.

**System Requirements

• **Operating System: Cross-platform
• **Browser Support: IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.
• **File Type: All LESS files must have the .less file extension.

How LESS Works

A browser cannot directly process LESS code. A LESS preprocessor compiles the LESS file into standard CSS that browsers can interpret.

Working Steps:

1. Write the LESS code in a file with a .less extension.
2. Compile the LESS file into CSS using the command:
   • bash:
     * lessc style.less style.css
3. Include the compiled CSS file in your HTML file.

Here is a list of all the features of LESS, each explained one by one:

**Features:

**1. Variables: Variables can be used to store CSS values that may be reused. They are initialized with _@.

style.less `

@lt-gray: #ddd; @background-dark: #512DA8; @carousel-item-height: 300px; h1 { color:@lt-gray; background:@background-dark; }

`

**Syntax: To compile the above less code to CSS code write the following command-

**lessc style.less style.css

The compiled CSS file comes to be:

style.css `

h1 { color: #ddd; background: #512DA8; }

`

**2. Mixins: Mixins are a way of including a bunch of properties from one rule-set into another rule set.

style.less `

zero-margin { margin:0px auto; background: white; }

.row-header { margin:zero-margin; padding:0px auto; }

.row-content { margin:zero-margin; border-bottom: 1px ridge; min-height:400px; padding: 50px 0px 50px 0px; }

`

**Syntax: To compile the above less code to CSS code write the following command-

lessc style.less style.css

The compiled CSS file comes to be:

style.css `

zero-margin { margin: 0px auto; background: white; } .row-header { margin: zero-margin; padding: 0px auto; } .row-content { margin: zero-margin; border-bottom: 1px ridge; min-height: 400px; padding: 50px 0px 50px 0px; }

`

**3. Nesting: LESS gives you the ability to use nesting.

style.less `

@lt-gray: #ddd; @background-dark: #512DA8; @carousel-item-height: 300px; .carousel { background:@background-dark;

.carousel-item {
    height: @carousel-item-height;
    img {
        position: absolute;
        top: 0;
        left: 0;
        min-height: 300px;
    }
}

}

`

**Syntax: To compile the above less code to CSS code write the following command-

lessc style.less style.css

The compiled CSS file comes to be:

style.css `

.carousel { background: #512DA8; } .carousel .carousel-item { height: 300px; } .carousel .carousel-item img { position: absolute; top: 0; left: 0; min-height: 300px; }

`

**4. Mathematical Operations: Arithmetical operations +, -, *, / can operate on any number, color, or variable.

style.less `

@lt-gray: #ddd; @background-dark: #512DA8; @carousel-item-height: 300px;

.carousel-item { height: @carousel-item-height; }

.carousel-item .item-large { height: @carousel-item-height *2; }

`

**Syntax: To compile the above less code to CSS code write the following command-

lessc style.less style.css

The compiled CSS file comes to be:

style.css `

.carousel-item { height: 300px; } .carousel-item .item-large { height: 600px; }

`

**5. Functions: LESS provides a variety of functions like math, list, string, color operations, color blending, etc.

style.less ``

@base:0.5; @width: 0.8;

.class { width: percentage(@width); // Returns 80% color: saturate(@base, 5%); background-color: light(@base, 25%), 8; }

``

**Syntax: To compile the above less code to CSS code write the following command-

lessc style.less style.css

The compiled CSS file comes to be:

style.css `

.class { width: 80%; color: saturate(0.5, 5%); background-color: light(0.5, 25%), 8; }

`

**Example: File name gfg.html

HTML `

style.less

@color-primary: #009900; @font-pri: Sans-Serif; @font-sec: Helvetica;

body{ color: @color-primary; font-size: 40px; }

.list{ font-family: @font-pri; font-size: 20px; .a{ font-family: @font-sec; font-size: 10px; } }

style.css

body { color: #009900; font-size: 40px; } .list { font-family: Sans-Serif; font-size: 20px; } .list .a { font-family: Helvetica; font-size: 10px; }

`

**Output:

**Advantages of LESS

• LESS is cross-browser compatible.
• LESS provides a list of operators making it easy for users to code.
• Maintenance is easy due to the use of variables.

**Disadvantages of LESS

• LESS provides fewer frameworks as compared to SASS.
• It can be tricky to those who are new to CSS.

Best Practices for Using LESS

• **Modularize Your Code: Divide your styles into logical, reusable modules or partials to enhance maintainability.
• **Limit Nesting Levels: Avoid deep nesting to prevent overly specific selectors and maintain readability.
• **Utilize Variables: Define variables for commonly used values like colors and fonts to ensure consistency and simplify updates.