Chúng tôi đã nói về "Tại sao sử dụng Ems?" ở đây trước đây.
Đối với những người mới sử dụng giá trị em, Mạng nhà phát triển Mozilla thực hiện một công việc xuất sắc trong việc giải thích các ems:
… Một em bằng kích thước của phông chữ áp dụng cho phần tử gốc của phần tử được đề cập. Nếu bạn chưa đặt kích thước phông chữ ở bất kỳ đâu trên trang, thì đó là kích thước phông chữ mặc định của trình duyệt, có thể là 16px. Vì vậy, theo mặc định 1em = 16px và 2em = 32px.
Nếu bạn vẫn thích suy nghĩ bằng px, nhưng thích những lợi ích của chúng, không cần phải có máy tính, bạn có thể để Sass thực hiện công việc cho bạn. Có nhiều cách để tính số em với Sass.
Toán nội tuyến:
h1 ( font-size: (32 / 16) * 1em; ) p ( font-size: (14 / 16) + 0em; )Lưu ý: Chúng tôi cần “* 1em” ở đó để Sass nối giá trị đơn vị một cách chính xác. Bạn cũng có thể sử dụng “+ 0em” cho cùng mục đích.
Kết quả:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Điều này hiệu quả, nhưng chúng tôi có thể làm cho nó dễ dàng hơn.
Hàm em () Sass
Có khá nhiều cách khác nhau để viết hàm này, đây là cách lấy từ một bài báo hàng tuần về Thiết kế web:
$browser-context: 16; // Default @function em($pixels, $context: $browser-context) ( @return #($pixels/$context)em; )Siêu thông minh! Hàm này sử dụng phép nội suy chuỗi của Sass để nối chúng vào giá trị. Lưu ý rằng tham số $ context có giá trị mặc định là $ browser-context (vì vậy, bất cứ điều gì bạn đặt biến này thành). Điều này có nghĩa là khi gọi hàm trong Sass của bạn, bạn chỉ cần xác định $pixelsgiá trị và phép toán sẽ được tính tương đối $browser-context- trong trường hợp này là - 16px.
Cách sử dụng ví dụ:
h1 ( font-size: em(32); ) p ( font-size: em(14); )Kết quả:
h1 ( font-size: 2em; ) p ( font-size: 0.875em; )Một hàm tương tự sử dụng toán học thay vì nội suy chuỗi từ The Sass Way có thể dễ dàng được sửa đổi để chấp nhận các biến như hàm nội suy chuỗi của chúng tôi:
//un-modified @function calc-em($target-px, $context) ( @return ($target-px / $context) * 1em; ) // and modified to accept a base context variable $browser-context: 16; @function em($pixels, $context: $browser-context) ( @return ($pixels / $context) * 1em; )Một cái khác sử dụng phương thức unitless () của Sass:
$browser-context: 16; @function em($pixels, $context: $browser-context) ( @if (unitless($pixels)) ( $pixels: $pixels * 1px; ) @if (unitless($context)) ( $context: $context * 1px; ) @return $pixels / $context * 1em; )Điều này cho phép chúng tôi bao gồm đơn vị px hoặc không bao gồm trong lệnh gọi hàm.
h1 ( font-size: em(32); ) // is the same as: h1 ( font-size: em(32px); )