Generated by SassMeister.com.

SassMeister-input-HTML.html

<header>
  <a class="link" href="#"><i class="icon">~</i>Link 1</a>
  <a class="link" href="#"><i class="icon">~</i>Link 1</a>
  <a class="link" href="#"><i class="icon">~</i>Link 1</a>
  <a class="link" href="#"><i class="icon">~</i>Link 1</a>
</header>

<div class="box">
  
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

$company-red: #F00;
$company-darker-red: darken($company-red, 10%);

.company-font-style {
  color: $company-red;
  font-weight: bold;
  font-family: arial;
}

a.link {
  @extend .company-font-style;
  font-size: 40px;
  margin-right: 20px;
  text-decoration: none;
  
  .icon {
    color: black;
  }
  
  &:hover {
    color: $company-darker-red;
    
    .icon {
      color: blue;
    }
  }
}

h1 {
  @extend .company-font-style;
}

.header-title {
  @extend .company-font-style;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}


.box {
  @include border-radius(60px);
  height: floor(200.67px);
  width: 200px;
  background: black;
}

SassMeister-output.css

.company-font-style, a.link, h1, .header-title {
  color: #F00;
  font-weight: bold;
  font-family: arial;
}

a.link {
  font-size: 40px;
  margin-right: 20px;
  text-decoration: none;
}
a.link .icon {
  color: black;
}
a.link:hover {
  color: #cc0000;
}
a.link:hover .icon {
  color: blue;
}

.box {
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  height: 200px;
  width: 200px;
  background: black;
}

SassMeister-rendered.html

<header>
  <a class="link" href="#"><i class="icon">~</i>Link 1</a>
  <a class="link" href="#"><i class="icon">~</i>Link 1</a>
  <a class="link" href="#"><i class="icon">~</i>Link 1</a>
  <a class="link" href="#"><i class="icon">~</i>Link 1</a>
</header>

<div class="box">
  
</div>