Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

sass
communitycreator
extend

How to use extend in your SASS code

Theodore Kelechukwu Onyejiaku

There are times when you want a certain element to have the same properties or CSS rules as another element. In order to avoid repeating codes, you can use the SASS extend.

Syntax

@extend [selector]

The [selector] referred to above could be a class selector, an ID selector, or an element.

Example

Take a look at the following example. We created two selectors. The second inherits the CSS rules of the first, and the latter adds its own CSS rules to the inherited ones.

.bg{
  width: 50%;
  margin:auto;
}

.bg-danger{
    @extend .bg;
    background-color: red;
}

When we run the code, the output tells us that we can use SASS extend to inherit CSS rules from other elements. The elements that apply to both selectors are the width and the margin, and the element that is specific to .bg-danger is the background-color.

Thanks for reading!

RELATED TAGS

sass
communitycreator
extend

CONTRIBUTOR

Theodore Kelechukwu Onyejiaku
RELATED COURSES

View all Courses

Keep Exploring