Generated by SassMeister.com.

SassMeister-input-HTML.html

<nav class="main-nav">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</nav>

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----


@mixin display (
  $display, 
  $padding: null, 
  $r-margin: null,
  $l-margin: null) {
    display: $display;
    padding: $padding;
    margin-left: $l-margin;
    margin-right: $r-margin;
}

.main-nav a {
  @include display(inline-block, 10px, 20px);
  color: white;
  background: tomato;
  text-decoration: none;
}


$text: cheese;
div:before {
  content: "I like #{$text} pizza!";
}

SassMeister-output.css

.main-nav a {
  display: inline-block;
  padding: 10px;
  margin-right: 20px;
  color: white;
  background: tomato;
  text-decoration: none;
}

div:before {
  content: "I like cheese pizza!";
}

SassMeister-rendered.html

<nav class="main-nav">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
</nav>