将字符串传递给 sass mixin 中的变量 [英] Pass string into variable in sass mixin

问题描述

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

I have a very simple mixin which looks like this:

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

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

I have previously defined variable $input-font-size and pass it into the mixin in the following format

@include global( input );

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

Problem is that the sass is not converting it and browser returns :

字体大小:输入字体大小

font-size:input-font-size

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

How should I write my mixin to actually return the value from $input-font-size please?

提前感谢您的建议！

推荐答案

您不能在 sass 中创建动态变量.

You can't create a dynamic variables in sass.

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

'#{}' means it will convert whatever attribute to its plain css form, it won't be treated as a variable it will be treated as a text.

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

What you can do is create a map for the list of properties and call them inside the 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 中传递变量名

or if you dont want to create the map then you can simply pass the variable name in the mixin

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

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

这篇关于将字符串传递给 sass mixin 中的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！