Another cool feature in SASS is that we can create functions for our CSS. In the following code, I am creating a function to be able to dynamically create a linear gradient with custom opacity. Please check it out.
@function linear-gradient($pos, $gradients...) {
$type: linear;
$pos-type: type-of(nth($pos, 1));
// if $pos doesn't exist, fix $gradient
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
$gradients: zip($pos $gradients);
$pos: false;
}
$type-gradient: $type, $pos, $gradients;
@return $type-gradient;
}
This is how you call the function
@include background(linear-gradient(top, orange, red));
