Extending Classes with LESS CSS

In LESS CSS, the concept of extending classes allows you to reuse styles from one class in another. This helps in reducing redundancy and maintaining cleaner code. Here’s a step-by-step guide and examples to help beginners understand how to extend classes in LESS CSS.

What is LESS CSS?

LESS is a CSS pre-processor that extends the capabilities of CSS with features like variables, nesting, mixins, and extending. It helps to write more maintainable and reusable CSS.

Why Use Extend?

Extend is useful for:

Reusing styles without duplicating code.
Keeping your CSS DRY (Don't Repeat Yourself).
Making it easier to update styles across multiple selectors.

Basic Syntax

The basic syntax for extending a class in LESS is:

.selector:extend(.other-selector);

Examples

Let's walk through some examples to understand how extending classes works in LESS.

Example 1: Basic Extension

Suppose we have two classes, .box and .red-box. We want .red-box to have all the styles of .box plus some additional styles.

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

.red-box {
  &:extend(.box);
  background-color: red;
}

Explanation:

.box defines basic styles: width, height, and border.
.red-box extends .box, inheriting its styles, and adds a background color.

Example 2: Extending Multiple Classes

You can also extend multiple classes at once. Here’s how:

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

.round {
  border-radius: 10px;
}

.red-box {
  &:extend(.box);
  &:extend(.round);
  background-color: red;
}

Explanation:

.red-box extends both .box and .round, inheriting their styles.

Example 3: Extending Placeholder Selectors

LESS allows you to create placeholder selectors (which start with %). These selectors are meant to be extended but do not produce any CSS on their own.

%box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

.red-box {
  &:extend(%box);
  background-color: red;
}

Explanation:

%box is a placeholder selector with styles.
.red-box extends %box and adds a background color. %box itself does not appear in the compiled CSS.

Benefits of Using Extend

Code Reusability: Extend allows you to reuse existing styles without duplicating code.
Maintainability: Changes to the base class automatically propagate to the extended classes.
Cleaner CSS: Less repetition results in cleaner, more readable CSS.

Conclusion

Extending classes in LESS CSS is a powerful feature that promotes code reuse and maintainability. By using :extend, you can inherit styles from other classes, reducing redundancy and making your CSS more efficient.

Example in Action

Here’s a simple HTML and LESS example demonstrating class extension:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Extend Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="box"></div>
  <div class="red-box"></div>
</body>
</html>

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}

.round {
  border-radius: 10px;
}

.red-box {
  &:extend(.box);
  &:extend(.round);
  background-color: red;
}

Result:

The first <div> has the styles from .box.
The second <div> has the combined styles of .box and .round with an additional red background.

These examples and explanations, will help you as a beginner to be able to grasp the concept of extending classes in LESS CSS and apply it effectively in your projects.