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

6. Control Directives

In this example, we define two variables: $primary-color and $secondary-color, and assign them values of #007bff and #6c757d, respectively.

We then define a mixin called button-styles, which takes a parameter called $bg-color. This mixin sets some basic styles for a button, like background-color, color, padding, and border-radius.

We use this mixin to define two different button classes: .button-primary and .button-secondary. We pass the $primary-color and $secondary-color variables as arguments to the button-styles mixin, respectively.

We also use an @if control directive to check if the value of $primary-color is equal to #007bff. If it is, we add a border style to the .button-primary class. If it's not, we remove the border style.

By using control directives, we can write more dynamic and flexible code that can adapt to different situations and conditions.

#SASS
@javascript_tut @codingWithElias

How to create a blog PHP and MySQL database Intro & Demo
https://youtu.be/Bcc97YC18Z0https://youtu.be/Bcc97YC18Z0

Thank you 😊