css mixin code example

Example 1: sass mixin

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

Example 2: Sass @mixin and @include

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

Example 3: scss variables mixins

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}