SASS & SCSS ile @media Kullanımı

redline 1124 gün önce

1,108 defa görüntülendi ve 1 kişi tarafından değerlendirildi

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

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (8)

redline

478 gün önce

G Ü N C E L

#011791

redline

792 gün önce

@bukr3j ve hala güncel :D Çözüm bulunamadı :D

#008960

bukr3j

798 gün önce

318 gün önce 😃

#008898

makifgokce

1116 gün önce

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;
    }
}

#004320

redline

1116 gün önce

Güncel...

#004319

redline

1121 gün önce

Aynı şekilde parçalıyor hocam. Başka bir .box benzeri elemanda yine birden çok media çıktısı veriyor. Ben aynı media etiketini tekrar tekrarlanmadan çıktı almanın yolunu arıyorum. :)

#004246

mustafasever

1121 gün önce

böyle denermisiniz.

@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;

	h1 {
		font-size: 48px;


	}
	p {
		font-size: 14px;
		span {
			font-size: 12px;
		}
	}


	@include respond(lg) {
		background-color: blue;
		h1 {
			font-size: 38px;
		}
		p {
			font-size: 10px;
			font-weight: bold;
		}
	}


	@include respond(md) {
			background-color: orange;
		h1 {
			font-size: 24px;
			font-weight: normal;
		}
		p {
			font-size: 8px;
		}
	}


	@include respond(sm) {
				background-color: purple;
		h1 {
			font-size: 18px;
			font-weight: bold;
		}
		p {
			font-size: 10px;
		}
	}

}

#004243

redline

1122 gün önce

Güncel...

#004236