Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Extending Styles with the @extend Directive | CSS Preprocessors and Sass
Advanced CSS Techniques

bookExtending Styles with the @extend Directive

The fourth helpful feature allows us to apply preset CSS properties from one element to another, creating a relationship between selectors. This means that one selector can inherit the properties of another selector.

Now, let's take a look at the image below, which shows two button elements:

We have two buttons: "send" and "submit." The only distinction between these elements is the value of the background-color property. Therefore, we can define the styles for the "send" button and have the "submit" button inherit those styles.

The html code is:

<button class="send-button">send</button>
<button class="submit-button">submit</button>

Let's see how we can inherit styles with the help of sass.

.send-button {
  padding: 10px 20px;
  border: 2px solid #4f5e77;
  border-radius: 10px;
  color: white;
  background-color: #ff8a00;
}

.submit-button {
  @extend .send-button;
   background-color: #9bbaee;
}

The .submit-button selector inherits all of the styles from the .send-button selector using the @extend directive.

question mark

What does the @extend do in sass?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 7. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

bookExtending Styles with the @extend Directive

The fourth helpful feature allows us to apply preset CSS properties from one element to another, creating a relationship between selectors. This means that one selector can inherit the properties of another selector.

Now, let's take a look at the image below, which shows two button elements:

We have two buttons: "send" and "submit." The only distinction between these elements is the value of the background-color property. Therefore, we can define the styles for the "send" button and have the "submit" button inherit those styles.

The html code is:

<button class="send-button">send</button>
<button class="submit-button">submit</button>

Let's see how we can inherit styles with the help of sass.

.send-button {
  padding: 10px 20px;
  border: 2px solid #4f5e77;
  border-radius: 10px;
  color: white;
  background-color: #ff8a00;
}

.submit-button {
  @extend .send-button;
   background-color: #9bbaee;
}

The .submit-button selector inherits all of the styles from the .send-button selector using the @extend directive.

question mark

What does the @extend do in sass?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 7. Capítulo 6
some-alt