freeCodeCamp/guide/english/certifications/front-end-libraries/sass/create-reusable-css-with-mixins/index.md

title

title
Create Reusable CSS with Mixins

Create Reusable CSS with Mixins

---

Problem Explanation

Mixin is one of the great features that let developers use SASS instead of plain CSS, as it allows you to have a Function inside your Stylesheet!

To create a mixin you should follow the following scheme:

@mixin custom-mixin-name($param1, $param2, ....) {
    // CSS Properties Here...
}

And to use it in your element(s), you should use @include followed by your Mixin name, as following:

element {
    @include custom-mixin-name(value1, value2, ....);
}

Example: Write A Text Shadow in SASS

Objective: Apply a custom Text Shadow to an h4 element

HTML

<h4>This text needs a Shadow!</h4>


**SASS _(Written in SCSS syntax)_**
```scss
@mixin custom-text-shadow($offsetX, $offsetY, $blurRadius, $color) {
    -webkit-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
    -moz-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
    -ms-text-shadow: $offsetX, $offsetY, $blurRadius, $color;
    text-shadow: $offsetX, $offsetY, $blurRadius, $color;
}
h2 {
    @include custom-text-shadow(1px, 3px, 5px, #999999)
}