将字符串传递给 sass mixin 中的变量
Posted
技术标签:
【中文标题】将字符串传递给 sass mixin 中的变量【英文标题】:Pass string into variable in 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 的值?
提前感谢您的建议!
【问题讨论】:
【参考方案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中创建动态变量。这就是我建议地图的原因。如果您担心创建一个巨大的地图。您始终可以根据某些组创建较小的地图,然后访问它。以上是关于将字符串传递给 sass mixin 中的变量的主要内容,如果未能解决你的问题,请参考以下文章
如何将表达式传递给使用 Sass 变量的 calc() mixin
SASS - 将 $variable 从@mixin 中传递给@content