css less mixin rem calculator沒有被定位爲字體或東西

早上大家我有以下mixin，我想將其轉換爲全局的。我的意思是沒有設置我想用它作爲字體大小的邊距例如..或者其他任何你可能想要設置成rem/em單位的東西。我對新手和預處理器很陌生，我想知道是否有人從這裏可以幫助我改變代碼。非常感謝您的寶貴時間。css less mixin rem calculator沒有被定位爲字體或東西

.marginSizeCalc(@sv) { 
    @sizeValue: unit(@sv); 
    @remValue: (@sizeValue/@font-size-base); 
    margin: unit(@sv,px); 
    margin: unit(@remValue,rem); 
}

來源

2013-07-04 Bogdan

你應該張貼您的「解決方案」，如下一個答案，然後接受它，而不是張貼在這個問題的解決方案。要麼，要麼一起刪除問題。 – ScottS

找到了一種解決問題的方法......我認爲它甚至比在mixin中設置邊距或字體或其他任何東西都要好。

.marginSizeCalc(@sv) { 
    @sizeValue: unit(@sv); 
    @remValue: (@sizeValue/@font-size-base); 
    @toRem: unit(@remValue, rem); 
}

如何：

h1, h2, h3, h4, h5, h6 { 
    font-family: @headings-font-family; 
    font-weight: @headings-font-weight; 
    color: @headings-font-color; 
    margin: @remValue; 
    margin: @toRem; 
    .marginSizeCalc(@gutterWidth); 
}

更新：

.marginSizeCalc(@sv, @db) { 
    @sizeValue: unit(@sv); 
    @divideBy: unit(@sv); 
    @remValue: (@sizeValue/@divideBy); 
    @toPx: unit(@remValue, px); 
    @toRem: unit(@remValue, rem); 
} 

h1, h2, h3, h4, h5, h6 { 
    font-family: @headings-font-family; 
    font-weight: @headings-font-weight; 
    color: @headings-font-color; 
    margin: @toPx; 
    margin: @toRem; 
    .marginSizeCalc(@gutterWidth, 2); 
}

來源

2013-07-04 19:57:33 Bogdan

您的解決方案似乎對返回的第一個「邊距」有誤。假設'@ font-size-base'是'10px'，'@sv'是'12px'，你的第一個'margin'會出現在'1.2px'而不是'12px'上，因爲你使用直接的'@ remValue'而不是'單位（@sv，px）'像原始代碼一樣計算。 – ScottS

erm對不起，我忘了更改代碼內的變量。我一直在玩它幾個小時，第一個版本是基於字體..所以我沒有太大的改變。我發佈的例子是保證金。用法，我現在看到了什麼問題。你是對的斯科特改變了它的工作方式。做了小小的升級還沒有測試過代碼。 – Bogdan

我在想你想用'@ toPx'作爲第一個'margin'，而且你的更新還有第二個參數，你需要在你的「How To」例子中通過這個參數。 – ScottS

css less mixin rem calculator沒有被定位爲字體或東西

回答

相關問題