Keenan Payne Keenan Payne - 5 months ago 22
CSS Question

`Unrecognized input` error with LESS guarded mixin

In my LESS project I am having issues getting my guarded mixins working with variables that I declared in another file. Here is the code I am working with:

_defaults.less (contains all of my variables)

//------------------------------------//
// @INCLUDE
//------------------------------------//
// Set whatever components you want included
// in your project to `true` and any components
// you do not wish to be included to `false`

// Base
@use-main: true;


_main.less (just a random partial in my project)

.main(@boolean) when (@boolean = true) {
// Styles go here
}

// Execute mixin
.main(@use-main);


style.less (imports all of my partials)

//------------------------------------//
// @IMPORTS
//------------------------------------//

// Base styles
@import "base/_main.less";


This is how my project is structured (for around 20 partials that are then imported into the
style.less
file).

Whenever I try to compile my project, I get this error:


Unrecognised input

c:\Users\Keenan\Documents\GitHub\concise.css-less\less\base_main.less line 1

c:\Users\Keenan\Documents\GitHub\concise.css-less\less\concise.less

Answer

The code you pasted is correct. In fact you are misled by lessc error message. It refers to the @main block. It seems the issue you are facing is related to your project Concise.css-less and more precisely this line.

@if @global-border-box == true {
// [...]
}

This is not the proper syntax for if statements in less. See question: How to use if statements in LESS

It seems you are converting a project from stylus to less. I would suggest cutting large chunks of files that fail to import to find out, through bisection, the lines that less doesn't recognize. Alternatively, you could comment the top mixins guards that are used here to include this or that part of the css, and that confuse less for error reporting.

For example, if you comment the first and last lines of file _lists.less:

//.lists(@boolean) when (@boolean = true) {
[...]
//.lists(@use-lists); 

lessc will report the error near the proper line (actually it's > on line 111 that it doesn't like):

ParseError: Unrecognised input in concise.css-less/less/base/_lists.less on line 109, column 9:
108     .breakpoint(small) {
109         dl.dl-horizontal {
110             overflow: hidden;
Comments