[SASS] Function สำหรับแปลง px เป็น em

เวลาทำเว็บไซต์ช่วงนี้ชอบใช้ SASS ครับ มันมีอะไรให้เล่นเยอะดี พอใช้ LESS แล้วรู้สึกว่าฟีเจอร์น้อยแล้วติด ๆ ขัด ๆ ไม่สะใจ (แต่จริง ๆ ก็ไม่ได้ใช้ฟีเจอร์ SASS หมดนะ)

ซึ่งเวลาทำเว็บไซต์ Responsive ก็ใช้วิธีกำหนด font-size, margin, padding ต่าง ๆ แบบ em หมด เพราะจะได้ scale เวลาเราต้องเปลี่ยนขนาดฟ้อนต์ในหน้าจอขนาดต่าง ๆ ได้ครับ

อธิบายเพิ่มเติม: โดยพื้นฐานแล้ว 1 em = 16px ครับ แต่บางคนก็กำหนดขนาดฟ้อนต์ html, body เป็น 10px เพื่อให้ 1em = 10px จะได้คำนวณง่าย ๆ

ซึ่งถ้าต้องมาคำนวณขนาดฟ้อนต์แบบ em เองว่า 18px มันกี่ em นะ, 23px มันกี่ em นะ แบบนี้กว่าจะทำเว็บเสร็จคงผ่านไปสามชาติกว่า ๆ (เวลากลับมาดูโค้ดก็จะงงด้วย) เค้าจึงมักจะใช้ฟังก์ชั่นช่วยกันครับ

วิธีการใช้งานคือโยนฟังก์ชั่นนี้เข้าไปในไฟล์ SASS เราได้เลย

$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
  @return #{$pixels/$context}em
}

อันนี้เป็นตัวอย่างการใช้งานครับ:

em(16) หมายถึง 16px นั่นเอง ฟังก์ชั่นนี้จะ generate โค้ด CSS ออกมาเป็น 1em โดยอัตโนมัติครับ

body {
  font-size: em(1ไ6);
}

h1 {
  font-size: em(72);
}

h2 {
  font-size: em(24);
}

อย่าลืมว่าฟังก์ชั่นนี้ไม่ได้เฉพาะเจาะจงเฉพาะ font-size เท่านั้น เราสามารถใช้เป็น margin, padding, height etc. ได้อีกด้วย 😀

ที่มา: http://web-design-weekly.com/snippets/converts-pixels-to-ems-with-sass/

Leave a Reply

Your email address will not be published. Required fields are marked *