script để chuyển đổi css sheet từ px sang em

Question

Bất cứ ai cũng biết về một kịch bản (php, python, perl, bash, bất cứ điều gì) sẽ chuyển đổi một bản định kiểu từ px sang em?

Giống như, nó sẽ lấy đầu vào của tên tệp và cỡ phông cơ bản (mặc định 16) và chuyển đổi tất cả các phiên bản px thành em?

ví dụ:

convertpx2ems --file stylesheet.css --base-font-size 16

sẽ chuyển đổi này:

button { 
    font-size:14px; 
    padding:8px 19px 9px; 
} 

một cái gì đó như thế này:

button { 
    font-size: .875em; 
    padding: .5em 1.188em .563em; 
} 

... có thể, có cách nào để làm điều này với sass?

Answer 1

Bạn không thể trao đổi một cách hợp lý kích thước px và em như thế. Kích thước px là một giá trị tuyệt đối sẽ giữ nguyên kích thước bất kể nó ở đâu. Kích thước em tương đối so với phần tử cha, do đó 0.5em là một nửa kích thước của phần tử gốc. Nếu điều đó không có ý nghĩa gì nhiều, hãy xem xét đoạn mã sau:

/* CSS */ 
span { font-size: 0.9em; } 

<!-- HTML --> 
<span>Testing, 
    <span>Testing, 
     <span>Testing</span> 
    </span> 
</span> 

Trong ví dụ này, bạn sẽ thấy từ "Kiểm tra" ngày càng nhỏ hơn vì kích thước phông chữ của mỗi thẻ khoảng là 90 % của một trong những ở trên.

Đối với thẻ nội dung, một font-size của 1em là tương đương với 16px, nhưng đó là lần duy nhất bạn một cách hợp lý có thể dịch một kích thước khác

Answer 2

Từ các cuộc thảo luận trước đó, có vẻ như là mặc dù không trực tuyến máy phát điện tồn tại, phải không? Tôi chắc chắn không thể tìm thấy một trong đó sẽ phân tích toàn bộ bảng định kiểu.

Đầu tiên, nếu em được áp dụng cho và hình ảnh, hoặc đầu vào, ngoài phông chữ bên trong đầu vào, chúng có tương đối không, và nếu có thì cái gì và như thế nào? Hình ảnh không thể lồng nhau, và tôi có một thời gian khó nhìn thấy chúng liên quan đến mọi chiều rộng div cha mẹ. (Chuyển đổi vì lợi ích của CSS PIE, để tránh lỗi, là những gì truyền cảm hứng cho điều này).

Ngoài chỉ nhập và hình ảnh, tôi đã tự hỏi có cách nào để chuyển đổi toàn bộ biểu định kiểu hay không. Giúp tôi xem liệu logic của tôi có hoạt động không. Tôi nghĩ rằng tôi có một số yếu tố đã được tạo ra, tôi sẽ chỉ cần tack chúng lại với nhau.

Làm việc với CSS một mình không thể thực hiện thủ thuật, vì không thể biết được phần tử nào sẽ được lồng vào nhau. Vì vậy, nó sẽ yêu cầu quét đầu ra html. Cách tốt nhất để làm điều đó là gì? Cách duy nhất tôi có thể nghĩ đến là áp dụng tất cả các kiểu nội tuyến, trong đó generator đã được thực hiện để chuyển đổi mẫu cho email và như vậy. Khi các kiểu là nội dòng, điều này sẽ cho thấy mọi thứ được lồng nhau như thế nào. Từ đó, so sánh với biểu định kiểu.

So sánh từng phần tử lồng nhau với "em" với bất kỳ phần tử gốc nào có "em" để tạo px cho phù hợp và tôi đã có công cụ regex để phân tích cú pháp css, giúp việc này dễ dàng hơn.

Vấn đề duy nhất là một lớp có thể được lồng trong các phần tử khác nhau, các em trong một lớp duy nhất trở nên khác biệt trong ngữ cảnh của nó, do đó không thể chuyển đổi thành px và được áp dụng giống nhau. Giải pháp duy nhất, tôi tin rằng, là tạo lại cấu trúc lồng nhau, hoặc một phần, trong trang css để áp dụng px cho phù hợp, bất cứ khi nào kích thước phông chữ khác nhau trong ngữ cảnh.

Ví dụ:

<code> 
    // Original Stylesheet 
    .mainClass{font-size:1em;} 

    // HTML 
    <div id="outerNest" style="font-size:.5em;"> 
     <div class="mainClass"> Font here is .5em </div> 
    </div> 

    <div class="mainClass> Font here is 1em</div> 

     // New stylesheet 
    .mainClass{font-size:16px;} 

    // newly created styles to work with px conversion 
    #outerNest .mainClass{font-size:8px;} 
</code> 

A. Bạn có nghĩ rằng có thể làm việc? B. Có cách nào tốt hơn không? C. Có cách nào đáng giá không? Tôi có thể đã sử dụng nó một lần trong một mặt trăng màu xanh trong một số tình huống ngẫu nhiên, nhưng tôi nghi ngờ nhiều người sẽ tìm thấy nó của bất kỳ giá trị. Hay là có một tình huống mà trong đó mọi người có thể chạy vào đây và ở đó có tiện lợi không?

Answer 3

Tôi gõ này trong awk:

#!/bin/awk -f 

BEGIN { 
    bfs = 16; 
} 

{ 
    while (match($0, /([0-9]+\.)?[0-9]+px/)) { 
     num = substr($0, RSTART, RLENGTH - 2); 
     #print("numval: ", numval); 
     $0 = substr($0, 1, RSTART-1) (num != 0 ? (1/bfs) * num: 0) "em" substr($0, RSTART + RLENGTH); 
    } 
} 

1 

Bạn có thể sử dụng nó để thay thế bất kỳ mục px trong một tập tin với các chuyển đổi phù hợp .. lưu ý rằng BFS phải được thiết lập để kích thước cơ sở Font (16 trong này trường hợp) mà bạn muốn sử dụng. Cũng lưu ý, bạn phải có một số kỹ năng vỏ để sử dụng đúng cách này.

Answer 4

Bạn có thể làm điều đó một cách dễ dàng trong Perl:

perl -p -i -e 's/(\d+)px/($1\/16).em/ge' stylesheet.css 

Answer 5

Copy/Paste css của bạn trong JSFiddle để chuyển đổi. mã ví dụ:

var regFindPX = new RegExp('(\\d+)px','g'); 
var reg3decPoints = new RegExp('(\.\\d{3}).*', ''); 

var css = 'css code'; 
var result; 
while ((result = regFindPX.exec(css)) !== null) { 
    var px = parseInt(result[1]); 
    var em = px/16; 
    em = em.toString().replace(reg3decPoints, '$1'); 
    css = css.replace(px + 'px', em + 'em'); 

} 

Answer 6

Như James chỉ ra, vấn đề với bất kỳ chuyển đổi thẳng lên là stylesheet không hề biết trong đó yếu tố này được lồng nhau. Bởi vì giá trị em là tương đối, các tính toán font-size sẽ được thay đổi trong nhiều yếu tố lồng nhau. Bạn sẽ cần một công cụ quét đầu ra HTML sau khi nó được hiển thị và điều chỉnh đệ quy các kiểu có liên quan.

Tôi đã viết một thành phần JavaScript có thể chứng minh hữu ích về vấn đề này. Bạn có thể lấy nó here.

Quy trình làm việc được đề xuất sẽ là gọi emify(document.body) trong trình duyệt, sau đó trích xuất các giá trị em có liên quan và đưa nó trở lại vào css của bạn.

Không lý tưởng, nhưng đó là một cách để làm điều đó với độ chính xác.

Answer 7

Tôi nhận ra đây là một chủ đề cũ, nhưng tôi nghĩ điều này có thể giúp ai đó:

Chuyển đổi px em: mục tiêu ÷ context = kết quả

Ex:

Để tìm giá trị 1px & cho biết kích thước phông chữ cho vùng chứa là 16px, phương trình sẽ như sau:

1 ÷ 16 = 0,0625 ~

(Tốt nhất là để làm tròn đến phần nghìn gần nhất.)

1px = 0.063em

Từ đây bạn cũng có thể tìm thấy các phép đo khác bởi mục tiêu * em_value = kết quả

Ví dụ:

10 * .063 =.63

10px = .63em

Tôi hy vọng điều này có ý nghĩa & giúp một ai đó.