
![](/api/edpresso/shot/5222937700859904/image/5817271718510592)

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


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!

How to use extend in your SASS code

Syntax

Example