1494a50123
* 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
45 lines
1.2 KiB
Markdown
45 lines
1.2 KiB
Markdown
---
|
|
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)
|
|
}
|
|
```
|