Less的混入用法(类似于方法)

// 定义混入方法时，需要在类选择器之后添加一个小括号

// 定义混入方法

.abc () {

color: red;

}

.active {

border: 1px solid blue;

// 使用混入方法

.abc();

}

.current {

background: orange;

// 使用混入方法

.abc()

}

// 混入的好处：把重复的代码抽离出去，使用的时候可以多次导入，降低代码的冗余度

封装一个鼠标经过图像上移

1.在@/styles/mixins.less中封装公共组件

// 鼠标经过上移阴影动画
.hoverShadow () {
transition: all .5s;
&:hover {
transform: translate3d(0,-3px,0);
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
}

2.使用less的自动化导入

下载 vue add style-resources-loader 包

2） 安装完毕后会在vue.config.js中自动添加配置，如下：

module.exports = {

pluginOptions: {

'style-resources-loader': {

preProcessor: 'less',

patterns: []

}

}

}

3）把需要注入的文件配置一下后，重启服务即可

const path = require('path')

module.exports = {

pluginOptions: {

'style-resources-loader': {

preProcessor: 'less',

patterns: [

// 配置哪些文件需要自动导入

path.join(__dirname, './src/styles/variables.less'),
path.join(__dirname,'./src/styles/mixins.less')

]

}

}

}

然后在组件的样式中就可以使用啦!

.hoverShadow ()