SCSS ( @mixin @include )

1. 引入

(1) 安装

(2) 记得开启

(3) 成功编译

1. 使用

https://5xruby.tw/posts/play-sass-mixin-and-include

定义一个名称，将需要重复使用的 CSS 放在里面

$primary: #248bf1; // $定义变数
@mixin backgroundImageStyle($attachment, $notRepeat: false) {
  background-position: center;
  background-size: cover;
  background-attachment: $attachment;
  // 预设repeat
  @if $notRepeat {
    // 如果true打开
    background-repeat: no-repeat;
  }
}

呼叫使用

body {
  @include backgroundImageStyle(fixed, $notRepeat: false);
  background-image: url("../image/Cyberpunk-featured-movie-bg.jpg");
}