Nội suy chuỗi LESS

Question

Tôi đang chỉ định kích thước phông chữ trong Ems, có nghĩa là chúng có liên quan đến vùng chứa chính. Tôi có nhiều yếu tố con và không muốn lặp lại kích thước gốc mỗi khi tôi tính toán nó. Vì vậy, tôi có:

@articleFontSize: 21/16; 

Nếu, hơn nữa, tôi sử dụng:

font-size: @articleFontSizeem; 

như bạn mong muốn, tôi nhận được 'biến @articleFontSizeem là undefined'.

Nếu tôi suy nó:

font-size: @{articleFontSize}em; 

sau đó một lần nữa nó từ chối để biên dịch và tôi chỉ nhận được một 'lỗi cú pháp' đơn giản.

font-size: @articleFontSize~"em"; 

này biên dịch - nhưng trong đầu ra tôi nhận được mã như:

font-size: 1.3125 em; 

ví dụ: nó được thêm vào một không gian trước khi các đơn vị, vì vậy họ đang bị bỏ qua bởi trình duyệt.

Tôi đang chạy LiveReload trên máy Mac (2.0 beta 5) theo cài đặt sử dụng 'System Ruby 1.8.7' để biên soạn.

GIẢI PHÁP ĐÃ CẬP NHẬT:

a. Thêm số lượng không chính xác của các đơn vị:

font-size: 0em + @articleFontSize; 

b. (Phương pháp của tôi trước đó thay thế - sử dụng một chức năng):

.rFont(@target, @context) { 
    @ratio: @target/@context; 
    font-size: ~"@{ratio}em"; 
} 

gọi với:

.rFont(11,@articleFontSize); 

Output (đúng, lưu ý không có khoảng trắng không mong muốn):

font-size: 0.7063571428571428em; 

Tôi không mong đợi đặt @ {ratio} bên trong dấu ngã + dấu ngoặc kép để vẫn mở rộng. Nhưng nó hoạt động (gần như không có gì khác không.)

Câu hỏi này giúp: concatenate values in less (css) without a space

Answer 1

Hãy thử

font-size: 0em + @articleFontSize; 

Answer 2

Bạn có thể đặt các em trong biến articleFontSize? Ví dụ:

@articleFontSize: 21/16em; 

Hoặc nếu điều đó không làm việc có thể:

@articleFontSize: (21/16)em; 

Answer 3

Có một cái nhìn tại 'rem' đơn vị đo lường thay vì: http://snook.ca/archives/html_and_css/font-size-with-rem Nó có tất cả những lợi ích của ems /% tương đối, nhưng vẫn duy trì khả năng dự đoán của px và ngăn ngừa những đứa trẻ 'kích thích kích thước'.

Trân trọng,