4. Functions

In this example, we define a function called calculate-width. This function takes three parameters: $container-width, $columns, and $gutter. It calculates the width of each column based on the container width, number of columns, and gutter size, and returns the result.

We then define a .container class with a fixed width of 960px and centered horizontally using margin: 0 auto;.

We also define a .column class with a float: left; and a margin-right: 20px;. The width of each column is calculated using the calculate-width function, passing in the container width of 960px, 3 columns, and a gutter size of 20px.

By using functions, we can write more dynamic and reusable code. We can define complex calculations and reuse them throughout our styles, 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

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 😊