LESS Mixins Autocomplete

VS Code extension providing intelligent autocomplete and IntelliSense for @flarian/less-mixin library.

Works in .less files and Vue.js Single File Components (<style lang="less">).

Features

• Smart Autocomplete: Intelligent suggestions for all LESS mixins
• Parameter Hints: Type hints and parameter information for each mixin
• Documentation: Inline documentation for each mixin with usage examples
• Hover Information: Detailed documentation on hover

Supported Mixins

Layout

• aspect-ratio, box-sizing, display, float, clear, position, inset, overflow, visibility, z-index, and more

Flexbox

• flex-basis, flex-direction, flex-wrap, flex-grow, flex-shrink, order

Grid

• grid-template-columns, grid-template-rows, grid-column, grid-row, grid-auto-flow, grid-auto-columns, grid-auto-rows

Spacing

• gap, row-gap, column-gap

Alignment

• justify-content, justify-items, justify-self, align-content, align-items, align-self, place-content, place-items, place-self

Installation

Install from VS Code Marketplace or:

1. Download the .vsix file
2. Open VS Code
3. Go to Extensions
4. Click ... → Install from VSIX

Usage

Simply start typing a mixin name in any .less file or Vue SFC:

In .less files:

.my-element {
	.flex();           // Autocomplete will suggest flex mixins
	.justify-center(); // Shows documentation on hover
	.gap(16px);        // Parameter hints
}

In Vue.js components:

<template>
	<div class="container">...</div>
</template>

<style lang="less">
.container {
	.flex();
	.justify-center();
	.items-center();
	.gap(16px);
}
</style>

Requirements

This extension works best with the @flarian/less-mixin package installed in your project.

License

MIT