如何使用 CSS 属性值作为 SASS Mixin 参数？

使用 CSS 属性值作为 SASS Mixin 参数

在尝试创建通用边距/填充混合时，您遇到了涉及设置的问题CSS 属性作为 mixin 值。本文旨在通过探索 SASS mixin 中字符串插值的使用来解决此问题。

要将 CSS 属性值设置为 mixin 值，您需要使用字符串插值。这种技术使您能够将变量作为属性名称嵌入到 mixin 定义中。

这是包含字符串插值的代码的更新版本：

[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);
  }
}

#{$val} 语法中mixin 定义允许您动态设置 CSS 属性名称。

注意：

• 像 *="_m" 这样的属性选择器也可能适用于包含以下内容的元素：类名中包含“_mid”。这可能会促使您重新考虑命名策略。
• 字符串插值对于在 mixin 定义中使用变量作为属性名称至关重要。

以上是如何使用 CSS 属性值作为 SASS Mixin 参数？的详细内容。更多信息请关注PHP中文网其他相关文章！