Create Next App

LESS Variable Importer

Convert LESS variables to design tokens. The importer recognizes comments for metadata like type, description, and other properties.

Remove Prefix:

Segmentation Method:

Segmentation Characters:

Output Format:

Extension Space:

LESS Variables:

Output Preview:

No tokens generated yet. Paste LESS variables in the input area.

Format Help:

The importer recognizes the following comment format for metadata:

// [Type "color"]  (Defines token type)
// [Description "Some description"]  (Token description)
// [Label "User-friendly label"]  (Added to extensions)
// [Tags "tag1", "tag2"]  (Added to extensions)
// [Category "category-name"]  (Added to extensions)
// [Protected "true"]  (Added to extensions)
@variableName: value;

Variable references are converted to token references. For example, @textColor becomes {textColor}.

When using the Nested Structure output format, variable segments are used to create a nested token structure. For example, @button_BorderCornerRadius becomes button.border.corner.radius in the token structure.