Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav>
  <ul>
    <li><a href="#">List Item</a></li>
    <li><a href="#">List Item</a></li>
    <li><a href="#">List Item</a></li>
    <li><a href="#">List Item</a></li>
    <li><a href="#">List Item</a></li>
  </ul>
</nav>

<p>lorem text test lorem text test lorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text test </p>

SassMeister-input.scss

// ----
// Sass (vundefined)
// Compass (vundefined)
// dart-sass (v1.18.0)
// ----

$primary-color: blue;

@mixin primary-style(){
    color: skyblue;
    text-transform: uppercase;
}

nav {
  background: #dddddd;
  ul {
    list-style-type: none;
    li {
      display: inline-block;
      @include primary-style;

      a {
        display: block;
        color: $primary-color;
        text-decoration: none;
        padding: 10px 20px;
        &:hover {
          background: yellow;
          color: black;
        }
      }
    }
  }
}

p{
  color: $primary-color;
}

SassMeister-output.css

nav {
  background: #dddddd;
}
nav ul {
  list-style-type: none;
}
nav ul li {
  display: inline-block;
  color: skyblue;
  text-transform: uppercase;
}
nav ul li a {
  display: block;
  color: blue;
  text-decoration: none;
  padding: 10px 20px;
}
nav ul li a:hover {
  background: yellow;
  color: black;
}

p {
  color: blue;
}

SassMeister-rendered.html

<nav>
  <ul>
    <li><a href="#">List Item</a></li>
    <li><a href="#">List Item</a></li>
    <li><a href="#">List Item</a></li>
    <li><a href="#">List Item</a></li>
    <li><a href="#">List Item</a></li>
  </ul>
</nav>

<p>lorem text test lorem text test lorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text testlorem text test lorem text test </p>