ayin-lessmixins v1.1.0
English | 简体中文
Translated by deepl
Introduction
AyinLessMixins is a set of style mixin libraries based on less.js , this library has been open sourced and uploaded to the npm server ayin-lessmixins
For details of how to use Less, please check less documentation
The most useful thing about this library is that it calls some common CSS snippets via short code.
For example .bd(@wh) is actually border:1px solid #fff;
e.g. .bgc(@bk) actually background-color:#0000;
e.g. .absoluteCenter is actually position: absolute; top:50%; left:50%; transform: translateX(-50%) translateY(-50%) @plus;
Usage
This mixin library, which can be used in any project
Install from the NPM server
npm i ayin-lessmixins --save
Then introduce it globally or separately by doing the following
Global introduction in vue.config.js
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, ". /node_modules/ayin-lessmixins/ayin-lessmixins.less")
]
}
},Global introduction in vite.config.js
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData:`
@import "${path.resolve(__dirname, '. /node_modules/ayin-lessmixins/ayin-lessmixins.less')}";
`
}
}
},It is recommended to use global introductions in your project, so that the definitions in mixins can be easily called in all components without each file being introduced separately.