关于v3的scss混入宏基本用法

一、创建好vue3的项目

二、在assets 中创建一个文件：自定义文件名.scss(后缀名) 比如：common.scss

三、自拟的.scss中 混入存储共有的一些属性

@mixin 属性名($参数名) {

   设置具体样式

    border: $border solid #ccc;

}

在vue组件中style->引入scss：

<style lang="scss">

/**引入混入模式的scss*/

@import "../assets/mon.scss";

标签的class类名 {

  /**传多个参数*/

  /*@include border(参数一,参数二,参数三);*/

  /**传单个参数*/

  @include border(参数一);

  /*切记单独在scss中设置样式时，属性名后的括号不要用 "" 号引起来*/

}

后在scss中具体实现相关代码。

</style>

实例：用scss混入宏 设置vue组件的一个基本样式：

具体代码如下：

vue组件

<template>

  <div class="about">

    <h1 class="names">2306A</h1>

    <button @click="changColor">改变</button>

  </div>

</template>

<script setup>

import { ref } from "vue";

let color = ref('red');

const changColor = () => {

  color.value = 'blue';

  console.log(color.value)

}

</script>

<style lang="scss">

/**1.在assets中新建一个  mon.scss文件，

2.把vue组件中的定义的颜色属性传到mon.sccs文件中。scss混入可以存储共有的一些属性。

*/

/**引入混入模式的scss*/

@import "../assets/mon.scss";

.names {

  /**传多个参数*/

  /*@include border(v-bind(color),100px,10px);*/

  /**传单个参数*/

  @include border(20px);

  /*切记单独在scss中设置样式时，属性名后的括号不要用 "" 号引起来*

}

</style>

mon.scss

// scss 混入存储共有的一些属性

// @mixin border($color, $size, $border) {

//     color: $color;

//     font-size: $size;

//     border: $border solid #ccc;

// }

@mixin border($border) {

    border: $border solid #ccc;

}

实现的一个样式：