Have ideas to improve npm?Join in the discussion! »

    postcss-less
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/postcss-less package

    4.0.1 • Public • Published

    postcss-less

    tests cover size

    A PostCSS Syntax for parsing LESS

    Note: This module requires Node v6.14.4+. poscss-less is not a LESS compiler. For compiling LESS, please use the official toolset for LESS.

    Install

    Using npm:

    npm install postcss-less --save-dev

    Please consider becoming a patron if you find this module useful.

    Usage

    The most common use of postcss-less is for applying PostCSS transformations directly to LESS source. eg. ia theme written in LESS which uses Autoprefixer to add appropriate vendor prefixes.

    const syntax = require('postcss-less');
    postcss(plugins)
      .process(lessText, { syntax: syntax })
      .then(function (result) {
        result.content // LESS with transformations
    });

    LESS Specific Parsing

    @import

    Parsing of LESS-specific @import statements and options are supported.

    @import (option) 'file.less';

    The AST will contain an AtRule node with:

    • an import: true property
    • a filename: <String> property containing the imported filename
    • an options: <String> property containing any import options specified

    Inline Comments

    Parsing of single-line comments in CSS is supported.

    :root {
        // Main theme color
        --color: red;
    }

    The AST will contain a Comment node with an inline: true property.

    Mixins

    Parsing of LESS mixins is supported.

    .my-mixin {
      color: black;
    }

    The AST will contain an AtRule node with a mixin: true property.

    !important

    Mixins that declare !important will contain an important: true property on their respective node.

    Variables

    Parsing of LESS variables is supported.

    @link-color: #428bca;

    The AST will contain an AtRule node with a variable: true property.

    Note: LESS variables are strictly parsed - a colon (:) must immediately follow a variable name.

    Stringifying

    To process LESS code without PostCSS transformations, custom stringifier should be provided.

    const postcss = require('postcss');
    const syntax = require('postcss-less');
    
    const less = `
        // inline comment
    
        .container {
            .mixin-1();
            .mixin-2;
            .mixin-3 (@width: 100px) {
                width: @width;
            }
        }
    
        .rotation(@deg:5deg){
          .transform(rotate(@deg));
        }
    `;
    
    const result = await postcss().process(less, { syntax });
    
     // will contain the value of `less`
    const { content } = result;

    Use Cases

    • Lint LESS code with 3rd-party plugins.
    • Apply PostCSS transformations (such as Autoprefixer) directly to the LESS source code

    Meta

    CONTRIBUTING

    LICENSE (MIT)

    Install

    npm i postcss-less

    DownloadsWeekly Downloads

    2,250,513

    Version

    4.0.1

    License

    MIT

    Unpacked Size

    19.6 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar