计算只是一个价值减去

在欠我可以创建一个像素转换成他们一个功能，只返回值计算只是一个价值减去

@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

计算只是一个价值减去

回答

相关问题