0
点赞
收藏
分享

微信扫一扫

scss预处理器 @mixin@include

JakietYu 2022-04-29 阅读 74
cssscss

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


https://www.runoob.com/sass/sass-mixin-include.html

举报

相关推荐

0 条评论