SASS将属性传递给mixin以输出[重复]答案

【问题标题】：SASS passing properties to mixin to output [duplicate]SASS将属性传递给mixin以输出[重复]
【发布时间】：2016-03-25 07:10:10
【问题描述】：

我正在尝试创建一个可以传递属性并输出具有单独更改设置的属性的 mixin 或函数。

我这里有一个叫 emm 的 mixin：

//Not to change, I use this in multiple scenarios 

$browser-context: 16;
@function emm($pixels, $context: $browser-context) {
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }
  @if (unitless($context)) {
    $context: $context * 1px;
  }
  @return $pixels / $context * 1em;
}

由此，我可以传入一个像素大小，它会为我输出 em。太好了。

我现在正试图通过一个单独的 mixin 或函数来传递一个属性，就像这样：

@mixin em($style, $pixels) {
  $style: $pixels;
  $style: emm($pixels);
}

div {
  background: red;
  height: emm(20px);

  @include em(font-size, 20px);
}

希望有这样的输出：

div {
  background: red;
  height: 1.25em;
  font-size: 20px;
  font-size: 1.25em;
}

但它不起作用，这是我尝试过的最后一件事，我认为这是，有什么想法吗？

我知道我可以专门为字体大小制作一个，但我希望将它用于多个属性而无需制作多个 mixin。

【问题讨论】：

标签： function properties sass mixins

【解决方案1】：

想通了！您可能知道，SASS 输出很有趣，一种方法是在 #{} 中放置一个变量以使其工作。所以这就是我如何让它工作的：

$browser-context: 16;
@function emm($pixels, $context: $browser-context) {
  @if (unitless($pixels)) {
    $pixels: $pixels * 1px;
  }
  @if (unitless($context)) {
    $context: $context * 1px;
  }
  @return $pixels / $context * 1em;
}

@mixin em($style, $pixels) {

  #{$style}: $pixels;
  #{$style}: emm($pixels);
}

div {
  background: red;
  height: emm(20px);

  @include em(font-size, 20px);
}

// OUTPUT

div {
  background: red;
  height: 1.25em;
  font-size: 20px;
  font-size: 1.25em;
}

【讨论】：