跨域问题 CROSS

是什么

• @mixin：用来定义一个可复用的 CSS 代码块（就像“函数定义”）。
• @include：用来调用（插入）这个代码块（就像“函数调用”）。

💡 它们是 SCSS 提供的代码复用机制，最终会被编译成标准 CSS。

基础语法

定义一个 mixin

@mixin 名称(参数1, 参数2...) {
  // 可复用的 CSS 规则
}

调用这个 mixin

.selector {
  @include 名称(值1, 值2...);
}

举例说明

无参数的 mixin

定义：

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用：

.box1 {
  @include center;
  width: 200px;
  height: 100px;
  background: lightblue;
}

.box2 {
  @include center;
  width: 150px;
  height: 80px;
  background: lightcoral;
}

编译后 CSS：

.box1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100px;
  background: lightblue;
}

.box2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 80px;
  background: lightcoral;
}

✅ 效果：两个盒子都实现了居中布局，但不用重复写三行代码。

带参数的 mixin

定义（带默认值）：

@mixin square($size: 50px) {
  width: $size;
  height: $size;
}

✅ $size: 50px 表示：如果不传参，默认用 50px。

使用：

.avatar {
  @include square(60px); // 传 60px
  background: #333;
}

.placeholder {
  @include square; // 用默认值 50px
  background: #eee;
}

编译后 CSS：

.avatar {
  width: 60px;
  height: 60px;
  background: #333;
}

.placeholder {
  width: 50px;
  height: 50px;
  background: #eee;
}

多参数 mixin

定义：

@mixin button-style($bg, $color, $radius: 4px) {
  background: $bg;
  color: $color;
  border: none;
  border-radius: $radius;
  padding: 8px 16px;
  cursor: pointer;
}

使用：

.btn-primary {
  @include button-style(#007AFF, white);
}

.btn-warning {
  @include button-style(#ff9500, white, 8px); // 自定义圆角
}

编译后 CSS：

.btn-primary {
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}

.btn-warning {
  background: #ff9500;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}

mixin 中包含嵌套和逻辑

定义：

@mixin responsive-text($mobile-size, $desktop-size) {
  font-size: $mobile-size;

  @media (min-width: 768px) {
    font-size: $desktop-size;
  }
}

使用：

.title {
  @include responsive-text(18px, 24px);
  font-weight: bold;
}

编译后 CSS：

.title {
  font-size: 18px;
  font-weight: bold;
}

@media (min-width: 768px) {
  .title {
    font-size: 24px;
  }
}

✅ 实现了响应式字体大小，且逻辑封装在 mixin 中。

如何include

@mixin 定义在哪不重要，重要的是：@include 使用前，必须通过 @use / @import / uni-app 自动注入 让它“可见”！

示例项目结构

src/
├── styles/
│   └── mixins.scss        ← 全局 mixin 定义在这里
├── components/
│   └── MyButton.vue
└── App.vue

mixins.scss 内容：

@mixin ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用 @use（ 官方推荐）

<!-- MyButton.vue -->
<style lang="scss" scoped>
@use '@/styles/mixins' as *; /* 导入所有 mixin */

.button {
  @include ellipsis; /* ✅ 可用 */
}
</style>

as * 表示“直接暴露所有 mixin”，无需前缀。

使用 @import（逐渐淘汰）

<style lang="scss" scoped>
@import '@/styles/mixins';

.button {
  @include ellipsis; /* ✅ 可用 */
}
</style>

注意：Vite + Sass 默认支持 @use，更安全（避免重复导入、命名冲突）。

uni-app 的特殊情况

uni-app 有一个特殊机制：uni.scss 文件会被自动注入到每个页面/组件的样式中（无需手动 @import）。

所以在 uni-app 中，如果你把 mixin 写在 根目录的 uni.scss 里，那么在任何组件中都可以直接用

<style lang="scss" scoped>
.title {
  @include text-ellipsis; /* ✅ 直接可用！ */
}
</style>

这是 uni-app 的便利设计，但仅限于 uni.scss 文件。