scss mixin gradient code example
Example: scss gradient mixin
/* Mixin to create vertical, horizontal or radial gradient */
@mixin gradient($start-color, $end-color, $orientation) {
background: $start-color;
@if $orientation == 'vertical' {
/* Vertical gradient */
background: linear-gradient(to bottom, $start-color, $end-color);
} @else if $orientation == 'horizontal' {
/* Horizontal gradient */
background: linear-gradient(to right, $start-color, $end-color);
} @else {
/* Radial gradient */
background: radial-gradient(ellipse at center, $start-color, $end-color);
}
}
/* Usage */
.gradient {
@include gradient(#07c, #06f, vertical);
}