Sass中的混合

2023-09-29 07:32:01 浏览数 (1)

SASS 中的混合和 LESS 中也一样，只是定义格式和调用的格式不同

LESS 中混合定义：.混合名称{} 或者 .混合名称(){}
LESS 中混合调用：.混合名称; 或者 .混合名称();
SASS 中混合定义：@mixin 混合名称{}; 或者 @mixin 混合名称(){};
SASS 中混合调用：@include 混合名称; 或者 @include 混合名称();

代码语言：scss复制

@mixin center() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.father {
  width: 300px;
  height: 300px;
  background: red;
  @include center();

  .son {
    width: 200px;
    height: 200px;
    background: blue;
    @include center();
  }
}

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

2023腾讯·技术创作特训营第二期

0 人点赞