Generated by SassMeister.com.

SassMeister-input-HTML.html

<article class="post">
    <h1 class="post__title">Title</h1>
    <picture class="post__picture">
        <img src="article/picture.jpg" alt="Something" />
    </picture>
    <p class="post__description">
        Lorem ipsum...
    </p>
</article>
<article class="post post--highlight">
    <h1 class="post__title">Title</h1>
    <picture class="post__picture">
        <img src="article/picture.jpg" alt="Something" />
    </picture>
    <p class="post__description">
        Lorem ipsum...
    </p>
</article>
<article class="post">
    <h1 class="post__title">Title</h1>
    <picture class="post__picture">
        <img src="article/picture.jpg" alt="Something" />
    </picture>
    <p class="post__description">
        Lorem ipsum...
    </p>
</article>

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

/*_post.scss*/
$module: 'post';

.#{$module} {
    padding: 5px;

    &__title {
        font-size: 20px;
        font-weight: 400;
    }
    &__description {
        line-height: 15px;
        font-size: 14px;
    }
    &__picture {
        float: left;
        max-width: 30%;
    }
    /* Here start our Modifier */
    &--highlight {
        background-color: #F0F0F0;

        .#{$module}__title {
            font-color: #000;
            font-weight: 800;
        }
    }
}

SassMeister-output.css

/*_post.scss*/
.post {
  padding: 5px;
  /* Here start our Modifier */
}
.post__title {
  font-size: 20px;
  font-weight: 400;
}
.post__description {
  line-height: 15px;
  font-size: 14px;
}
.post__picture {
  float: left;
  max-width: 30%;
}
.post--highlight {
  background-color: #F0F0F0;
}
.post--highlight .post__title {
  font-color: #000;
  font-weight: 800;
}

SassMeister-rendered.html

<article class="post">
    <h1 class="post__title">Title</h1>
    <picture class="post__picture">
        <img src="article/picture.jpg" alt="Something" />
    </picture>
    <p class="post__description">
        Lorem ipsum...
    </p>
</article>
<article class="post post--highlight">
    <h1 class="post__title">Title</h1>
    <picture class="post__picture">
        <img src="article/picture.jpg" alt="Something" />
    </picture>
    <p class="post__description">
        Lorem ipsum...
    </p>
</article>
<article class="post">
    <h1 class="post__title">Title</h1>
    <picture class="post__picture">
        <img src="article/picture.jpg" alt="Something" />
    </picture>
    <p class="post__description">
        Lorem ipsum...
    </p>
</article>