Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

/**
 * Modifying an Element *because of a Modifier*. E.g. we want a larger title
 * in a larger widget.
 *
 * <article class="c-widget  c-widget--large">
 *   <h1 class="c-widget__title">I will be bigger.</h1>
 *   <p>...</p>
 *   <h1 class="c-widget__title">I will be bigger.</h1>
 *   <p>...</p>
 *   <h1 class="c-widget__title">I will be bigger.</h1>
 *   <p>...</p>
 * </article>
 */
.c-widget {
  padding: 1em;
}

  .c-widget__title {
    font-size: 1em;
    font-weight: bold;

    .c-widget--large & {
      font-size: 1.5em;
    }

  }

.c-widget--large {
  padding: 1.5em;
}





/**
 * Modifying an Element directly, because it’s *not being styled because of
 * a context*. E.g. we can have multiple widget titles, and some of them
 * can be large.
 *
 * <article class="c-widget">
 *   <h1 class="c-widget__title  c-widget__title--large">I will be bigger.</h1>
 *   <p>...</p>
 *   <h1 class="c-widget__title">I will be regular size.</h1>
 *   <p>...</p>
 *   <h1 class="c-widget__title">I will be regular size.</h1>
 *   <p>...</p>
 * </article>
 */
 .c-widget {
  padding: 1em;
}

  .c-widget__title {
    font-size: 1em;
    font-weight: bold;
  }

  .c-widget__title--large {
    font-size: 1.5em;
  }

.c-widget--large {
  padding: 1.5em;
}

SassMeister-output.css

@charset "UTF-8";
/**
 * Modifying an Element *because of a Modifier*. E.g. we want a larger title
 * in a larger widget.
 *
 * <article class="c-widget  c-widget--large">
 *   <h1 class="c-widget__title">I will be bigger.</h1>
 *   <p>...</p>
 *   <h1 class="c-widget__title">I will be bigger.</h1>
 *   <p>...</p>
 *   <h1 class="c-widget__title">I will be bigger.</h1>
 *   <p>...</p>
 * </article>
 */
.c-widget {
  padding: 1em;
}

.c-widget__title {
  font-size: 1em;
  font-weight: bold;
}
.c-widget--large .c-widget__title {
  font-size: 1.5em;
}

.c-widget--large {
  padding: 1.5em;
}

/**
 * Modifying an Element directly, because it’s *not being styled because of
 * a context*. E.g. we can have multiple widget titles, and some of them
 * can be large.
 *
 * <article class="c-widget">
 *   <h1 class="c-widget__title  c-widget__title--large">I will be bigger.</h1>
 *   <p>...</p>
 *   <h1 class="c-widget__title">I will be regular size.</h1>
 *   <p>...</p>
 *   <h1 class="c-widget__title">I will be regular size.</h1>
 *   <p>...</p>
 * </article>
 */
.c-widget {
  padding: 1em;
}

.c-widget__title {
  font-size: 1em;
  font-weight: bold;
}

.c-widget__title--large {
  font-size: 1.5em;
}

.c-widget--large {
  padding: 1.5em;
}