Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

LESS @import: Passing paths to lessc

Tags:

css

less

I'd like to use LESS stylesheets in a parent and child theme, in which most of the stylesheet information is specified by the parent and the child simply overrides a few files. This is possible with the Ruby version of LESS like so:

var parser = new(less.Parser)({
    paths: ['.', './lib'], // Specify search paths for @import directives
    filename: 'style.less' // Specify a filename, for better error messages
});

but is it possible with the command line compiler lessc? I'd like to say:

$ lessc --path=".;../parent" style.less
like image 218
Marcus Downing Avatar asked Sep 09 '11 14:09

Marcus Downing


People also ask

Does less need to be compiled?

Using Less. js in the browser is the easiest way to get started and convenient for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using Node.

How do I know if I have less version?

less -v is used to get the current version.

What is Lessjs?

Overview. Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official documentation for Less, the language and Less.js, the JavaScript tool that converts your Less styles to CSS styles.

How do I create a less CSS file?

Pre-compiling LESS into CSS: To compile LESS into CSS, we use the below command in a command prompt. The lessc command lets us precompile our LESS file into a basic CSS file. This helps us in writing modular code using LESS programming and still getting all the benefits of CSS by compiling it into traditional fast CSS.


2 Answers

Looking at the lessc source code:

    case 'include-path':
        options.paths = match[2].split(':')
            .map(function(p) {
                if (p && p[0] == '/') {
                    return path.join(path.dirname(input), p);
                } else if (p) {
                    return path.join(process.cwd(), p);
                }
            });
        break;

You can pass multiple paths to lessc. So the correct syntax for your example is:

lessc --include-path=".:../parent" style.less
like image 166
Wilfred Hughes Avatar answered Nov 06 '22 04:11

Wilfred Hughes


Marcus

There's a --include-path switch that you can use.

lessc --include-path=./inc/ main.less

Note, it needs to be relative to the path that lessc is executing in.

like image 28
hokapoka Avatar answered Nov 06 '22 04:11

hokapoka