Getting Started with Less

Extends

Extends

"Extend" is a special Less only pseudo-class.

In Less, "Extends" are very similar to mixins. In laymen terms, they give you a bit of control on how the CSS outputs. It acts as a way to allow properties to inherit from others in a specific way.

This sounds complicated and confusing but the best way to simply explain what it means to "extend" in Less is with a demo comparing it to a mixin.

Check-out this helper mixin below:

// My public mixin helper.
.make-super-large {
    font-size: 100px;
    font-weight: 700;
}

.item1 {
    .make-super-large;
}

.item2 {
    .make-super-large;
}



/*===============================
=            OUTPUTS            =
===============================*/
.item1 {
    font-size: 100px;
    font-weight: 700;
}
.item2 {
    font-size: 100px;
    font-weight: 700;
}

With extends get get better control of the output. This is great for utility classes that you'd want public:

// Utility Class
.make-super-large {
    font-size: 100px;
    font-weight: 700;
}
.item1 {
  &:extend(.make-super-large);
}
.item2 {
  &:extend(.make-super-large);
}


/*===============================
=            OUTPUTS            =
===============================*/
.make-super-large,
.item1,
.item2 {
    font-size: 100px;
    font-weight: 700;
}

You can see that this is so much smaller and more efficient.

This is especially important if you had a huge amount of properties in reducing your CSS final code size.

But... Minification Is King

You can see the benefits of doing this for optimization purposes.

But... I personally really like the the mixin syntax and style. Extend is nice but if you have minification as part of your compile build process, extend becomes obsolete in a way and becomes more of a preference thing.

Check out in the video how minification impacts extends.