mixins in css code example

Example 1: Sass @mixin and @include

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

Example 2: scss variables mixins

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Example 3: scss variables mixins

// styles.scss
@use 'base';

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