将字符串传递给 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

sass的函数简介

sass

html Sass:将属性值传递到/在mixins / functions #sass内部

Sass 不会将 mixins 和变量编译成 css