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

Contenido del Curso

Advanced CSS Techniques

Advanced CSS Techniques

1. Getting Started with Advanced CSS
2. Mastering CSS Positioning
3. Creating Smooth Transitions in CSS
4. Advanced CSS Animations
5. Transforming Elements with CSS
6. Responsive Web Design in CSS
7. CSS Preprocessors and Sass

book
Extending 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:

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

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

What does the `@extend` do in sass?

What does the @extend do in sass?

Selecciona la respuesta correcta

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 7. Capítulo 6
We're sorry to hear that something went wrong. What happened?
some-alt