Using mixins

Mixins play an important role in Less. You saw mixins in the preceding chapter when the rounded-corners example was discussed. Mixins take their naming conventions from object-oriented programming. They look like functions in functional programming, but in fact, act like C macros. Mixins in Less allow you to embed all the properties of a class into another class by simply including the class name as one of its properties, as shown in the following code:

.mixin(){
  color: red;
  width: 300px;
  padding: 0 5px 10px 5px;
}
p{
  .mixin();
}

The preceding code will get compiled in the following code:

p{
  color: red;
  width: 300px;
  padding: 0 5px 10px 5px;
}

In the final CSS code used on the website, every <p> paragraph tag will be styled with the properties defined in the mixin() function. The advantage will be that you can apply the same mixin on different classes. As seen in the rounded-corners example, you only have to declare the properties once.

Try opening less/mixins...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Less Web Development Essentials (Second Edition)

By : Jobsen

Less Web Development Essentials (Second Edition)

By: Jobsen

Overview of this book

Using mixins

Less Web Development Essentials (Second Edition)

By : Jobsen

Less Web Development Essentials (Second Edition)

By: Jobsen

Overview of this book

Using mixins

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access