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

CSS 属性作为 SASS Mixin 值

在 SASS 中创建通用边距/填充混合时，您可能会遇到将 CSS 属性设置为混合值。提供的代码片段是完成此任务的尝试。但要使其完全发挥作用，还需要进行一定的修改。

解决方案：

解决这个问题的关键在于字符串插值。通过利用 #{$var} 表示法，可以使用变量作为属性名称。

更正代码：

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

DEMO:

此更正确保可以根据 mixin 的参数动态设置 CSS 属性（边距或填充）。

注意：

对于属性选择器 ...*="_m"，值得考虑的是，该选择器将应用于类名中包含“_m”的所有元素，包括那些包含“_mid”的元素。因此，可能需要一些重新评估和调整才能达到所需的特异性。

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