如何在使用媒体查询和scss时更改变量值

// 定义初始变量
$primary-color: #3498db;

body {
  background-color: $primary-color;
}

// 使用媒体查询更改变量值
@media (max-width: 768px) {
  $primary-color: #e74c3c; // 在小屏幕上改变颜色
  body {
    background-color: $primary-color;
  }
}

@media (min-width: 1200px) {
  $primary-color: #2ecc71; // 在大屏幕上改变颜色
  body {
    background-color: $primary-color;
  }
}

:root {
  --primary-color: #3498db;
}

body {
  background-color: var(--primary-color);
}

@media (max-width: 768px) {
  :root {
    --primary-color: #e74c3c;
  }
}

@media (min-width: 1200px) {
  :root {
    --primary-color: #2ecc71;
  }
}

@mixin set-primary-color($color) {
  body {
    background-color: $color;
  }
}

$primary-color: #3498db;

@include set-primary-color($primary-color);

@media (max-width: 768px) {
  $primary-color: #e74c3c;
  @include set-primary-color($primary-color);
}

@media (min-width: 1200px) {
  $primary-color: #2ecc71;
  @include set-primary-color($primary-color);
}