如何利用 SCSS 的变量和混合（Mixin）功能来创建可复用的样式组件，并确保在不同场景下的兼容性？

使用 SCSS 的变量和混合功能可以方便地创建可复用的样式组件，并确保在不同场景下的兼容性。下面是具体的步骤：

创建变量：使用 符号定义变量，例如 primary-color: #005500;。这样可以方便地在整个项目中重复使用该颜色。

创建混合（Mixin）：使用 @mixin 关键字创建混合，例如 @mixin bordered-box { border: 1px solid $primary-color; }。这样可以将样式属性封装到一个可复用的混合中。

使用变量和混合：在需要使用变量和混合的地方，使用 符号引用变量，例如 color: primary-color;；使用 @include 关键字引用混合，例如 @include bordered-box;。这样可以方便地重用变量和混合，并确保样式的一致性。

兼容性处理：在项目中使用 SCSS 的变量和混合时，需要考虑不同浏览器和设备的兼容性。可以使用 SCSS 的条件语句，如 @if 和 @else，来根据不同情况应用不同的样式。例如：

@mixin rounded-button {
  @if $legacy-support {
    border-radius: 4px;
  }
  @else {
    border-radius: 50%;
  }
}

在使用该混合时，可以根据需要设置 $legacy-support 变量的值，以适应不同的兼容性需求。

通过使用 SCSS 的变量和混合功能，并结合条件语句来处理兼容性，可以方便地创建可复用的样式组件，并确保在不同场景下的兼容性。这样可以提高代码的可维护性和可重用性，减少样式冗余，提高开发效率。