一、创建好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;
}
实现的一个样式: