Let’s Start With What Is @mixin.

The @mixin rule in Sass. Therefore, these are grouped to be used anywhere in the code where required. Moreover, @mixin allows us to reuse them multiple times throughout our stylesheet without rewriting the code each time.

When We Use @include.

To use the @mixin in our code, we must include it where we want the style properties. To do that, we use the @include rule, followed by the name of the @mixin.

For example :-

In the below image, you see that in the mobile version, the content is positioned below the image, while in the desktop version, it aligns beside it.

Therefore, we have to use two different styles for mobile and desktop. We use @include to add the necessary styles for the desktop as follows, which will overwrite the styles we have added to the mobile version.

.stay-productive {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

@include desktop {
        flex-direction: row;
        justify-content: center;
    }

How Do We Use @mixin in a Scss File.

There are multiple approaches to using mixins in SCSS, as different individuals may have their preferred methods. In this article, I will present in depth of an efficient technique that I learned from my mentor. This technique allows for swift customization of styles across different devices, eliminating the need for redundant code.

However SCSS site itself offers a range of options that you can explore based on your own preferences and requirements. Without further ado, let’s get on to how we use mixin.

Step 01:- Set up the mixin SCSS file with responsive device width configurations.

$mobile-max-width:760px;
$mobile-min-width:300px;
$tablet-width:768px;
$laptop-width:992px;
$desktop-width:1024px;
$desktop-middle-width:1280px;
$desktop-large-width:1366px;
$desktop-extralarge-width:1600px;
@mixin mobile {
  @media only screen and (min-width: #{mobile-min-width}) and (max-
  width: #{mobile-max-width}) {
     @content;
  }
}
@mixin tablet-landscape {
   @media only screen and (min-width: #{$laptop-width}) and (max-
   width: #{$desktop-width}) {
     @content;
   }
}
@mixin tablet-portrait {
   @media only screen and (min-width: #{$tablet-width}) and (max-
   width: #{$laptop-width}) {
     @content;
   }
}
@mixin laptops {
   @media only screen and (min-width: #{$desktop-width}) and (max-
   width: #{$desktop-middle-width}) {
     @content;
   }
}
@mixin desktop {
   @media (min-width: #{$desktop-width}) {
     @content;
   }
}
@mixin middle-desktop {
   @media (min-width: #{$desktop-middle-width}){
     @content;
   }
}
@mixin large-desktop {
   @media (min-width: #{$desktop-large-width}) {
     @content;
   }
}
@mixin exlarge-desktop {
   @media (min-width: #{$desktop-extralarge-width}) {
     @content;
   }
}

Step 02: Import your mixin file into the main styles file.

@import "mixins";

Step 03:- Finally, Overwrite specific styles for different devices by including the mixin name for each device.

footer {
    background-color:$darkblue;
    padding-top: 220px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 40px;

logo {
        img {
            width: 88px;
            height: 26px;
        }
    }

.footer-content {
        display: flex;
        flex-direction: column;

@include desktop {
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            margin-top: 60px;
        }

.address {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            margin-top: 40px;
            margin-bottom: 10px;

@include desktop {
                margin-top: 0px;
                margin-bottom: 0px;
                padding-top: 5px;
            }

img {
                width: 13px;
                height: 18px;
            }

a {
                margin-left: 10px;
                width: 300px
            }
        }

.contact-details {

@include desktop {
                padding-top: 5px;
            }
            .phone,
            .email {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: flex-start;
                margin-top: 20px;
                margin-bottom: 10px;

a {
                    margin-left: 10px;
                }
            }

.phone {
                @include desktop {
                    margin-top: 0px;
                }
                img {
                    width: 18px;
                    height: 18px;
                }
            }

.email {
                @include desktop {
                    margin-top: 20px;
                }
            }
        }

.about-us {
            display: flex;
            flex-direction: column;
            margin-top: 40px;

@include desktop {
                flex-direction: row;
                margin-top: 0px;
            }

.info-section-one,
            .info-section-two {
                display: flex;
                flex-direction: column;
                margin-top: 20px;
                margin-bottom: 20px;

@include desktop {
                    margin-top: 0px;
                    margin-left: 20px;
                    margin-right: 20px;
                }

a {
                    padding-top: 5px;
                    padding-bottom: 5px;
                }
            }
        }

.social-icons {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

.facebook,
            .twitter,
            .insta {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                border: 3px solid $white;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 10px;
                margin-left: 10px;
            }
        }
    }
}

Likewise it is possible to implement distinct style variations for different devices with relative ease, requiring only a few simple steps.

Delving Deeper into Mixin Approaches

As now you have got to know the technique I am using to easily customise my styles according to the device responsiveness.Allow me to introduce you to a range of additional techniques that will make the process of tailoring styles a breeze, empowering you to choose the approach that perfectly aligns with your personal preferences and requirements.

Keyword Argument

A keyword argument is a feature that allows you to pass values to a mixin or function using named parameters instead of relying on their position or order. It provides a more explicit and flexible way of passing arguments, making your code more readable and maintainable.

When defining a mixin or function in SCSS, you can specify one or more parameters, each with a default value assigned to it. These parameters act as placeholders for values that will be provided when the mixin or function is invoked.

Here is an Example

@mixin important-text($font-size: 16px, $color: #000, $font-weight: 400) {
  font-size: $font-size;
  color: $color;
  font-weight: $font-weight;
}

In the above example, the mixin important-text accepts three keyword arguments: $font-size, $color, and $font-weight. Each argument has a default value assigned to it, which will be used if no value is explicitly passed when invoking the mixin.

So, to include the important-text mixin created above:

.my-text {
  @include important-text($font-size: 18px, $color: blue);
  font-style:italic;
}

In this case, the important-text mixin is invoked with the $font-size argument set to 18px and the $color argument set to blue. The $font-weight argument will use its default value of normal additionally there will be a font-style of italic for .my-text

When the Sass transpiler will convert the above to normal CSS:

.my-text {
  font-size: 18px;
  color: blue;
  font-weight: 400;
  font-style:italic;
}

Variable Argument

A variable argument, also known as a rest argument or variadic argument, allows you to pass an arbitrary number of values to a mixin or function. It is useful when you need to handle a variable number of arguments without explicitly specifying each one.

To define a mixin or function with a variable argument in SCSS, you use the ... syntax followed by a variable name. The ... indicates that any number of values can be passed to that argument.

Here’s an example of a mixin with a variable argument:

Example 01:-

@mixin box-shadow(...$shadows) {
  box-shadow: $shadows;
}

In the above example, the box-shadow mixin accepts a variable number of arguments, which will be assigned to the $shadows variable. This allows you to pass any number of box shadow values when invoking the mixin.

To use the mixin and pass multiple box shadow values, you can do the following.

.my-box {
  @include box-shadow(0 0 5px #000, 0 0 10px rgba(0, 0, 0, 0.5));
}

In this case, the box-shadow mixin is invoked with two box shadow values: 0 0 5px #000 and 0 0 10px rgba(0, 0, 0, 0.5). The variable argument $shadows will be a list containing these values, and they will be applied to the box-shadow property.

When the Sass transpiler will convert the above to normal CSS:

.my-box {
  box-shadow: 0 0 5px #000, 0 0 10px rgba(0, 0, 0, 0.5);
}

Example 02:-

@mixin gradient($direction, ...$colors) {
  background: linear-gradient($direction, $colors);
}

In this example, we have a mixin called gradient that accepts a $direction argument specifying the gradient direction and a variable argument ...$colors for the gradient colors.

.my-element {
  @include gradient(to right, red, yellow, green);
}

In this case, the gradient mixin is invoked with the direction to right and three color values: red, yellow, and green. The variable argument $colors captures these values as a list and passes them to the linear-gradient function, resulting in the desired gradient background.

When the Sass transpiler will convert the above to normal CSS:

.my-element {
  background: linear-gradient(to right, red, yellow, green);
}

As we wrap up this article, we have embarked on a fascinating exploration of various mixin approaches. Feel inspired to continue your journey, uncovering new and innovative techniques along the way. Happy mixin-ing!

Final Thought

Having guided you through the process of incorporating mixins, I would like to conclude this article with the hope that you have gained valuable knowledge and insights. Thank you for taking the time to explore this content.

Please note that in my forthcoming Scss article, I will provide a detailed explanation of the Scss component. If you have any inquiries or require further clarification, please do not hesitate to ask in the comments section.

If you want to gain more knowledge, sharpen your skillset or need a small reminder, check out the following articles.👇🧠

Understanding flexbox to make things easy:- https://levelup.gitconnected.com/understanding-flexbox-to-make-things-easy-adf90891ff25

Learn the fundamentals of CSS within a few minutes:- https://bootcamp.uxdesign.cc/beginners-guide-to-css-9bc8298985c0

Beginner’s guide to HTML:-https://uxplanet.org/beginners-guide-to-html-and-css-letss-start-off-with-html-3d7ffd035182

If you like this give one or more claps and feel free to leave your thoughts and feedback in the comment section.

Thank you for checking this out and feel free to checkout my other articles by clicking the following link 👇

Check It Out

🔸Follow me on Twitter👀: @NathashaR97🔸