Merhaba PT.

SCSS ile @media etiketini nasıl kullanıyorsunuz? Bu konuda baya araştırma yaptım fakat istediğim sonuca ulaşamadım. Şöyle ki;

<div class="box">
  <h1>
    BAŞLIK
  </h1>
  <p>
    İÇERİK
    <span>
      ALT İÇERİK
    </span>
  </p>
</div>

Böyle bir HTML kodumuz var.

SCSS ile şu şekilde yazdığımda;

@mixin respond($breakpoint) {
  @if($breakpoint == lg) {
    @media (max-width: 1200px) {
      @content
    }
  }
  @if($breakpoint == md) {
    @media (max-width: 992px) {
      @content
    }
  }
  @if($breakpoint == sm) {
    @media (max-width: 768px) {
      @content
    }
  }
}

.box {
  width: 50%;
  margin: 0 auto;
  background-color: red;
  text-align: center;
  padding: 15px;
  @include respond(lg) {
    background-color: blue;
  }
  @include respond(md) {
    background-color: orange;
  }
  @include respond(sm) {
    background-color: purple;
  }
  h1 {
    font-size: 48px;
    @include respond(lg) {
      font-size: 38px;
    }
    @include respond(md) {
      font-size: 24px;
      font-weight: normal;
    }
    @include respond(sm) {
      font-size: 18px;
      font-weight: bold;
    }
  }
  p {
    font-size: 14px;
    @include respond(lg) {
      font-size: 10px;
    }
    @include respond(md) {
      font-size: 8px;
    }
    span {
      font-size: 12px;
      @include respond(lg) {
        font-size: 10px;
        font-weight: bold;
      }
    }
  }
}

Böyle bir çıktı alıyorum;

.box {
  width: 50%;
  margin: 0 auto;
  background-color: red;
  text-align: center;
  padding: 15px;
}

@media (max-width: 1200px) {
  .box {
    background-color: blue;
  }
}

@media (max-width: 992px) {
  .box {
    background-color: orange;
  }
}

@media (max-width: 768px) {
  .box {
    background-color: purple;
  }
}

.box h1 {
  font-size: 48px;
}

@media (max-width: 1200px) {
  .box h1 {
    font-size: 38px;
  }
}

@media (max-width: 992px) {
  .box h1 {
    font-size: 24px;
    font-weight: normal;
  }
}

@media (max-width: 768px) {
  .box h1 {
    font-size: 18px;
    font-weight: bold;
  }
}

.box p {
  font-size: 14px;
}

@media (max-width: 1200px) {
  .box p {
    font-size: 10px;
  }
}

@media (max-width: 992px) {
  .box p {
    font-size: 8px;
  }
}

.box p span {
  font-size: 12px;
}

@media (max-width: 1200px) {
  .box p span {
    font-size: 10px;
    font-weight: bold;
  }
}

Fakat bu kullanımda çok fazla tekrar eden @media oluyor ve bu benim içime sinmiyor. Ben çıktının şu şekilde olmasını istiyorum;

.box {
  width: 50%;
  margin: 0 auto;
  background-color: red;
  text-align: center;
  padding: 15px;
}

.box h1 {
  font-size: 48px;
}

.box p {
  font-size: 14px;
}

.box p span {
  font-size: 12px;
}

@media (max-width: 1200px) {
  .box {
    background-color: blue;
  }
  .box h1 {
    font-size: 38px;
  }
  .box p {
    font-size: 10px;
  }
  .box p span {
    font-size: 10px;
    font-weight: bold;
  }
}

@media (max-width: 992px) {
  .box {
    background-color: orange;
  }
  .box h1 {
    font-size: 24px;
    font-weight: normal;
  }
  .box p {
    font-size: 8px;
  }
}

@media (max-width: 768px) {
  .box {
    background-color: purple;
  }
  .box h1 {
    font-size: 18px;
    font-weight: bold;
  }
}

Anlatmak istediğimi anlatabilmişimdir umarım.

Konuyla ilgili yorumlarınızı ve yönlendirmelerinizi bekliyorum. :)