@TechUI/LessMixins Introduction

🔓Open Source

TechUI LessMixins (Style Mixin Library) is the CSS Accelerator of the TechUI ecosystem.

If @techui/colors provides the semantics of color, then @techui/lessmixins provides the syntactic sugar for styles. It is a set of efficient Less code snippets maintained by aYin over a long period, designed to shorten the verbose CSS writing process by over 50% through minimalist abbreviation syntax.

One-sentence summary: Write standardized styles with less code.

Core Features

• 🚀 Minimalist API: Rejects verbose property names, using intuitive abbreviations (e.g., .bd for border, .bgc for background-color).
• 🎨 Deep Integration with Color System: Seamlessly connects with @techui/colors to directly consume color variables.
• ⚡️ Global Injection: Configure once, and use directly in any project .less file or Vue component <style lang="less">, without repeated imports.
• 🛠 Common Layout Encapsulation: Built-in solutions for high-frequency CSS scenarios like absolute centering and text truncation.

Global Configuration

For the best experience, we strongly recommend configuring it as globally available. This way, you don't need to manually @import it in every component.

Vite Project (Recommended)

Configure preprocessorOptions in vite.config.js to achieve automatic injection:

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        // Automatically inject mixins and colors into the header of every less file
        additionalData: `@import "${path.resolve(__dirname, './node_modules/@techui/lessmixins/index.less')}";`
      }
    }
  }
});

Vue CLI / Webpack Project

Use style-resources-loader 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')
      ]
    }
  }
};

Efficiency Leap

After using @techui/lessmixins, your style code will become extremely concise.

Scenario 1: Setting Border and Background

Traditional Approach (Native CSS/Less):

.box {
  border: 1px solid #ffffff;  /* Need to manually memorize color values */
  background-color: #000000;
}

TechUI Approach (With Mixins):

.box {
  .bd(@wh);   /* .bd = 1px solid, @wh = white */
  .bgc(@bk);  /* .bgc = background-color, @bk = black */
}

Scenario 2: Absolute Centering

Traditional Approach:

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

TechUI Approach:

.modal {
  .centerAbsolute; /* Done in one line */
}

Common Mixin Cheat Sheet

Although the library contains a large number of tools, the following are the "Golden Commands" most frequently used during development:

Mixin	Meaning	Corresponding CSS Example
.bd(@color)	1px solid border	border: 1px solid @color
.bgc(@color)	Background color	background-color: @color
.wh(@w, @h)	Width & Height	width: @w; height: @h
.centerAbsolute	Absolute positioning centering	top: 50%; left: 50%; transform...
.ellipsis	Single-line text truncation	overflow: hidden; text-overflow: ellipsis...

Dependencies

This library is usually not used alone but works in synergy with the following libraries:

• @techui/colors: Provides semantic color variable support for Mixins (e.g., @re Red, @bl Blue).
• Less: The Less compiler and loader must be installed.