<div class="hoge">
  <div class="hoge__fuga">
    <h1 class="hoge__fuga--title">
      htmlのfont-sizeの2倍で指定
    </h1>
    <h2 class="hoge__fuga--sub-title">
      htmlのfont-sizeの1.5倍で指定
    </h2>
    <p class="hoge__fuga--text">
      htmlのfont-sizeの等倍で指定
    </p>
  </div>
</div>
html {
  font-size: 14px;
}

.hoge {
  font-size: 12px;
  &__fuga {
    font-size: 32px;
    &--title {
      font-size: 2rem;
    }
    &--sub-title {
      font-size: 1.5rem;
    }
    &--text {
      font-size: 1rem;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.