* 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
1.2 KiB
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)
}