O'Reilly logo

Less Web Development Essentials by Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Mixins

Mixins play an important role in Less. You saw mixins in the first chapter when the rounded-corners example was discussed. Mixins take their naming 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 into 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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required