Coding with Elias

5. Inheritance

In this example, we define a placeholder selector called %button-styles. This selector sets some basic styles for a button, like background-color, color, padding, and border-radius.

We then define two different button classes: .button-primary and .button-secondary. We use the @extend directive to inherit the styles from the %button-styles placeholder selector.

The .button-primary class inherits all the styles from %button-styles, while the .button-secondary class inherits the same styles but also sets a different background-color and adds a margin-top.

By using inheritance, we can write more modular and reusable code. We can define common styles in a placeholder selector and then inherit those styles in multiple classes, without having to repeat the same code over and over again. This also makes it easier to maintain our code and make changes to our styles in one place.

#SASS
@javascript_tut
@codingWithElias

www.tgoop.com/codingWithElias/428

3.9K viewsApr 12, 2023 at 14:49

5. Inheritance

In this example, we define a placeholder selector called %button-styles. This selector sets some basic styles for a button, like background-color, color, padding, and border-radius.

We then define two different button classes: .button-primary and .button-secondary. We use the @extend directive to inherit the styles from the %button-styles placeholder selector.

The .button-primary class inherits all the styles from %button-styles, while the .button-secondary class inherits the same styles but also sets a different background-color and adds a margin-top.

By using inheritance, we can write more modular and reusable code. We can define common styles in a placeholder selector and then inherit those styles in multiple classes, without having to repeat the same code over and over again. This also makes it easier to maintain our code and make changes to our styles in one place.

#SASS
@javascript_tut
@codingWithElias

BY Coding with Elias