Last Updated: December 26, 2018
·
11.95K
· kenzic

Inheritance in LESS

Less 1.4 adds inheritance in the form of @extend. Similar to a @mixin
but more efficient in its output. A mixin will produce the same chunk
of code everytime its used but extend groups your selectors
together.

.btn {
    color: red;
    background: green;
    border: 1px solid red;

    span {
        background: url('smile.png') no-repeat;
    }
}


.go-btn {
    &:extend(.btn);

    color: green;
}

compiles to:

.btn,
.go-btn {
    color: red;
    background: green;
    border: 1px solid red;
}
.btn span {
    background: url('smile.png') no-repeat;
}
.go-btn {
    color: green;
}

Passing in all extends nested elements

.btn {
    color: red;
    background: green;
    border: 1px solid red;

    span {
        background: url('smile.png') no-repeat;
    }
}

.go-btn {
    &:extend(.btn all);

    color: green;
}

Compiles to:

.btn,
.go-btn {
    color: red;
    background: green;
    border: 1px solid red;
}
.btn span,
.go-btn span {
    background: url('smile.png') no-repeat;
}
.go-btn {
    color: green;
}

1 Response
Add your response

Very nice and smooth ouput, though I would have preferred that the "all" option was the default behavior for this. If @extend is meant to mimic inheritance, the "children" should inherit all its parent's properties by default, shouldn't they?

over 1 year ago ·