Your cart is currently empty!
[SASS] Bootstrap Mixin สำหรับทำ Responsive Breakpoint
เนื่องจากล่าสุดหยิบ Bootstrap 3 มาทำเว็บไซต์ Responsive แล้วเกิดปัญหาว่าอยากมีวิธีใส่ Breakpoint สำหรับ Component ที่เราสร้างใหม่ง่าย ๆ หน่อย ก็เลยไปเสิร์จเจอโค้ดนี้ครับ เข้าใจง่ายดี
วิธีใช้ก็ง่าย ๆ โยนใส่ไฟล์ SASS เราได้เลย
@mixin breakpoint($class) { @if $class == xs { @media (max-width: 767px) { @content; } } @else if $class == sm { @media (min-width: 768px) { @content; } } @else if $class == md { @media (min-width: 992px) { @content; } } @else if $class == lg { @media (min-width: 1200px) { @content; } } @else { @warn "Breakpoint mixin supports: xs, sm, md, lg"; } }
เวลาเรียกใช้ก็ง่าย ๆ แบบนี้:
.foot__contact { margin: 0; padding: 0; list-style: none; @include breakpoint(sm) { display: none; } }
ทีนี้ตัว Breakpoint ที่เค้ากำหนดมาให้ถ้าสังเกตดูมันจะเป็นตาม Bootstrap เลย นั่นคือ
- xs = 0 – 767px
- sm = 768px+
- md = 992px+
- lg = 1200px+
เป็นการเขียน Responsive แบบ Mobile-First (Mobile ก่อนแล้วไป Desktop) แต่ผมชอบแบบ Desktop-First (เขียน CSS ของ Desktop ก่อน แล้วค่อยเขียน CSS ของ Mobile ไล่ลงมา) เลยแก้ไข Breakpoint นิดหน่อยให้เป็นแบบนี้
@mixin breakpoint($class) { @if $class == xs { @media (max-width: 767px) { @content; } } @else if $class == sm { @media (max-width: 991px) { @content; } } @else if $class == md { @media (max-width: 1199px) { @content; } } @else if $class == lg { @media (min-width: 1200px) { @content; } } @else { @warn "Breakpoint mixin supports: xs, sm, md, lg"; } }
เอาไปเลือกใช้กันได้ตามอัธยาศัยคร้าบ 🙂
โค้ดต้นฉบับ: https://medium.com/@timknight/creating-a-dead-simple-sass-mixin-to-handle-responsive-breakpoints-889927b37740
by
Tags:
Leave a Reply