SASS & SCSS ile @media Kullanımı | Cevap #4320

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. :)

Kaynak: https://stackoverflow.com/questions/36957904/media-queries-in-sass

$media_queries : (
    'sm'    : "(min-width: 768px)",
    'md'    : "(min-width: 992px)",
    'lg'   : "(min-width: 1200px)",
);

@mixin for_breakpoint($breakpoints) {
    $conditions : ();
    @each $breakpoint in $breakpoints {
        // If the key exists in the map
        $conditions: append(
            $conditions,
            #{inspect(map-get($media_queries, $breakpoint))},
            comma
        );
    }

    @media #{$conditions} {
        @content;
    }

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