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