@techui/lessmixins

@techui/lessmixins

English | 中文

English

A simple and efficient Less Mixins library developed and maintained by aYin.

✨ Features

• 🚀 Simple and intuitive API design
• 📝 Rich collection of common CSS snippets
• 🎨 Integrated with @techui/colors color system
• 🔧 Ready to use with global import support
• 💡 Boost productivity and reduce code duplication

🔨 Usage

Global Import in Vue CLI Projects

Configure in vue.config.js:

const path = require('path');

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './node_modules/@techui/lessmixins/index.less')
      ]
    }
  }
};

Global Import in Vite Projects

Configure in vite.config.js:

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')}";`
      }
    }
  }
});

Import in Individual Files

In your .less files:

@import '@techui/lessmixins';

.your-class {
  .bd(@wh); // border: 1px solid #fff;
}

📖 Common Examples

// 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: [e-mail]
• WeChat: jay1986cn
• Website: https://techui.net

🤝 Contributing

Issues and Pull Requests are welcome!

中文

一个简洁高效的 Less Mixins 工具库,由 aYin 开发维护。

✨ 特性

• 🚀 简洁易用的 API 设计
• 📝 丰富的常用 CSS 代码片段
• 🎨 集成 @techui/colors 颜色系统
• 🔧 开箱即用,支持全局引入
• 💡 提高开发效率,减少重复代码

🔨 使用方法

Vue CLI 项目全局引入

在 vue.config.js 中配置:

const path = require('path');

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, './node_modules/@techui/lessmixins/index.less')
      ]
    }
  }
};

Vite 项目全局引入

在 vite.config.js 中配置:

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')}";`
      }
    }
  }
});

单文件引入

在需要使用的 .less 文件中:

@import '@techui/lessmixins';

.your-class {
  .bd(@wh); // border: 1px solid #fff;
}

📖 常用示例

// 边框样式
.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%);
}

🌈 关于 Less

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。

详细使用方法请查阅 Less 中文文档

📚 依赖项

• @techui/colors - 颜色系统
• less - Less 编译器
• less-loader - Webpack Less 加载器

🔗 相关链接

• NPM Package
• GitHub Repository
• TechUI 官网

👨‍💻 作者

aYin

• Email: [e-mail]
• WeChat: jay1986cn
• Website: https://techui.net

🤝 贡献

欢迎提交 Issue 和 Pull Request!