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

---
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:
```scss
@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:
```scss
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**
```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)
}
```