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

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

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

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

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

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

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

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

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