將像素轉換爲電子版

Question

我從前幾天看了關於Tutsplus的防爆網頁設計的非常好的教程。指導員有一個令人敬畏的功能，是在Stylus中製作的。

$base_font_size = 16 

$base_font_size_ems = unit($base_font_size/16, em) 

$px = unit(1/$base_font_size, rem) 

$px_em = unit(1/$base_font_size, em) 

要調用手寫筆這個涼爽的功能，你只需要輸入：

.button 
    font-size: 16 * $px 
    border-radius: 3 * $px solid #000 

如果我理解這是正確的。該函數讓我以像素爲單位進行思考，但輸出全部內容。 現在，我如何在Less中執行相同的功能？ :-)

Answer 1

從Stylus到Less的轉換非常簡單。等效更少的代碼將如下所示：

@base_font_size: 16; 
@base_font_size_ems: unit(@base_font_size/16, em); 
@px: unit(1/@base_font_size, rem); 
@px_em: unit(1/@base_font_size, em); 

.button{ 
    font-size: 16 * @px; 
    border-radius: 3 * @px solid #000; 
} 

---

注意的是，以上僅僅是一個直接轉換有問題的代碼，並會目前總是導致兩個em和rem相同的值。但是，只有根字體大小和父級字體大小相同，em和rem通常纔會相同。有關em和rem的更多信息，請檢查here。

下面的代碼片段是一個修訂版本，我們有一個單獨的mixin來完成em/rem轉換的px。在這裏，我們將根字體大小設置爲一個變量（全局範圍），然後在每個選擇器塊（本地範圍）內設置父字體大小，並將其作爲參數傳遞給mixin。基於這些，rem和em值將被適當輸出。

@root_font_size: 32; 

.rem_em_px_conversion(@parent_font_size: 32){ 

    @px_rem: unit(1/@root_font_size, rem); 
    @px_em: unit(1/@parent_font_size, em); 
} 
.div{ 
    .rem_em_px_conversion(); 
    font-size: 16 * @px_em; /* change to 16 * @px_rem for converting to rem */ 
    border-radius: 4 * @px_em solid #000; 
    .button{ 
     @parent_font_size: 16; /* this is same as parent div font size */ 
     .rem_em_px_conversion(@parent_font_size); 
     font-size: 16 * @px_em; 
     border-radius: 4 * @px_em solid #000; 
    } 
}