首页 >web前端 >css教程 >SASS Mixin 值可以是动态 CSS 属性吗?

SASS Mixin 值可以是动态 CSS 属性吗?

Barbara Streisand
Barbara Streisand原创
2024-10-27 10:52:30979浏览

Can SASS Mixin Values Be Dynamic CSS Properties?

SASS Mixin 值可以是 CSS 属性吗?

问题:

创建通用边距/padding 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);
  }
}

解决方案:

在 mixin 值中使用变量作为 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);
  }
}

注意:通过重新评估属性选择器结构来确保选择器特异性。

以上是SASS Mixin 值可以是动态 CSS 属性吗?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn