Generated by SassMeister.com.

SassMeister-input-HTML.html

<p class="foo">foo</p>

<p class="foo foo--bar">foo bar</p>

SassMeister-input.scss

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

.foo {
  // these won't be used as we're not inheriting them later
  border-top-color: pink;
  border-bottom-color: pink;
  
  // these will be used through inheritance
  border-left-color: red;
  border-right-color: orange;
}

.foo--bar {
  
  // set the border
  &:before,
  &:after {
    border-width: 1px;
    border-style: solid;
    content: ' ';
    display: inline-block;
    height: 1em;
    width: 10px;
  }
  
  /* check we can use :before/:after multiple times
   * and use inherit to use the colours set in .foo
   */
  &:before { border-left-color: inherit; }
  &:after  { border-right-color: inherit; }
}

SassMeister-output.css

.foo {
  border-top-color: pink;
  border-bottom-color: pink;
  border-left-color: red;
  border-right-color: orange;
}

.foo--bar {
  /* check we can use :before/:after multiple times
   * and use inherit to use the colours set in .foo
   */
}
.foo--bar:before, .foo--bar:after {
  border-width: 1px;
  border-style: solid;
  content: ' ';
  display: inline-block;
  height: 1em;
  width: 10px;
}
.foo--bar:before {
  border-left-color: inherit;
}
.foo--bar:after {
  border-right-color: inherit;
}

SassMeister-rendered.html

<p class="foo">foo</p>

<p class="foo foo--bar">foo bar</p>