Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="comment">
  <div class="comment__img"></div>
  <div class="comment__content "></div>
</div>
<div class="product product--featured">
  <div class="product__img"></div>
  <div class="product__content"></div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

body {padding:50px; background:beige;}
* {box-sizing: border-box;}

$comment_colors: (
  "img-bg": lightblue,
  "solid-border": #777,
  "dashed-border": #ddd,
  "bg": #fff
);

@function comment_color($key) {
  @if not map-has-key($comment_colors, $key) {
    @warn "Key not found.";
  }
  @return map-get($comment_colors, $key);
}

$product-border: deepskyblue;
$product-bg: lightblue;
$product-featured-bg: #f00;
$product-featured-text-color: #fff;
$product-featured-text-content: "New!";
$product-img-bg: deepskyblue;

/* Structure */

@mixin media {
  width: 500px;
  padding: 10px;
  display: inline-block;
  margin-left: 30px;

  &__img {
    float: left;
    width: 150px;
    height: 150px;
  }

  &__content {
    margin-left: 160px;
    min-height: 150px;
  }
}

.comment {
  background-color: comment-color(bg);
  border: 3px solid comment-color(solid-border);
  @include media();

  &__img {
    background-color: comment_color(img-bg);
  }

  &__content {
    border: 3px dashed comment_color(dashed-border);
  }
}

.product {
  background-color: $product_bg;
  border: 3px solid $product_border;
  position: relative;
  @include media();

  &__img {
    background-color: $product-img-bg;
  }

  &__content {
    border: 3px dashed $product-border;
  }
 
  &--featured::before {
    content: $product-featured-text-content;
    color: $product-featured-text-color;
    position: absolute;
    left: -15px;
    top: -15px;
    border-radius: 50%;
    background-color: $product-featured-bg;
    width: 60px;
    height: 40px;
    text-align: center;
    padding-top: 20px;
  }
}

SassMeister-output.css

body {
  padding: 50px;
  background: beige;
}

* {
  box-sizing: border-box;
}

/* Structure */
.comment {
  background-color: #fff;
  border: 3px solid #777;
  width: 500px;
  padding: 10px;
  display: inline-block;
  margin-left: 30px;
}

.comment__img {
  float: left;
  width: 150px;
  height: 150px;
}

.comment__content {
  margin-left: 160px;
  min-height: 150px;
}

.comment__img {
  background-color: lightblue;
}

.comment__content {
  border: 3px dashed #ddd;
}

.product {
  background-color: lightblue;
  border: 3px solid deepskyblue;
  position: relative;
  width: 500px;
  padding: 10px;
  display: inline-block;
  margin-left: 30px;
}

.product__img {
  float: left;
  width: 150px;
  height: 150px;
}

.product__content {
  margin-left: 160px;
  min-height: 150px;
}

.product__img {
  background-color: deepskyblue;
}

.product__content {
  border: 3px dashed deepskyblue;
}

.product--featured::before {
  content: "New!";
  color: #fff;
  position: absolute;
  left: -15px;
  top: -15px;
  border-radius: 50%;
  background-color: #f00;
  width: 60px;
  height: 40px;
  text-align: center;
  padding-top: 20px;
}

SassMeister-rendered.html

<div class="comment">
  <div class="comment__img"></div>
  <div class="comment__content "></div>
</div>
<div class="product product--featured">
  <div class="product__img"></div>
  <div class="product__content"></div>
</div>