scss预处理器 @mixin@include

weixin_43869439

已于 2022-04-29 11:23:49 修改

阅读量430

点赞数

文章标签： css scss

于 2022-04-29 11:22:19 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43869439/article/details/124491635

版权

本文介绍了Sass预处理器中@mixin和@include的使用方法。通过@mixin定义样式模块，如bordered和popCover，然后使用@include在不同选择器中调用这些模块，实现代码复用。同时展示了如何传参及设置默认值，如translate方法。示例代码展示了如何在实际项目中应用这些概念。

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

scss 学习

scss预处理器使用 @mixin 来定义变量或方法，使用@include使用变量

// 定义变量
@mixin bordered {
  border: 1px solid red;
}

@mixin popCover {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.7);
}

@mixin translate($originX: 0px, $originY: 0px) { 
  // （定义方法，参数使用$开头的变量来定义使用冒号 ：添加默认值） 与js方法类似
  transform: translate($originX, $originY);
}

// 使用变量
.container {
  @include bordered;
}
.box{
  @include popCover;
}
.boxs{
  transform: translate(100px, 100px);
}