·

12.63K

· kenzic

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;
}

Related protips

Have a fresh tip? Share with Coderwall community!

Post

Post a tip

Sponsored by

#native_company#

#native_desc#

#native_cta#

Post a job for only 299ドル

Sponsored by #native_company# — Learn More