A simple less mixins library developed by ayin.
npm install @techui/lessmixinsvue.config.js:
javascript
const path = require('path');
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, './node_modules/@techui/lessmixins/index.less')
]
}
}
};
`
$3
Configure in vite.config.js:
`javascript
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData: @import "${path.resolve(__dirname, './node_modules/@techui/lessmixins/index.less')}";
}
}
}
});
`
$3
In your .less files:
`less
@import '@techui/lessmixins';
.your-class {
.bd(@wh); // border: 1px solid #fff;
}
`
📖 Common Examples
`less
// Border styles
.box {
.bd(@wh); // border: 1px solid #fff;
}
// Background color
.container {
.bgc(@bk); // background-color: #000;
}
// Absolute center positioning
.modal {
.centerAbsolute; // position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
}
`
🌈 About Less
Less is a CSS pre-processor that extends CSS with features like variables, mixins, and functions.
For detailed usage, please refer to the Less Documentation
📚 Dependencies
- @techui/colors - Color system
- less - Less compiler
- less-loader - Webpack Less loader
🔗 Links
- NPM Package
- GitHub Repository
- TechUI Official Website
👨💻 Author
aYin
- Email:
- WeChat: jay1986cn
- Website:
🤝 Contributing
Issues and Pull Requests are welcome!
---
中文
一个简洁高效的 Less Mixins 工具库,由 aYin 开发维护。
✨ 特性
- 🚀 简洁易用的 API 设计
- 📝 丰富的常用 CSS 代码片段
- 🎨 集成 @techui/colors 颜色系统
- 🔧 开箱即用,支持全局引入
- 💡 提高开发效率,减少重复代码
🔨 使用方法
$3
在 vue.config.js 中配置:
`javascript
const path = require('path');
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.resolve(__dirname, './node_modules/@techui/lessmixins/index.less')
]
}
}
};
`
$3
在 vite.config.js 中配置:
`javascript
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData: @import "${path.resolve(__dirname, './node_modules/@techui/lessmixins/index.less')}";
}
}
}
});
`
$3
在需要使用的 .less 文件中:
`less
@import '@techui/lessmixins';
.your-class {
.bd(@wh); // border: 1px solid #fff;
}
`
📖 常用示例
`less
// 边框样式
.box {
.bd(@wh); // border: 1px solid #fff;
}
// 背景颜色
.container {
.bgc(@bk); // background-color: #000;
}
// 绝对居中
.modal {
.centerAbsolute; // position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);
}
``