如何使用 CSS 属性作为 SASS Mixin 值：字符串插值指南

使用 CSS 属性作为 SASS Mixin 值

在尝试创建通用的边距/填充混合时，您在 SASS 中遇到了障碍。让我们深入研究您描述的问题并一起找到解决方案。

在 Mixins 中设置 CSS 属性

您的代码尝试在 SASS mixin 值中设置 CSS 属性（边距和填充）。然而，有一个关键问题：CSS 属性不能直接用作 mixin 值。相反，您需要采用一种称为“字符串插值”的技术来将变量包含为属性名称。

使用字符串插值

字符串插值允许您使用 #{$ 将变量值插入到字符串中变量} 语法。这可以帮助您根据 mixins 中的变量动态设置 CSS 属性。

以下是如何修改代码以利用字符串插值：

<code class="sass">[class*="shift"] {
  $sft-o: 10px;

  @mixin shift_stp($val) {
    &[class*="_sml"]{ #{$val}: $sft-o; }
    &[class*="_mid"]{ #{$val}: $sft-o * 2; }
    &[class*="_big"]{ #{$val}: $sft-o * 3; }
  }

  &[class*="_m"]{
    @include shift_stp(margin);
  }

  &[class*="_p"]{
    @include shift_stp(padding);
  }
}</code>

关于属性选择器的注意事项

需要注意的是，您使用的属性选择器 (*="_m") 还将匹配类名中带有“_mid”的元素。这可能不是您想要的行为，因此请考虑相应地修改您的属性选择器。

以上是如何使用 CSS 属性作为 SASS Mixin 值：字符串插值指南的详细内容。更多信息请关注PHP中文网其他相关文章！