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.

Table of Contents

    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.