掌握sass：终于不用问同事如何使用Mixin啦！

​

SCSS 中的 Mixin 和如何使用它们来创建可复用的样式代码块

测试文件 mixin.scss内容

@mixin test($block) {
  $B: $namespace + '-' + $block;
  .#{$B} {
    @content;
  }
}

1. Mixin 定义与功能

在 SCSS（Sass 的一种语法）中， @mixin 指令用于定义可以在整个样式表中重复使用的样式代码块。这里的 @mixin test($block) 定义了一个名为 test 的 mixin，接受一个参数 $block。

@mixin test($block) {
  ...
}

2. 变量与命名空间

在 mixin 内部，定义了一个变量 $B，它将 $namespace 变量的值与传入的 $block 参数值通过 - 连接起来。这里 $namespace 是在styleConfig.scss已经定义的一个变量。

$namespace: 'btn';

$B: $namespace + '-' + $block;

3. 选择器与内容插入

接着，使用 $B 插值语法来构造一个类选择器，并将 @content 插入到这个选择器的样式块中。 @content 是一个特殊的指令，用于在 mixin 被 @include 调用时，包含传递给 mixin 的实际样式内容。

.#{$B} {
  @content;
}

4. 使用示例

这里 $namespace被定义为 btn，并且我们想要为一个按钮块定义样式，可以这样使用 ‘test’ mixin：

@use './styleConfig' as *; // sass新语法

$namespace: 'btn';

@include test('primary') {
  color: Black;
  background-color: blue;
}

这将会生成以下 CSS：

.btn-primary {
  color: Black;
  background-color: blue;
}

5. vue文件中的使用

<template>
  <!-- 模板代码 -->
</template>

<script>
// 脚本代码
</script>

<style lang="scss" scoped>
@import './Styles/mixin.scss'; // 根据实际路径调整
@use './Styles/mixin' as *; // @use新引入方式

// 定义命名空间或者引入变量
$namespace: 'my-component';

// 使用 mixin
@include test('example') {
  background-color: red;
}
</style>

最终生成样式

.my-component-example {
  background-color: red;
}

6. 全局配置

如果不想每次都要在 .vue 文件引入命名空间或者定义变量，可以在vite.config.ts 全局配置样式

7. 总结

• @mixin go($block) 定义了一个接受单个参数的 mixin。
• 使用 $namespace和 $block构造了一个类选择器。
• @content指令用于在 mixin 调用时包含样式内容。

• 全局配置变量可省去每次定义命名空间
• 通过这种方式，可以方便地创建具有命名空间的样式类，增强样式的模块化和可维护性。

​