将字符串传递给 sass mixin 中的变量答案

【问题标题】：Pass string into variable in sass mixin将字符串传递给 sass mixin 中的变量
【发布时间】：2017-10-31 17:46:27
【问题描述】：

我有一个非常简单的 mixin，如下所示：

@mixin global( $variable-name ) {
    font-size:   #{$variable-name}-font-size;
}

我之前已经定义了变量$input-font-size，并按照以下格式传入mixin

@include global( input );

问题是 sass 没有转换它并且浏览器返回：

字体大小：输入字体大小

请问我应该如何编写我的 mixin 以实际返回 $input-font-size 的值？

提前感谢您的建议！

【问题讨论】：

标签： sass

【解决方案1】：

你不能在 sass 中创建动态变量。

'#{}' 意味着它将任何属性转换为其纯 css 形式，它不会被视为变量，它将被视为文本。

您可以做的是为属性列表创建一个映射并在 mixin 中调用它们。

$input-font-size: 16px;
$textarea-font-size: 14px;


$var-map: (
  input: $input-font-size, 
  textarea:  $textarea-font-size,
);

@mixin global( $variable-name ) {
    font-size:  map-get($var-map, $variable-name);
}

body {
  @include global( input );
}

或者如果你不想创建地图，那么你可以简单地在 mixin 中传递变量名

@mixin sec( $variable-name ) {
  font-size: $variable-name;
}
.text-area {
  @include sec( $textarea-font-size );
}

样品笔 https://codepen.io/srajagop/pen/aWedNM

【讨论】：

谢谢@karthick。这将与一个小的 mixin 一起工作得很好。问题是我的 mixin 很大，而且地图会永远存在。
嗯。如果您想使用简短的变量表示法，那么这是要走的路。否则你总是可以直接传递变量名 mixin global( $variable-name ) { font-size: $variable-name; } 并像 include global( $input-font-size ); 一样包含它
你仍然会在 sass 文件中拥有尽可能多的变量，对吧？那么为什么创建地图是一项艰巨的任务。您可以创建一个包含所有变量的 var 文件，然后创建一个包含相同变量的映射文件。只是您将在变量前添加一个键。
谢谢@karthick。实际的 mixin 看起来像这样 gist.github.com/dompl/d8947dfed8feba487940d841752321a2 我想更改变量，即 select 或 textarea。公平地说，我从未使用过地图，因此我感到困惑。您认为有更好的解决方法吗？
嗨@Dom你不能在sass中创建动态变量。这就是我建议地图的原因。如果您担心创建一个巨大的地图。您始终可以根据某些组创建较小的地图，然后访问它。