@techui/mixins

English | 中文

English

@techui/mixins is a style mixin library maintained by aYin for the TechUI ecosystem.

As of v0.1.0, it provides both:

• index.less for Less projects
• index.scss for Scss projects

It is designed to work together with @techui/colors, giving you a compact set of reusable style helpers for layout, spacing, visual effects, state styling, and common interaction patterns.

✨ Features

• Supports both Less and Scss
• Integrated with @techui/colors
• Provides a large set of shorthand mixins for daily UI work
• Suitable for global injection and direct file import
• Keeps TechUI style helpers consistent across projects

🚀 Installation

npm install @techui/mixins @techui/colors

🔨 Usage

Less in Vite

import { defineConfig } from "vite";

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData: `
          @import "@techui/mixins";
          @import "@techui/colors/less/all";
        `
      }
    }
  }
});

Scss in Vite

import { defineConfig } from "vite";

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@techui/mixins/sass";
          @import "@techui/colors/scss/all";
        `
      }
    }
  }
});

Less Usage

.card {
  .bd(@wh, 1px);
  .bgc(@aza5);
  .centerFlex();
}

Scss Usage

.card {
  @include bd($wh, 1px);
  @include bgc($aza5);
  @include centerFlex();
}

📦 Entry Files

• Default import: @techui/mixins -> index.less
• Explicit Less import: @techui/mixins/less -> index.less
• Explicit Sass import: @techui/mixins/sass -> index.scss
• Compatible Sass alias: @techui/mixins/scss -> index.scss

Package fields:

• main: index.less
• sass: index.scss
• exports["."]: index.less
• exports["./sass"]: index.scss

📚 Dependencies

• @techui/colors
• less / less-loader for Less projects
• sass for Scss projects

🔗 Links

• NPM Package
• TechUI Official Website

🤝 Contributing

Issues and Pull Requests are welcome.

中文

@techui/mixins 是由 aYin 为 TechUI 生态维护的样式混入库。

从 v0.1.0 开始，它同时提供：

• index.less，用于 Less 项目
• index.scss，用于 Scss 项目

它与 @techui/colors 配合使用，提供一套高频、紧凑、可复用的样式工具，适合处理布局、视觉效果、交互态和日常 UI 开发中的重复样式逻辑。

✨ 特性

• 同时支持 Less 和 Scss
• 与 @techui/colors 深度配合
• 提供大量高频样式混入
• 适合全局注入，也适合在单文件中直接使用
• 保持 TechUI 项目中的样式工具风格统一

🚀 安装

npm install @techui/mixins @techui/colors

🔨 使用方式

Vite 中使用 Less

import { defineConfig } from "vite";

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData: `
          @import "@techui/mixins";
          @import "@techui/colors/less/all";
        `
      }
    }
  }
});

Vite 中使用 Scss

import { defineConfig } from "vite";

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@techui/mixins/sass";
          @import "@techui/colors/scss/all";
        `
      }
    }
  }
});

Less 中使用

.card {
  .bd(@wh, 1px);
  .bgc(@aza5);
  .centerFlex();
}

Scss 中使用

.card {
  @include bd($wh, 1px);
  @include bgc($aza5);
  @include centerFlex();
}

📦 入口说明

• 默认导入：@techui/mixins -> index.less
• 显式 Less 导入：@techui/mixins/less -> index.less
• 显式 Sass 导入：@techui/mixins/sass -> index.scss
• 兼容 Sass 别名：@techui/mixins/scss -> index.scss

包字段：

• main: index.less
• sass: index.scss
• exports["."]: index.less
• exports["./sass"]: index.scss

📚 依赖项

• @techui/colors
• Less 项目需要：less、less-loader
• Scss 项目需要：sass

🔗 相关链接

• NPM Package
• TechUI 官网

🤝 贡献

欢迎提交 Issue 和 Pull Request。