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

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)

@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)
}