transition mixin in sass code example
Example 1: mixin for transition css
@mixin transition($for: all, $time-in: 250ms, $type: ease-in-out, $time-out: 0s) {
transition: $for $time-in $type $time-out;
-moz-transition: $for $time-in $type $time-out;
-webkit-transition: $for $time-in $type $time-out;
-o-transition: $for $time-in $type $time-out;
}
Example 2: scss transition
div {
transition: all 0.5s ease;
background: red;
padding: 10px;
}
div:hover {
background: green;
padding: 20px;
}
Example 3: scss variables mixins
// styles.scss
@use 'base';
.inverse {
background-color: base.$primary-color;
color: white;
}