Files
Randell Dawson 1494a50123 fix(guide): restructure curriculum guide articles (#36501)
* fix: restructure certifications guide articles
* fix: added 3 dashes line before prob expl
* fix: added 3 dashes line before hints
* fix: added 3 dashes line before solutions
2019-07-24 13:29:27 +05:30

1.2 KiB

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