定义sass中的@mixin方法-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45669668/article/details/107931535

本文介绍如何使用SASS封装方法解决CSS属性浏览器兼容性问题，通过定义混合宏减少重复代码，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实际开发中，css属性为了满足浏览器的兼容问题，常常需要在属性前加浏览器前缀，书写麻烦
如—

  -webkit-box-shadow:0 0 18px 0 rgba(0,0,0,.2);
  -moz-box-shadow:0 0 18px 0 rgba(0,0,0,.2);
  -ms-box-shadow:0 0 18px 0 rgba(0,0,0,.2);
  -o-box-shadow:0 0 18px 0 rgba(0,0,0,.2);
   box-shadow:0 0 18px 0 rgba(0,0,0,.2);

那么定义一个sass方法之后，直接在我们需要的地方调用此方法就可以了

//定义的sass方法，$type---属性，$value---属性值
@mixin webkit($type,$value){
    -webkit-#{$type}:$value;
    -moz-#{$type}:$value;
    -ms-#{$type}:$value;
    -o-#{$type}:$value;
    #{$type}:$value;
}

调用-----

<style scoped lang='scss'>
.car-item {
  //调用封装的sass方法
  @include webkit(box-sizing, border-box);
  @include webkit(box-shadow, 0 0 18px 0 rgba(0, 0, 0, 0.2));

  // -webkit-box-shadow:0 0 18px 0 rgba(0,0,0,.2);
  // -moz-box-shadow:0 0 18px 0 rgba(0,0,0,.2);
  // -ms-box-shadow:0 0 18px 0 rgba(0,0,0,.2);
  // -o-box-shadow:0 0 18px 0 rgba(0,0,0,.2);
  // box-shadow:0 0 18px 0 rgba(0,0,0,.2);
  }
</style>

用法类似于普通封装的方法