計算只是一個價值減去

在欠我可以創建一個像素轉換成他們一個功能，只返回值計算只是一個價值減去

@em($target, $context: 16px) { 
    @return ($target/$context) * 1rem; 
}

這樣我可以使用的功能就像

.body { 
    font-size: em(22px); 
    padding: 0 em(10px); 
}

這將輸出

.body { 
    font-size: 1.375em; 
    padding: 0 0.625em; 
}

然而在少，我可以看到做同樣的功能的唯一方法是將選擇器傳遞到功能太

.em(@selector, @target, @context: 16px) { 
    @{selector}: unit((@target/@context), em); 
}

而且也需要以下列方式使用

.body { 
    .em(font-size: 22px); 
}

將輸出

.body { 
    font-size: 1.375em; 
}

這樣是好的，如果我有一個選擇和一個值，但如上面的Sass示例中所示，如果我需要填充0和0.675em，那麼我不能使用Less函數來執行此操作。

有沒有辦法從函數返回一個值就像Sass一樣，所以我不必將選擇器傳遞給函數？

來源

2014-09-20 Carl Thomas

後使用總之，不，您不能在Less中定義「真實」功能。因此對於特定的用例，最緊湊的方法就像[這些]（https：//gist.github。com/seven-phases-max/b07ea3f9b9d0a307070f）（無論你發現哪個更具可讀性）。 – 2014-09-20 20:52:51

這很棒@七相最大 - 這是一個很好的解決方法。如果您可以將其作爲答案創建，我會將其標記爲幫助他人的「答案」。 – 2014-09-20 21:02:45

這聽起來像你需要被介紹到['rem']（http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/）你贏了再也不需要這個功能了。：d – GolezTrol 2014-09-20 23:00:53

總之，不，你不能在Less中定義「true」函數。因此對於特定用例中最緊湊的方法是這樣的：無論你找到更多的可讀性（注意，算術表達式需要括號如果使用--strict-math=on選項

@context: 16px; 
@u: 1em/@context; 

.body { 
    font-size: @u * 22px; 
    padding: 0 @u * 10px; 
}

：

@context: 16px; 
@u: 1em/@context; 

.body { 
    font-size: 22 * @u; 
    padding: 0 10 * @u; 
}

或者這）。

來源

2014-09-23 14:39:48

-1

我在我自己的少文件中做的是爲特定屬性創建一個混合。主要原因是如果瀏覽器支持需要擴展到非重新啓用的瀏覽器（如IE8），則啓用快速修復。

我創建了一個@ base-font-size變量，並將其設置爲16，符合我的標準化css。

.font-size(@pixels) { 
    @remValue: (@pixels/@base-font-size); 
    @pxValue: (@pixels * 1); 
    font-size: ~"@{pxValue}px"; 
    font-size: ~"@{remValue}rem"; 
} 

p { .font-size(20); }

來源

2014-09-23 13:05:38 jdunham

你可以做的是在mixin中定義一個變量，然後在執行mixin之後將該變量分配給here所描述的任何需要的變量。

我做了類似於從PX獲得REM值的東西：

.px2rem(@px-value) { 
    @px2rem-xs: unit((@px-value/@root-font-size-xs), rem); 
    @px2rem-sm: unit((@px-value/@root-font-size-sm), rem); 
    @px2rem-ms: unit((@px-value/@root-font-size-ms), rem); 
    @px2rem-md: unit((@px-value/@root-font-size-md), rem); 
    @px2rem-lg: unit((@px-value/@root-font-size-lg), rem); 
}

通過執行混入：

.px2rem(10px);

的變量被設置，並且可以在

.something{ 
    margin: @px2rem-xs; 
    @media screen and (min-width: @screen-md-min) { 
    margin: @px2rem-md; 
    } 
}

來源

2016-07-28 05:10:44 gwildu

計算只是一個價值減去

回答

相關問題