Question

我可以创建一个将px转换为em并仅返回值

的函数

@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中返回函数中的一个值，所以我不必将选择器传递给函数？

Answer 1

简而言之，不，你不能在Less中定义“true”函数。因此对于特定用例，最紧凑的方法是这样的：

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

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

或者这个：

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

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

无论你发现哪个更具可读性（请注意，如果使用--strict-math=on选项，算术表达式需要parens）。

Answer 2

你可以做的是在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);
}

执行mixin：

.px2rem(10px);

变量已设置，可在以后使用

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

Answer 3

我在自己较少的文件中所做的是为特定属性创建一个mixin。主要原因是如果浏览器支持需要扩展到IE8等非启用浏览器，则可以快速修复。

我创建了一个@ base-font-size变量，并为每个标准化css设置为16。

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

p { .font-size(20); }

只计算一个较小的值

3 个答案: