using a 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: What is a Mixin?

/*
	Mixins are Sass functions that group CSS declarations together.
	We can reuse them later like variables.

	We can create a mixin with @mixin ex: @mixin variable-name {}
	
	we can create a mixin as a function show below and add parameters as well

	After creating the mixin, we can use it in any class with @include command.
	
	This approach simplifies the code.
*/

/****example-1****/
@mixin my-flex {
  display:flex;
  align-items:center;
  justify-content:center;
}

/****example-2****/
$font-color: red;
@mixin my-font($font-color) {...}

/****HOW TO USE****/
div { 
  @include my-flex; 
}

Example 3: scss variables mixins

// styles.scss
@use 'base';

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