Sass @extend Rules

Last Updated:

Sass @extend Rules

@extent allows you to inherit the styles of one selector to the another.

@extend inside Parent Selector

Example

SASS TO CSS CONVERTER
.error { border: 1px #f00; background-color: red; &-serious { @extend .error; border-width: 3px; } }

Syntax

@extend className;

@extend inside Another Selector

Example

SASS TO CSS CONVERTER
.error:hover { background-color: red; } .error-serious { @extend .error; border-width: 3px; }

Share this Page

Meet the Author